npm i -D unplugin-vue-css-checker
import CSSChecker from 'unplugin-vue-css-checker/vite'
export default defineConfig({
plugins: [
CSSChecker({ /* options */ }),
],
})
import CSSChecker from 'unplugin-vue-css-checker/rollup'
export default {
plugins: [
CSSChecker({ /* options */ }),
],
}
module.exports = {
plugins: [
require('unplugin-vue-css-checker/webpack')({ /* options */ }),
],
}
// vue.config.js
module.exports = {
configureWebpack: {
plugins: [
require('unplugin-vue-css-checker/webpack')({ /* options */ }),
],
},
}
import { build } from 'esbuild'
import CSSChecker from 'unplugin-vue-css-checker/esbuild'
build({
plugins: [CSSChecker({ /* options */ })]
})
import { defineConfig, loadEnv } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'
export default defineConfig(({ mode, command }) => {
const env = loadEnv(mode, process.cwd())
const isDev = command === 'serve'
return {
plugins: [
createVuePlugin(),
cssChecker({
// Declaring when a plug-in check will start
// Because this plugin will terminate the build if it does not pass, it is not recommended to use `true` directly.
// default is `false`
enable: isDev || !!env.VITE_CHECK_CSS,
// (required) Declare the project root directory.
projectRoot: __dirname,
// Declares which file suffixes need to be checked, by default: `.css` 、 `.pcss` 、 `.postcss` 、 `.less` 、 `.scss` 、 `.sass`
suffixes: ['.css', '.less'],
// (required) To configure the common style.
immutables: {
libs: [
// Styles that declare component libraries are not allowed to be overridden
'node_modules/element-ui/lib/theme-chalk/index.css',
// Public styles within a declaration project are not allowed to be overridden
'src/styles',
],
// Manually specifying the public class name does not allow overwriting
selectors: ['dark'],
// Specifies the class name that can be overridden
excludeSelectors: [
'.color-red'.
],
},
// Declare which files are not validated, such as public styles
excludeRules: [
/windi\.css$/,
/src[\\\/]styles/,
],
}),
],
}
})
The definition of "Rule":
.common-btn { color: red; }
is a rule,.common-btn, .custom-btn { color: red; }
is two rules.
- Collect all common style class names when the bundle tool
buildStart
. - As the bundle tool
transform
, it begins to validate each file. - Ends if
enable
is nottrue
or the file suffix is not a supported suffix and is not thestyle
block of the.vue
file. Four. Determines whether the 'scoped' style is in the 'Vue' file, and ends if it is. - Parse the
CSS
code to extract the rules. - Determine if there is a rule in each rule that all
class
selectors are common style class names, and if so, mark them as style polluters.
- Scoped adds attribute selectors, even if you use
/deep/
pass-through, so the scope of contamination is limited. - If the slot to do checks, the cost is high, the need to check the contents of the slot at runtime, contrary to the original intention of this plugin.
- Vite is bundless, so we can't get all the file information unless we build it, and we can't know at Dev Time that other files are using the same class name.
- If pre-scanning all files can be done, but the corresponding costs and benefits are not proportional, not yet supported.
- If this scenario does exist, it can be handled in the form of a custom common style class name.
The ID selector is unlikely to be overridden because the element ID must be unique in the HTML.
The other selectors don't usually work alone, and they all work with classes, so no checking is planned.