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.

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'

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

Default	`'master.css'`
Type	`string` `Config`

`options.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[]`

`options.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[]`

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

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

`options.classes.ignored`

Exclude class names accidentally extracted by the scanning process.

Default	`undefined`
Type	`string[]` `RegExp[]`

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