Master CSS Extractor
Master CSS static extractor for various raw text extraction.
Usage
import { CSSExtractor } from '@master/css-extractor'
Create an instance of the Master CSS extractor:
const extractor = new CSSExtractor(options, cwd)
cwd
is used to change the directory where .config
, .include
, .exclude
and .sources
are currently running.
CSSExtractor
is the business logic encapsulation of Master CSS Static Extraction, which is usually used by build tools or third-party package authors.
This package is specific to the Node.js environment.
To start using Master CSS static extraction, check out the guide first.
Options
/** @type {import('@master/css-extractor').Options} */export default { { "verbose": 1, "module": ".virtual/master.css", "config": "master.css", "sources": [], "include": [ "**/*.{html,js,jsx,ts,tsx,svelte,astro,vue,md,mdx,pug,php}" ], "exclude": [ "**/*.css", "**/*.d.ts", "**/*.test.*", "**/*test.{js,cjs,mjs,ts}", "**/*.options.*", "**/*master.css.*", "**/*master.css-extractor.*", "**/*master.css-renderer.*", "**/*README.md", "**/dist/**", "**/out/**", "**/styles/**", "**/public/**", "**/node_modules/webpack*/**", "**/node_modules/events/**", "**/node_modules/html-entities/**", "**/node_modules/ansi-html-community/**", "**/node_modules/util/**", "**/node_modules/react/**", "**/node_modules/react-dom/**", "**/node_modules/vue/**", "**/node_modules/next/**", "**/node_modules/astro/**", "**/node_modules/svelte/**", "**/node_modules/svelte-hmr/**", "**/node_modules/@swc/**", "**/node_modules/@sveltejs/**", "**/node_modules/@angular/**", "**/node_modules/.cache/**", "**/node_modules/.vite/**" ], "classes": { "fixed": [], "ignored": [] } }}
The above are the default compilation options, you can also introduce these default values to expand your options:
import { options } from '@master/css-extractor'// or in a side-effect-free wayimport options from '@master/css-extractor/options'
.module
Custom Master CSS virtual module ID, this option does not support Master CSS CLI.
Default | '.virtual/master.css' |
---|---|
Type | string |
Set the virtual CSS module of Master CSS to virtual:master.css
:
import CSSExtractorPlugin from '@master/css-extractor.vite' /** @type {import('vite').UserConfig} */const config = { plugins: [ CSSExtractorPlugin({ module: '.virtual/master.css' }) ]} export default config
Then you can import with a custom virtual module ID in the entry file like main.js
:
import '.virtual/master.css'
.config
Customize your Master CSS configuration or the path to the configuration file, the default configuration file is read with .cwd in the root directory of the project.
Default | 'master.css' |
---|---|
Type | string |
.include
Broadly specify source files/directories to be scanned by Master CSS.
Default | ["**/*.{html,js,jsx,ts,tsx,svelte,astro,vue,md,mdx,pug,php}"] |
---|---|
Type | FastGlobPattern[] |
.exclude
Broadly exclude source files/directories from scanning by Master CSS.
Default | ["**/*.css","**/*.d.ts","**/*.test.*","**/*test.{js,cjs,mjs,ts}","**/*.options.*","**/*master.css.*","**/*master.css-extractor.*","**/*master.css-renderer.*","**/*README.md","**/dist/","**/out/","**/styles/","**/public/","**/node_modules/webpack*/","**/node_modules/events/","**/node_modules/html-entities/","**/node_modules/ansi-html-community/","**/node_modules/util/","**/node_modules/react/","**/node_modules/react-dom/","**/node_modules/vue/","**/node_modules/next/","**/node_modules/astro/","**/node_modules/svelte/","**/node_modules/svelte-hmr/","**/node_modules/@swc/","**/node_modules/@sveltejs/","**/node_modules/@angular/","**/node_modules/.cache/","**/node_modules/.vite/**"] |
---|---|
Type | FastGlobPattern[] |
.sources
Mandatory source files/directories are to be scanned by Master CSS.
Default | [] |
---|---|
Type | FastGlobPattern[] |
This option is similar to .include
but not excluded by .exclude
. Usually, you will use it to specify what is accidentally excluded by .exclude
file/directory.
.classes.fixed
Generate fixed CSS rules based on the specified class name, regardless of source.
Default | undefined |
---|---|
Type | string[] |
Typically you would use it with the following limitations:
- Class names that do not exist in the source code.
- Irregular class names.
- Class names from asynchronous data.
.classes.ignored
Exclude class names accidentally extracted by the scanning process.
Default | undefined |
---|---|
Type | string[] RegExp[] |
Functions
extractLatentClasses()
Extract latent classes from string content.
Argument | Type | Default |
---|---|---|
content | string | undefined |
return | string | - |
import { extractLatentClasses } from '@master/css-extractor' const content: string = ` import { setupCounter } from './counter' const counterElement = document.querySelector<HTMLButtonElement>('#counter') const syntax = 'block' counterElement?.classList.add('~transform|.3s', 'translateY(-5):hover', syntax) setupCounter(counterElement!)`const result = extractLatentClasses(content)
Result:
[ 'const', 'counterElement', 'syntax', 'block', '~transform|.3s', 'translateY(-5):hover', 'setupCounter(counterElement!)']
Properties
🚧 Please refer to the source code temporarily.