Although I have been writing Vue for a long time and have a general understanding of the principles of CSS Scoped, I have never paid attention to its implementation details. I'm re-learning webpack recently, so I checked the vue-loader source code and sorted out the implementation of CSS Scoped from the vue-loader source code.
This article shows some source code fragments in vue-loader, which are slightly deleted for easy understanding. refer to
Vue CSS SCOPED Implementation Principle
Vue loader official documentation
Related concepts
The implementation principle of CSS Scoped
In the Vue single file component, we only need to add scoped attribute to the style tag to realize that the style in the tag takes effect on the HTML tag output in the current template. The implementation principle is as follows
- Each Vue file will correspond to a unique id, which can be generated based on the file path name and content hash.
- The template tag is compiled and the current component id is added to each tag at all times. For example, <div class="demo"></div> will be compiled into <div class="demo" data-v-27e4e96e></div>
- When compiling the style tag, the style will be output through the attribute selector and combination selector according to the id of the current component. For example, .demo{color: red;} will be compiled into .demo[data-v-27e4e96e]{color: red;}
After understanding the general principle, you can think that css scoped should need to process the content of template and style at the same time. Now, we summarize the problems that need to be explored.
- How is the data-v-xxx attribute generated on the rendered HTML tag
- How is the added property selector implemented in CSS code
resourceQuery
Before this, you need to know the first webpackThe role of When configuring loader, most of the time we only need to match the file type through test
{
test: /\.vue$/,
loader: 'vue-loader'
}
// When introducing a vue suffix file, transfer the file content to vue-loader for processingimport Foo from './'
resourceQuery provides matching paths according to the form of imported file path parameters
{
resourceQuery: /shymean=true/,
loader: (__dirname, './')
}
// When the file path is introduced, the loader will also be loadedimport './?shymean=true'
import Foo from './?shymean=true'
In vue-loader, resourceQuery and splicing different query parameters, allocating each tag to the corresponding loader for processing.
refer to
Official pitching-loader documentation
webpack's pitching loader
The execution order of loaders in webpack is executed from right to left, such as loaders:[a, b, c], the execution order of loaders is c->b->a, and the next loader receives the return value of the previous loader. This process is very similar to "event bubble".
But in some scenarios, we may want to execute some methods of loader in the "capture" phase, so the interface provided by webpack.
The real execution process of a file being processed by multiple loaders, as shown below
-> -> -> request module -> c -> b -> a
The interface definition of loader and pitch is roughly as follows
// The real interface exported by the loader file, the content is the original content of the previous loader or file = function loader(content){
// You can access the data mounted on the pitch to data () // 100
}
// remainingRequest represents the remaining request, precedingRequest represents the previous request// data is a context object, which can be accessed in the loader method above, so some data can be mounted in advance during the pitch phase. = function pitch(remainingRequest, precedingRequest, data) {
= 100
}}
Under normal circumstances, a loader will return the processed file text content during the execution stage. If the content is returned directly in the pitch method, webpack will be considered that the subsequent loader has been executed (including the pitch and execution stages).
In the above example, if result b is returned, c is no longer executed, and result b is directly passed to a.
VueLoaderPlugin
Next, let’s take a look at the plug-in that matches vue-loader: VueLoaderPlugin. The function of this plug-in is:
Copy and apply other rules defined in the .vue file to the blocks in the corresponding language.
The general workflow is as follows
- Get the rules item configured in the project webpack, and then copy the rules. The same loader is configured for the file that contains the ?vue&lang=xx...query parameter.
- Configure a public loader for Vue files: pitcher
- Use [pitchLoder, ...clonedRules, ...rules] as new rules for wewebapck
// vue-loader/lib/
const rawRules = // Original rules configuration informationconst { rules } = new RuleSet(rawRules)
// cloneRule will modify the resource and resourceQuery configurations of the original rule. The file path carrying a special query will be applied to the corresponding rule.const clonedRules = rules
.filter(r => r !== vueRule)
.map(cloneRule)
// Vue file public loaderconst pitcher = {
loader: ('./loaders/pitcher'),
resourceQuery: query => {
const parsed = ((1))
return != null
},
options: {
cacheDirectory: ,
cacheIdentifier:
}
}
// Update the rules configuration of webpack, so that each tag in the vue single file can apply clonedRules-related configuration = [
pitcher,
...clonedRules,
...rules
]
Therefore, the lang attributes executed for each tag in the vue single file component can also be applied to the webpack with the same suffix. This design ensures that each tag is configured with an independent loader without intruding into the vue-loader, such as
- You can write a template using pug and then configure pug-plain-loader
- You can use scss or less to write style and then configure the related preprocessor loader
It can be seen that there are two main things that VueLoaderPlugin do, one is to register a public pitcher, and the other is to copy webpack rules.
vue-loader
Next, let's take a look at what vue-loader does.
pitcher
As mentioned earlier, in VueLoaderPlugin, the loader will process the loader of the corresponding tag according to the injection in the pitch.
- When type is style, insert the stylePostLoader after css-loader to ensure that the stylePostLoader is executed first in the execution stage
- When type is template, insert templateLoader
//
= code => code
= function (remainingRequest) {
if ( === `style`) {
// will query cssLoaderIndex and put it in afterLoaders // The loader is executed from back to forward in the execution stage const request = genRequest([
...afterLoaders,
stylePostLoaderPath, // Execute lib/loaders/ ...beforeLoaders
])
return `import mod from ${request}; export default mod; export * from ${request}`
}
// Processing templates if ( === `template`) {
const preLoaders = (isPreLoader)
const postLoaders = (isPostLoader)
const request = genRequest([
...cacheLoader,
...postLoaders,
templateLoaderPath + `??vue-loader-options`, // Execute lib/loaders/ ...preLoaders
])
return `export * from ${request}`
}
// ...
}
Since it will be executed in the capture stage before the loader, the above preparation is mainly carried out: check and directly call the relevant loader
- type=style, execute stylePostLoader
- type=template, execute templateLoader
We will study the specific functions of these two loaders later.
vueLoader
Next, take a look at the work done in vue-loader, when introducing a file
// vue-loader/lib/ The following source is the original content of the Vue code file
// parse the content of a single *.vue file into a descriptor object, also known as SFC (Single-File Components) object// Descriptor contains the attributes and contents of tags such as template, script, style, etc., which facilitates the corresponding processing of each tag.const descriptor = parse({
source,
compiler: || loadTemplateCompiler(loaderContext),
filename,
sourceRoot,
needMap: sourceMap
})
// Generate a unique hash id for a single file componentconst id = hash(
isProduction
? (shortFilePath + '\n' + source)
: shortFilePath
)
// If a style tag contains scoped attribute, CSS Scoped processing is required, which is also the place that needs to be studied in this chapterconst hasScoped = (s => )
Process template tags, splicing type=template and other query parameters
if () {
const src = || resourcePath
const idQuery = `&id=${id}`
// Pass in file id and scoped=true. These two parameters are required when passing in component id for each HTML tag of the component const scopedQuery = hasScoped ? `&scoped=true` : ``
const attrsQuery = attrsToQuery()
const query = `?vue&type=template${idQuery}${scopedQuery}${attrsQuery}${inheritQuery}`
const request = templateRequest = stringifyRequest(src + query)
// The file with type=template will be passed to the templateLoader for processing templateImport = `import { render, staticRenderFns } from ${request}`
// For example, the <template lang="pug"></template> tag // Will be parsed into import { render, staticRenderFns } from "./?vue&type=template&id=27e4e96e&lang=pug&"}
Handle script tags
let scriptImport = `var script = {}`
if () {
// vue-loader has not done too much processing on script // For example, the <script></script> tag in the vue file will be parsed into // import script from "./?vue&type=script&lang=js&"
// export * from "./?vue&type=script&lang=js&"
}
Process style tags, splicing parameters such as type=style for each tag
// In genStylesCode, css scoped and css module will be processedstylesCode = genStylesCode(
loaderContext,
,
id,
resourcePath,
stringifyRequest,
needsHotReload,
isServer || isShadow // needs explicit injection?
)
// Since there may be multiple style tags in a vue file, for each tag, genStyleRequest will be called to generate the dependencies of the corresponding file.function genStyleRequest (style, i) {
const src = || resourcePath
const attrsQuery = attrsToQuery(, 'css')
const inheritQuery = `&${(1)}`
const idQuery = ? `&id=${id}` : ``
// type=style will be passed to stylePostLoader for processing const query = `?vue&type=style&index=${i}${idQuery}${attrsQuery}${inheritQuery}`
return stringifyRequest(src + query)
}
It can be seen that in vue-loader, the entire file is mainly spliced into the corresponding query path according to the tag, and then handed over to webpack to call the relevant loader in order.
templateLoader
Go back to the first question mentioned at the beginning: How is the hash attribute generated in each rendered HTML tag in the current component?
We know that the VNode returned by a component's render method describes the HTML tag and structure corresponding to the component. The DOM node corresponding to the HTML tag is built from the virtual DOM node, and a Vnode contains the basic properties required to render the DOM node.
Then, we only need to understand the hash id assignment process of component files on vnode, and the subsequent problems will be solved.
//
const { compileTemplate } = require('@vue/component-compiler-utils')
= function (source) {
const { id } = query
const options = (loaderContext) || {}
const compiler = || require('vue-template-compiler')
// You can see that the template file with scopre=true will generate a scopeId const compilerOptions = ({
outputSourceRange: true
}, , {
scopeId: ? `data-v-${id}` : null,
comments:
})
// Merge the final parameters of compileTemplate and pass in compilerOptions and compiler const finalOptions = {source, filename: , compiler,compilerOptions}
const compiled = compileTemplate(finalOptions)
const { code } = compiled
// finish with ESM exports
return code + `\nexport { render, staticRenderFns }`
}
Regarding the implementation of compileTemplate, we don't have to care about its details. Its internal main call is the compiler method with the configuration parameter compiler.
function actuallyCompile(options) {
const compile = optimizeSSR && ? :
const { render, staticRenderFns, tips, errors } = compile(source, finalCompilerOptions);
// ...
}
In the Vue source code, we can learn that the template attribute will be compiled into the render method through compileToFunctions; in vue-loader, this step can be processed in advance in the packaging stage through vue-template-compiler.
vue-template-compiler is a package released with the Vue source code. When both are used at the same time, they need to ensure that their version numbers are the same, otherwise an error will be prompted. In this way, it is actually the baseCompile method of vue/src/compiler/ in the Vue source code. If you follow the source code and flip it down consistently, you can find that
//
// For the properties of a single tag, split into segmentsfunction elementToOpenTagSegments (el, state): Array<StringSegment> {
applyModelTransform(el, state)
let binding
const segments = [{ type: RAW, value: `<${}` }]
// ... Handle attributes such as attrs, domProps, v-bind, style, etc.
// _scopedId
if () {
({ type: RAW, value: ` ${}` })
}
({ type: RAW, value: `>` })
return segments
}
As an example, the segments obtained by parsing are
[
{ type: RAW, value: '<div' },
{ type: RAW, value: 'class=demo' },
{ type: RAW, value: 'data-v-27e4e96e' }, // Incoming scopeId { type: RAW, value: '>' },
]
At this point, we know that in templateLoader, a scopeId will be spliced according to the id of the single file component, and passed it into the compiler as compilerOptions, parsed into the configuration attribute of vnode, and then called createElement when the render function is executed, as the original attribute of vnode, and rendered onto the DOM node.
stylePostLoader
In stylePostLoader, the work needs to be done is to add a combination limit for attribute selectors to all selectors.
const { compileStyle } = require('@vue/component-compiler-utils')
= function (source, inMap) {
const query = ((1))
const { code, map, errors } = compileStyle({
source,
filename: ,
id: `data-v-${}`, // The style in the same single page component is consistent with the scopeId in the templateLoader map: inMap,
scoped: !!,
trim: true
})
(null, code, map)
}
We need to understand the logic of compileStyle
// @vue/component-compiler-utils/
import scopedPlugin from './stylePlugins/scoped'
function doCompileStyle(options) {
const { filename, id, scoped = true, trim = true, preprocessLang, postcssOptions, postcssPlugins } = options;
if (scoped) {
(scopedPlugin(id));
}
const postCSSOptions = ({}, postcssOptions, { to: filename, from: filename });
// Relevant judgments have been omitted let result = postcss(plugins).process(source, postCSSOptions);
}
Finally, let's understand the implementation of scopedPlugin.
export default ('add-id', (options: any) => (root: Root) => {
const id: string = options
const keyframes = (null)
(function rewriteSelector(node: any) {
= selectorParser((selectors: any) => {
((selector: any) => {
let node: any = null
// When handling special selectors such as '>>>' , '/deep/', ::v-deep, pseudo, etc., the logic below to add attribute selector will not be executed
// Add an attribute selector [id] to the current selector, and the id is the scopeId passed (
node,
({
attribute: id
})
)
})
}).processSync()
})
})
Since I am not very familiar with PostCSS plug-in development, I can only sort it out here and read the documentation. Please refer to the relevant APIsWriting a PostCSS Plugin。
At this point, we know the answer to the second question: by adding an attribute selector to each selector under the current styles, its value is the incoming scopeId. Since only the same attributes exist on the DOM node rendered by 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 webpack configuration
- In the plugin, the rules item in the current project webpack configuration will be copied. When the resource path is included, the same rules are matched through resourceQuery and the corresponding loader is executed.
- Insert a common loader and insert the corresponding custom loader in the pitch stage according to the insertion
After the preparation work is completed, vue-loader will be called when *.vue is loaded.
- A single page component file will be parsed into a descriptor object, including template, script, styles and other attributes corresponding to each tag.
- For each tag, the src?vue&query reference code will be spliced according to the tag attributes. src is the single page component path, and query is the parameter of some characteristics. The more important ones are lang, type and scoped.
- If the lang attribute is included, the same rules as the suffix will be matched and the corresponding loaders will be applied
- Execute the corresponding custom loader according to the type, template will execute templateLoader, style will execute stylePostLoader, and style
In templateLoader, the template will be converted into the render function through vue-template-compiler. In this process,
- The scopeId will be appended to the segments of each tag, and finally passed to the createElemenet method as the configuration property of vnode.
- When the render function calls and renders the page, the scopeId attribute is rendered as the original attribute to the page
In stylePostLoader, parse the style tag content through PostCSS, and append a [scopeId] attribute selector to each selector through scopedPlugin.
Since Vue source code support is required (vue-template-compiler compiler), CSS Scoped can be regarded as a solution for handling native CSS global scopes by Vue. In addition to css scoped, vue also supports css module. I plan to compare and organize it in the next blog that compiles CSS in React.
summary
I have been writing React projects recently and have tried several ways to write CSS in React, including CSS Module, Style Component, etc., which feels quite cumbersome. In comparison, writing CSS in single page components in Vue is much more convenient.
This article mainly analyzes Vue-loader from the source code level, sorts out its working principle, and feels that it has gained a lot.
- Use of webpack and pitch loader
- The implementation principle of css scoped in Vue single page file
- The role of PostCSS plugin
Although I have been using webpack and PostCSS, it is limited to the stage where I can barely use it. For example, I have never even had the idea of writing a PostCSS plugin. Although most projects currently use encapsulated scaffolding, it is still necessary to understand the implementation of these basic knowledge.
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.