How is Vue's style isolation implemented?

With Vue, style isolation is achieved by enclosing scoped in the

<template>
  <div class="about">
    <h1>This is an about page</h1>
  </div>
</template>

<style scoped>
  .about {
    color: red
  }
</style>
Copy the code

Chrome:

Let’s debug the source code to analyze how this is implemented.

Vue-loader source code process analysis

First, a vue-loader work flow chart, first mixed impression, look back.

Check the configuration

I don’t know if you have seen the default webpack configuration of vue-cli, you can output the configuration of the project through the file via vue inspect > config.js command, @vue/cli 4.5.10 default configuration is as follows. Focus only on the configuration of.vue files

module.exports = {
  module: {
    rules: [
      /* config.module.rule('vue') */
      {
        test: /\.vue$/,
        use: [
          {
            loader: 'D:\\work_space\\qiankun-example\\sub-vue\\node_modules\\cache-loader\\dist\\cjs.js'.options: {
            // Save path of the previously packed result
              cacheDirectory: 'D:\\work_space\\qiankun-example\\sub-vue\\node_modules\\.cache\\vue-loader'.cacheIdentifier: 'ffa56dac'}}, {loader: 'D:\\work_space\\qiankun-example\\sub-vue\\node_modules\\vue-loader\\lib\\index.js'.options: {
              compilerOptions: {
                whitespace: 'condense'
              },
              cacheDirectory: 'D:\\work_space\\qiankun-example\\sub-vue\\node_modules\\.cache\\vue-loader'.cacheIdentifier: 'ffa56dac'}}]},]},plugins: [
    /* config.plugin('vue-loader') */
    new VueLoaderPlugin(),
    / /...],}Copy the code

Two points can be seen from the configuration

vue-loaderAnd aftercache-loader, this loader is mainly used to cache the results of the last compilation. For files that have not been modified, it can be directly pulled from the cache, greatly shortening the compilation time and improving the performance of the most obvious loader.
To deal withvueThe file also needsvue-loaderandVueLoaderPluginPlug-ins are indispensable

VueLoaderPlugin

The main functions of this plug-in are as follows

toThe Compiler in webpackObject to add an identity,vue-loaderRegistration is monitored during executionVueLoaderPlugin
detectioncompilertherulesIs there any processing in.vueThe loader of the file does not throw an error
Add aRuleSetGlobal formatpitcher-loader, such asimport Foo from './foo.css? vueWill match this loader withvueparameter
A copy ofRulesetThe format ofrulesPre-coveredrules

Source code fragment analysis:

sub-vue\node_modules\vue-loader\lib\plugin-webpack4.js:

    // Add a tag to check whether the vueLoaderPlugin is configured
    if (compiler.hooks) {
      // webpack 4
      compiler.hooks.compilation.tap(id, compilation= > {
        const normalModuleLoader = compilation.hooks.normalModuleLoader
        normalModuleLoader.tap(id, loaderContext= > {
          loaderContext[NS] = true})})}// A global pitcher-loader is used to process template, script, and style blocks in vue
    const pitcher = {
      loader: require.resolve('./loaders/pitcher'),
      resourceQuery: query= > {
          // This loader will only hit requests in this format. The vue field is present in query
          // import script from \"./App.vue? vue&type=script&lang=js
        const parsed = qs.parse(query.slice(1))
        returnparsed.vue ! =null
      },
      options: {
         // Cache storage path
         // sub-vue\node_modules\.cache\vue-loader
        cacheDirectory: vueLoaderUse.options.cacheDirectory,
      }
    }

    // Replace rules with ruleset rules
    compiler.options.module.rules = [
      pitcher,
      ...clonedRules,
      ...rules
    ]
  }
Copy the code

VueLoader

After configuring the plug-in, NPM run build enters the buildModule phase of Webpack, where loaderRunner is used to parse the source file.

Both of the following requests go through vue-loader with or without resourceQuery

import App from './App.vue
import * from "./App.vue? vue&type=template&id=1511d40d&

import App from './App.vue

parsingresourceQueryQuery (); query (){}
throughvue-template-compilertheparseComponentthe.vueThe SFC is resolved into three chunksTemplate, script, style.scriptAlso generatesmappingPass to the later loader, which is used hereLRUCache algorithm, because the same source file will continue to be called laterparseMethod that requires caching to prevent performance waste while still usinghash-sumThe module calculates the unique value corresponding to the source filecacheKeyIf the source file is modified, the cache is automatically invalidated.

