Package

@master/css-extractor

NPM package ( download / month )NPM package ( download / month )NPM package size (gzipped size)NPM package size (gzipped size)Source codeSource code

Master CSS static extraction for various raw text

Installation

npm i @master/css-extractor

API Reference

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

{    "verbose": 1,    "module": "virtual:master.css",    "output": "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/**",        "**/.next/**",        "**/.nuxt/**",        "**/.svelte-kit/**",        "**/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/**"    ],    "includeClasses": [],    "excludeClasses": []}

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'

options.module

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

Type
string
Default
'virtual:master.css'

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
Config
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/**", "**/.next/**", "**/.nuxt/**", "**/.svelte-kit/**", "**/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.includeClasses

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

Type
string[]
Default
[]

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.

options.excludeClasses

Exclude class names accidentally extracted by the scanning process.

Type
string[]
RegExp[]
Default
[]

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

  • Master UI


© 2025 Aoyue Design LLC.MIT License
Trademark Policy