Extractor

Master CSS static extractor for various raw text extraction.

Usage [sr-only]

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.

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.

.include

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

.exclude

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

.sources

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

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.

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.

Functions

extractLatentClasses()

Extract latent classes from string content.

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.

CLI

Scan source files, extract syntax classes, generate CSS rules, and output as a CSS file.

npx mcss extract …

Requires @master/css-extractor to be installed.

The command runs according to the preset extractor options.

[source paths]

Explicitly specify sources to scan, ignoring options.include and options.exclude restrictions.

npx mcss extract index.html main.js

If no sources are specified, by default, all directories of your current project will be scanned according to options.include and options.exclude.

npx mcss extract

Watch for file changes and build continuously.

npx mcss extract --output master.css

Specifies the source of the extractor options.

npx mcss extract --option dir/master.css-extractor.js

-v, --verbose

Verbose logging.

Set to 0 to silence the terminal.

npx mcss extract --verbose 0

-w, --watch

Watch for file changes and build continuously.

npx mcss extract --watch