// sub-vue\node_modules\@vue\component-compiler-utils\dist\parse.js
const cache = new (require('lru-cache'(a))100);
function parse(options) {
    / /... ignore
    // Cache the compiled results
    const cacheKey = hash(filename + source + JSON.stringify(compilerParseOptions));
    let output = cache.get(cacheKey);
    if (output)
        return output;
    output = compiler.parseComponent(source, compilerParseOptions);
Copy the code

becauseresourceQueryEmpty won’t go here logic

  // sub-vue\node_modules\vue-loader\lib\index.js
  // if the query has a type field, this is a language block request
  // e.g. foo.vue? type=template&id=xxxxx
  // and we will return early
  if (incomingQuery.type) {
    returnselectBlock( descriptor, loaderContext, incomingQuery, !! options.appendExtension ) }Copy the code

To calculatecss-scoped idforcssIsolation, id is similardata-v-039c5b43In the039c5b43

// sub-vue\node_modules\vue-loader\lib\index.js
  const id = hash(
    isProduction
      ? (shortFilePath + '\n' + source.replace(/\r\n/g.'\n'))
      : shortFilePath
  )
Copy the code

Assemble the string to be returned this time, and convert template, script, and style to the request with parameters, mainly plus? vue&type=template&id=1511d40d&suchresourceQuery. If you are in development mode, you will wear itvue-loaderImplement the module hot replacement interface itself, along with a runtime sectionnormalize componentThe function is used to format the values exposed by the component.

Request at this timeimport App from './App.vue.vue-loaderThe returned JSON string looks like this. It breaks down one request into three requests and passestype=Distinguish between

import * from "./App.vue? vue&type=template&id=1511d40d&

This module request is still resolved by vue-loader, but in a different order. The above request has a global pitcher-loader registered by vUE. This is a special loader. Normal loaders are executed in reverse order. But if there is a pitcher-loader order that changes, here are the differences

Suppose you configure a rule to handle CSS as follows

{
    test: /\.css$/,
    use: [normalLoader1, normalLoader2, normalLoader3, normalLoader4]
}
Copy the code

So it’s a sequential execution in reverse order

If you encounter pitcher-loader

{
    test: /\.css$/,
    use: [normalLoader1, pitcherLoader, normalLoader3, normalLoader4]
}
Copy the code

NormalLoader3, normalLoader4, normalLoader4, normalLoader3, normalLoader4 And then normalLoader1. LoaderRunner sub-vue\node_modules\loader-runner\lib\LoaderRunner. Generally, there is no normalLoader after pitcher-loader. The common pticher-loader is the style-loader used in development mode, which inserts CSS into the head using the style tag.

import * from “./App.vue? The following things happen when vue&type= template&ID = 1511d40D&

The pitcher-loader is processed first, and the pitcher-loader is processed as follows

Filter loader to remove eslint-loader and itself
If type is template, the logical part of the template will be matched, the request will be reserialized, and the cache-loader and templateLoader will be converted into three inline-loaders

-! . /node_modules/cache-loader/dist/cjs.js? {\ \"cacheDirectory\\": \ \"node_modules/.cache/vue-loader\\", \ \"cacheIdentifier\\": \ \"7e12f88b-vue-loader-template\\"}! . /node_modules/vue-loader/lib/loaders/templateLoader.js?? vue-loader-options! . /node_modules/cache-loader/dist/cjs.js?? ref-00! . /node_modules/vue-loader/lib/index.js?? vue-loader-options! ./App.vue? vue&type=template&id=1511d40d&
Copy the code

Template processing flow in Vue:

Among them. ,! ,!!!!! Refer to wepack-inline-loader for symbol meaning

To the template tag element`_scoped`

The transformed in-line request is returned firstvue-loaderProcessing, we’ve calculated it beforedescriptorAs a result, the cache returns directly.

So if YOU go into the selectBlock, the slectBlock will handle each type,loaderContext.callbackYou can knowvue-loaderIs an asynchronous loader,templateLoaderIt waits for it to complete.

template-loaderWill receivevue-loaderAs a result, his role is
- vue-template-compilerafterParser, Optimization, generateThe phase will returnrenderFunctions, and static nodesstaticRender

You may notice that scopedId is also passed to compiler. If the render function is generated with data-V-1511d40D, it is not. Compiler adds {attrs: {‘ data-V-1511d40d ‘}} instead of the render function for the size of the package, but adds the patch phase of the _scopedId runtime.

Back to the normalize component above, when the code browser runs, it will see that $options has a _scopedId, which will be set dynamically on the first patch.

Since then we’ve known what’s on the label_scopedWhere does id come from, and how do CSS property selectors come from?

Add the CSS styles`_scopedId`

SRC \\ app.vue? SRC \\ app.vue? SRC \\ app.vue? Vue&type =style&index=0&lang= CSS & converts the request to an inline request, as follows

"-! . /node_modules/mini-css-extract-plugin/dist/loader.js?? ref--6-oneOf-1-0! . /node_modules/css-loader/dist/cjs.js?? ref--6-oneOf-1-1 ! . /node_modules/vue-loader/lib/loaders/stylePostLoader.js ! . /node_modules/postcss-loader/src/index.js?? ref--6-oneOf-1-2 ! . /node_modules/cache-loader/dist/cjs.js?? ref--0-0 ! . /node_modules/vue-loader/lib/index.js?? vue-loader-options! ./App.vue? vue&type=style&index=0&lang=css"Copy the code

npm run buildMode, style will pass through 5 loaders. 再vue-loaderWhen processed, it simply returns the cache as it did with the Template process. while_scpoedIdIs in thestyle-post-loaderIt was added during processing

// sub-vue\node_modules\vue-loader\lib\loaders\stylePostLoader.js
const qs = require('querystring')
const { compileStyle } = require('@vue/component-compiler-utils')

// This is a post-loader to convert CSS to csS-scoped
module.exports = function (source, inMap) {
  const query = qs.parse(this.resourceQuery.slice(1))
  // Reassemble the CSS using the postCSS parser
  const { code, map, errors } = compileStyle({
    source,
    filename: this.resourcePath,
    id: `data-v-${query.id}`.map: inMap,
    scoped:!!!!! query.scoped,trim: true})}Copy the code

The method compileStyle returns new CSS using the PostCSS capability. Postcss is similar to Babel-Loader in that it handles CSS syntax such as variables and browser prefixes. It can also parse CSS into CSS-AST, edit different node types through the plug-in mechanism, and regenerate new CSS through generate. Vue uses a custom postCSS-plugin to add _scopedId and /deep/ capabilities to CSS

A postCSS-plugin plugin looks like this

module.exports = (opts = {}) = > {
  return {
    postcssPlugin: 'Plug-in name',
    prepare (result) {
      // We can put some common logic here
      return {
        Declaration (node) {},
        Rule (node) {},
        AtRule (node) {}
      }
    }
  }
}

Copy the code

CSS AST is much simpler than JS. There are several main types:

The @ symbol style begins, such as @meida, media queries
Rule is the name of the CSS class
Dec is the concrete stylepadding: 5pxThis kind of

Just write a plugin, iterate over these types, modify CSS-AST, and add _scopedId. See the implementation of \node_modules\@vue\component-compiler-utils\lib\stylePlugins\scoped.ts for details.

At this point CSS style isolation is implemented. Jingdong recently looked at the set of micro front-end implementation, its CSS isolation is similar, but does not rely on postCSS, their own self-service cssParser, replaced by regular violence.

conclusion

Since vue-loader is strongly related to Webpack, it is necessary to know some knowledge of the Webpack process, otherwise it is really difficult to learn. By the way, have you made the Vite yet?

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

How is Vue’s style isolation implemented?

Vue-loader source code process analysis

Check the configuration

VueLoaderPlugin

VueLoader

To the template tag element`_scoped`

Add the CSS styles`_scopedId`

conclusion

How is Vue’s style isolation implemented?

Vue-loader source code process analysis

Check the configuration

VueLoaderPlugin

VueLoader

To the template tag element_scoped

Add the CSS styles_scopedId

conclusion

Related Posts

Build your React UI component library: Build the first page

Develop a Webpack from scratch

Es6 – Quickly master Proxy and Reflect

To the template tag element`_scoped`

Add the CSS styles`_scopedId`