Closed 1aron closed 1 year ago
⚠️ ( Outdated ) Check out the latest Master CLI documentation https://beta.css.master.co/docs/cli
Generate master.css.js file:
mcss init
/** @type {import('@master/css').Config} */ const config = { themes: {}, colors: {}, classes: {}, values: {}, semantics: {}, breakpoints: {}, selectors: {}, mediaQueries: {} } module.exports = { config }
With --jit compilation setup:
--jit
const MasterCSS = require('@master/css') ... module.exports = { ..., css: new MasterCSS({ config }) }
With --aot compilation setup:
--aot
... /** @type {import('@master/css-compiler').Options} */ const options = { sources: [], fixedClasses: [], ignoredClasses: [], } module.exports = { ..., options }
type: "module"
Generate master.css.mjs file:
/** @type {import('@master/css').Config} */ export const config = { themes: {}, colors: {}, classes: {}, values: {}, semantics: {}, breakpoints: {}, selectors: {}, mediaQueries: {} }
import MasterCSS from '@master/css' ... export const css = new MasterCSS({ config })
... /** @type {import('@master/css-compiler').Options} */ export const options = { sources: [], fixedClasses: [], ignoredClasses: [], }
tsconfig.json
Generate master.css.ts file:
Or force to specify --ts:
--ts
export const config: Config = { themes: {}, colors: {}, classes: {}, values: {}, semantics: {}, breakpoints: {}, selectors: {}, mediaQueries: {} }
import MasterCSS, { Config } from '@master/css' ... export const css = new MasterCSS({ config })
import { Options } from '@master/css-compiler' ... export const options: Options = { sources: [], fixedClasses: [], ignoredClasses: [], }
You can enable JIT by importing /master.css.js into your application entry file, e.g. main.ts:
/master.css.js
main.ts
import { css } from './master.css'
Of course if you don't need to access the css instance:
css
import './master.css'
This command will automatically read the compiler options in the master.css.js file.
options
master.css.js
npx mcss
npx mcss -w
@BenSeage To add the .output compiler options:
.output
{ output: 'master.css' }
schemas/config-schema
export function masterCSSConfigSchema() { return ` themes: {}, colors: {}, classes: {}, values: {}, semantics: {}, breakpoints: {}, selectors: {}, mediaQueries: {} ` }
schemas/file-schema
export function masterCSSFileSchema({ aot, jit }) { return `` }
schemas/esm-file-schema
export function masterCSSESMFileSchema({ aot, jit }) { return `` }
schemas/ts-file-schema
export function masterCSSTSFileSchema({ aot, jit }) { return `` }
🎉 Released in https://github.com/master-co/css/releases/tag/v2.0.0-beta.113
⚠️ ( Outdated ) Check out the latest Master CLI documentation https://beta.css.master.co/docs/cli
Initialize Master CSS file
Common JS ( Default )
Generate master.css.js file:
With
--jit
compilation setup:With
--aot
compilation setup:ECMAScript (
type: "module"
)Generate master.css.mjs file:
With
--jit
compilation setup:With
--aot
compilation setup:TypeScript (
tsconfig.json
exists )Generate master.css.ts file:
Or force to specify
--ts
:With
--jit
compilation setup:With
--aot
compilation setup:Enable JIT Compilation
You can enable JIT by importing
/master.css.js
into your application entry file, e.g.main.ts
:Of course if you don't need to access the
css
instance:Build
This command will automatically read the compiler
options
in themaster.css.js
file.Watch the build process using the CLI ( chokidar )
@BenSeage To add the
.output
compiler options:Export file schemas
schemas/config-schema
schemas/file-schema
schemas/esm-file-schema
schemas/ts-file-schema