Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "what is the principle of the implementation of CSS Scoped", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "what is the principle of the implementation of CSS Scoped" can help you solve your doubts.

The realization principle of CSS Scoped

In the Vue single file component, we only need to add the scoped attribute to the style tag to realize that the style in the tag takes effect on the HTML tag output from the current template. The implementation principle is as follows

Each Vue file will correspond to a unique id that can be generated based on the file path name and content hash

When compiling template tags, the id of the current component is added to each tag, such as being compiled into

When compiling style tags, styles are output through the property selector and combination selector according to the id of the current component. For example, .demo {color: red;} is compiled into .demo [data-v-27e4e96e] {color: red;}.

After understanding the general principle, we can think that css scoped should need to deal with the contents of template and style at the same time. Now we summarize the problems that need to be explored.

How the data-v-xxx attribute on the rendered HTML tag is generated

How the added property selector in CSS code is implemented

ResourceQuery

Before you do that, you need to understand the role of Rules.resourceQuery in webpack for the first time. When configuring loader, most of the time we just need to match the file type through test

{test: /\ .vue $/, loader: 'vue-loader'} / / when introducing vue suffix files, transfer the contents of the files to vue-loader for processing import Foo from'. / source.vue'

ResourceQuery provides matching paths according to the form of the introduced file path parameters

{resourceQuery: / shymean=true/, loader: path.resolve (_ _ dirname,'. / test-loader.js')} / / when the imported file path carries a query parameter match, the loaderimport'. / test.js?shymean=true'import Foo from'. / source.vue?shymean=true' will also be loaded.

In vue-loader, through resourceQuery and splicing different query parameters, each tag is assigned to the corresponding loader for processing.

Loader.pitch

Referenc

Pitching-loader official documentation

Pitching loader of webpack

The execution order of loaders in webpack is from right to left, such as loaders: [a, b, c], the execution order of loader is c-> b-> a, and the next loader receives the return value of the previous loader, which is very similar to "event bubbling".

But in some scenarios, we may want to execute some of the methods of loader during the capture phase, so webpack provides an interface to loader.pitch.

The actual execution process in which a file is processed by multiple loader, as shown below

A.pitch-> b.pitch-> c.pitch-> request module-> c-> b-> a

The interface definitions for loader and pitch are roughly as follows

/ / the real interface for exporting the loader file. Content is the original content of the previous loader or file module.exports = function loader (content) {/ / can access the data console.log (this.data.value) / / 100} / / remainingRequest mounted on the data in pitch. PrecedingRequest indicates that the previous request / / data is a context object, which can be accessed through this.data in the above loader method. Therefore, some data module.exports.pitch = function pitch (remainingRequest, precedingRequest, data) {data.value = 100} can be mounted in advance during the pitch phase.

Normally, a loader returns the processed text content of the file during the execution phase. If the content is returned directly in the pitch method, the webpack is considered to have finished executing the subsequent loader (including the pitch and execution phases).

In the above example, if b.pitch returns result b and c is no longer executed, result b is passed directly to a.

VueLoaderPlugin

Next, let's take a look at the plug-in that comes with vue-loader: VueLoaderPlugin, which serves the following purposes:

Other rules defined in webpack.config are copied and applied to blocks in the corresponding language in the .vue file.

The general workflow is as follows

Get the rules entry of the project webpack configuration, and then copy the rules to configure the xx suffix file with the same loader for the file dependency that carries the? vue&lang=xx...query parameter

Configure a public loader:pitcher for the Vue file

Take [pitchLoder,... clonedRules,... rules] as webapck's new rules.

