Package

Extractor

Master CSS static extractor for various raw text extraction.


Interfaces

CSSExtractor

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.

🚧 Check out the source code temporarily.

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 way
import options from '@master/css-extractor/options'

options.module

Custom Master CSS virtual module ID, this option does not support Master CSS CLI.

Type
string
Default
'.virtual/master.css'

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'

options.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.

Type
string
Default
'master.css'

options.include

Broadly specify source files/directories to be scanned by Master CSS.

Type
FastGlobPattern[]
Default
["**/*.{html,js,jsx,ts,tsx,svelte,astro,vue,md,mdx,pug,php}"]

options.exclude

Broadly exclude source files/directories from scanning by Master CSS.

Type
FastGlobPattern[]
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/**"]

options.sources

Mandatory source files/directories are to be scanned by Master CSS.

Type
FastGlobPattern[]
Default
[]

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.

options.classes.fixed

Generate fixed CSS rules based on the specified class name, regardless of source.

Type
string[]
Default
undefined

Typically you would use it with the following limitations:

options.classes.ignored

Exclude class names accidentally extracted by the scanning process.

Type
string[]
RegExp[]
Default
undefined

extractLatentClasses()

Extract latent classes from string content.

ArgumentTypeDefault
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!)'
]
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.