API Reference

@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 way
import 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:

.classes.ignored

Exclude class names accidentally extracted by the scanning process.

Default
undefined
Type
string[]
RegExp[]

Functions

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!)'
]

Properties

🚧 Please refer to the source code temporarily.

API Reference
@master/eslint-config-css

The ESLint configuration and plugin reference for Master CSS.

API Reference
@master/css-runtime

The core syntax parsing and runtime engine of Master CSS.

© Aoyue Design LLC.