/ / vue-loader/lib/plugin.jsconst rawRules = compiler.options.module.rules / / original rules configuration information const {rules} = new RuleSet (rawRules) / / cloneRule modifies the resource and resourceQuery configuration of the original rule The file path with a special query will be applied to the public loaderconst pitcher = {loader: require.resolve ('. / loaders/pitcher'), resourceQuery: query = > {const parsed = qs.parse (query.slice (1)) return parsed.vue! = null}, options: {cacheDirectory: vueLoaderUse.options.cacheDirectory, cacheIdentifier: vueLoaderUse.options.cacheIdentifier} / / update webpack's rules configuration corresponding to ruleconst clonedRules = filter (r = > r! = vueRule) .map (filter) / / vue file In this way, each tag in the vue single file can apply the clonedRules-related configuration compiler.options.module.rules = [pitcher,... clonedRules,... rules]

Therefore, the lang attribute executed for each tag in the vue single file component can also be applied to rule with the same suffix configured in webpack. This design ensures that each tag is configured with a separate loader without intruding into the vue-loader, such as

You can use pug to write template, and then configure pug-plain-loader

You can write style using scss or less, and then configure the relevant preprocessor loader

It can be seen that there are two main things to do in VueLoaderPlugin, one is to register the public pitcher, and the other is to copy the rules of webpack.

Vue-loader

Let's take a look at what vue-loader does.

Pitcher

As mentioned earlier, in VueLoaderPlugin, the loader processes the loader of the corresponding tag according to query.type injection in pitch.

When type is style, insert stylePostLoader after css-loader to ensure that stylePostLoader is executed first in the execution phase

Insert templateLoader when type is template

/ / pitcher.jsmodule.exports = code = > codemodule.exports.pitch = function (remainingRequest) {if (query.type = `style`) {/ / query cssLoaderIndex and put it in afterLoaders / / loader const request = genRequest ([... afterLoaders, stylePostLoaderPath, / / execute lib/loaders/stylePostLoader.js... beforeLoaders]) return `import mod from ${request}; export default mod in the execution phase Export * from ${request} `} / / processing template if (query.type = `template`) {const preLoaders = loaders.filter (isPreLoader) const postLoaders = loaders.filter (isPostLoader) const request = genRequest ([. CacheLoader,... postLoaders, templateLoaderPath +`? vue-loader- options`, / / execute lib/loaders/templateLoader.js. PreLoaders]) return `export * from ${request} `} / /.}

Since loader.pitch precedes loader and is executed during the capture phase, the above preparation is mainly done: check the query.type and call the relevant loader directly

Type=style, execute stylePostLoader

Type=template, execute templateLoader

We will study the specific functions of these two loader later.

VueLoader

Let's take a look at the work done in vue-loader, when introducing a x.vue file

/ / source under vue-loader/lib/index.js is the original content of the Vue code file / / parse the contents of a single * .vue file into a descriptor object, also known as SFC (Single-File Components) object / / descriptor contains the attributes and contents of template, script, style and other tags It is convenient to correspond to each tag const descriptor = parse ({source, compiler: options.compiler | | loadTemplateCompiler (loaderContext), filename, sourceRoot, needMap: sourceMap}) / / generate a unique hash idconst id = hash (isProduction? (shortFilePath +'\ n' + source): shortFilePath) / / if a style tag contains a scoped attribute, it needs to be processed by CSS Scoped, which is what this chapter needs to study: const hasScoped = descriptor.styles.some (s = > s.scoped)

Handle query parameters such as template tags, stitching type=template, etc.

If (descriptor.template) {const src = descriptor.template.src | | resourcePath const idQuery = `& id=$ {id}` / / incoming files id and scoped=true These two parameters const scopedQuery = hasScoped? `& scoped= true`: ``const attrsQuery = attrsToQuery (descriptor.template.attrs) const query =`? vue&type=template$ {idQuery} ${scopedQuery} ${attrsQuery} ${inheritQuery} `const request = templateRequest = stringifyRequest (src + query) / / type=template are required when passing in the component's id for each component tag. The file will be passed to templateLoader processing templateImport = `import {render, staticRenderFns} from ${request}` / / The tag / / will be parsed as import {render, staticRenderFns} from ". / source.vue?vue&type=template&id=27e4e96e&lang=pug&"}

Working with script tags

Let scriptImport = `var script = {} `if (descriptor.script) {/ / vue-loader does not do too much processing to script / / for example, the tags in the vue file will be parsed into / / import script from ". / source.vue?vue&type=script&lang=js&" / / export * from ". / source.vue?vue&type=script&lang=js&"}

Processing style tags, splicing parameters such as type=style for each tag

/ / in genStylesCode, css scoped and css moudlestylesCode = genStylesCode (loaderContext, descriptor.styles, id, resourcePath, stringifyRequest, needsHotReload, isServer | | isShadow / / needs explicit injection?) / / because there may be multiple style tags in a vue file, for each tag GenStyleRequest will be called to generate dependent function genStyleRequest (style, I) {const src = style.src | | resourcePath const attrsQuery = attrsToQuery (style.attrs, 'css') const inheritQuery = `& ${loaderContext.resourceQuery.slice (1)} `const idQuery = style.scoped?` & id=$ {id} `: ``/ / type=style will be passed to stylePostLoader for processing const query =`? vue&type=style&index=$ {I} ${attrsQuery} ${inheritQuery} `return stringifyRequest (src + query)}

It can be seen that in vue-loader, the main thing is to splice the whole file into the corresponding query path according to the label, and then give it to webpack to call the relevant loader in order.

TemplateLoader

Back to the first question mentioned at the beginning: how the hash attribute in each HTML tag rendered in the current component is generated.

We know that the VNode returned by the render method of a component describes the corresponding HTML tag and structure of the component, the DOM node corresponding to the HTML tag is built from the virtual DOM node, and a Vnode contains the basic attributes required by the rendering DOM node.

Then, we only need to know the process of assigning the hash id of the component file on vnode, and the later problem is solved.

/ / templateLoader.jsconst {compileTemplate} = require ('@ vue/component-compiler-utils') module.exports = function (source) {const {id} = query const options = loaderUtils.getOptions (loaderContext) | | {} const compiler = options.compiler | | require ('vue-template-compiler') / / can be seen The template file of scopre=true generates a scopeId const compilerOptions = Object.assign ({outputSourceRange: true}, options.compilerOptions, {scopeId: query.scoped? `data-v-$ {id} `: null, comments: query.comments}) / / merging compileTemplate final parameters, passing compilerOptions and compiler const finalOptions = {source, filename: this.resourcePath, compiler,compilerOptions} const compiled = compileTemplate (finalOptions) const {code} = compiled / / finish with ESM exports return code +`\ nexport {render, staticRenderFns} `}

With regard to the implementation of compileTemplate, we do not need to care about the details, but mainly call the compilation method of the configuration parameter compiler.

Function actuallyCompile (options) {const compile = optimizeSSR & & compiler.ssrCompile? Compiler.ssrCompile: compiler.compile const {render, staticRenderFns, tips, errors} = compile (source, finalCompilerOptions); / /...}

As you can see in the Vue source code, the template property is compiled into render methods through compileToFunctions; in vue-loader, this step can be handled in advance during the packaging phase through vue-template-compiler.

Vue-template-compiler is a package released with the Vue source code. When both are used at the same time, you need to make sure that their version numbers are the same, otherwise an error will be prompted. In this way, compiler.compile is actually the baseCompile method of vue/src/compiler/index.js in the Vue source code. If you follow the source code down, you can find that

/ / elementToOpenTagSegments.js// for attributes of a single tag, it will be split into a segmentsfunction elementToOpenTagSegments (el, state): Array {applyModelTransform (el, state) let binding const segments = [{type: RAW, value: ``}) return segments}

Taking the previous example, the parsed segments is

[{type: RAW, value:''},]

So far, we know that in templateLoader, according to the id of a single file component, a scopeId is spliced and passed into the compiler as compilerOptions, which is parsed into the configuration attribute of vnode, and then createElement is called when the render function is executed, which is rendered to the DOM node as the original attribute of vnode.

StylePostLoader

In stylePostLoader, what needs to be done is to add a combination limit of property selectors to all selectors

Const {compileStyle} = require ('@ vue/component-compiler-utils') module.exports = function (source, inMap) {const query = qs.parse (this.resourceQuery.slice (1)) const {code, map, errors} = compileStyle ({source, filename: this.resourcePath, id: `data-v-$ {query.id} `, / / style in the same single-page component Consistent with scopeId in templateLoader map: inMap, scoped:! query.scoped, trim: true}) this.callback (null, code, map)}

We need to understand the logic of compileStyle.

/ / @ vue/component-compiler-utils/compileStyle.tsimport scopedPlugin from'. / stylePlugins/scoped'function doCompileStyle (options) {const {filename, id, scoped = true, trim = true, preprocessLang, postcssOptions, postcssPlugins} = options; if (scoped) {plugins.push (scopedPlugin (id));} const postCSSOptions = Object.assign ({}, postcssOptions, {to: filename, from: filename}); / / omits the relevant judgment let result = postcss (plugins) .process (source, postCSSOptions);}

Finally, let's take a look at the implementation of scopedPlugin

Export default postcss.plugin ('add-id', (options: any) = > (root: Root) = > {const id: string = options const keyframes = Object.create (null) root.each (function rewriteSelector (node: any) {node.selector = selectorParser ((selectors: any) = > {selectors.each ((selector: any) = > {let node: any = null / / processing' > >','/ deep/',: v-deep, pseudo and other special selectors The following logic for adding a property selector will not be executed / / add a property selector to the current selector [id], id is the incoming scopeId selector.insertAfter (node, selectorParser.attribute ({attribute: id}) .processSync (node.selector)})})

As I am not very familiar with the plug-in development of PostCSS, I can only sort it out and flip through the documentation. For relevant API, please refer to Writing a PostCSS Plugin.

At this point, we know the answer to the second question: add a property selector to each selector under the current styles through selector.insertAfter, whose value is the incoming scopeId. Because the same attributes exist on the DOM nodes rendered by only the current component, the effect of css scoped is achieved.

Summary

Go back and sort out the workflow of vue-loader.

First, you need to register VueLoaderPlugin in the webpack configuration

In the plug-in, the rules entry in the current project webpack configuration is copied. When the resource path contains query.lang, the same rules is matched by resourceQuery and the corresponding loader is executed.

Insert a public loader and insert the corresponding custom loader according to the query.type in the pitch phase

After the preparation is completed, vue-loader will be called when * .vue is loaded

A single-page component file will be parsed into a descriptor object containing template, script, styles and other attributes corresponding to each tag.

For each tag, the src?vue&query reference code is spliced according to the tag attribute, where src is the single page component path, query is the parameter of some features, and the more important ones are lang, type and scoped.

If the lang attribute is included, the same rules as the suffix is matched and the corresponding loaders is applied

Executing the corresponding custom loader,template according to type will execute templateLoader, and style will execute stylePostLoader

In templateLoader, template is converted to a render function through vue-template-compiler, and in the process

The incoming scopeId is appended to the segments of each tag, and finally passed to the createElemenet method as a configuration property of vnode

When the render function calls and renders the page, the scopeId attribute is rendered to the page as the original attribute

In stylePostLoader, parse the style tag content through PostCSS, and append a [scopeId] attribute selector to each selector through scopedPlugin.

Because of the need for support for Vue source code (vue-template-compiler compiler), CSS Scoped can be counted as a solution customized for Vue to handle the native CSS global scope. In addition to css scoped, vue also supports css module, which I plan to compare in my next blog post about CSS in React.

After reading this, the article "what is the implementation principle of CSS Scoped" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.