✨ Master CSS CLI

[1aron]

⚠️ ( 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:

mcss init

/** @type {import('@master/css').Config} */
const config = {
    themes: {},
    colors: {},
    classes: {},
    values: {},
    semantics: {},
    breakpoints: {},
    selectors: {},
    mediaQueries: {}
}

module.exports = { config }

With --jit compilation setup:

const MasterCSS = require('@master/css')

...

module.exports = {
    ...,
    css: new MasterCSS({ config })
}

With --aot compilation setup:

...

/** @type {import('@master/css-compiler').Options} */
const options = {
    sources: [],
    fixedClasses: [],
    ignoredClasses: [],
}

module.exports = {
    ...,
    options
}

ECMAScript ( type: "module" )

Generate master.css.mjs file:

mcss init

/** @type {import('@master/css').Config} */
export const config = {
    themes: {},
    colors: {},
    classes: {},
    values: {},
    semantics: {},
    breakpoints: {},
    selectors: {},
    mediaQueries: {}
}

With --jit compilation setup:

import MasterCSS from '@master/css'

...

export const css = new MasterCSS({ config })

With --aot compilation setup:

...

/** @type {import('@master/css-compiler').Options} */
export const options = {
    sources: [],
    fixedClasses: [],
    ignoredClasses: [],
}

TypeScript ( tsconfig.json exists )

Generate master.css.ts file:

mcss init

Or force to specify --ts:

export const config: Config = {
    themes: {},
    colors: {},
    classes: {},
    values: {},
    semantics: {},
    breakpoints: {},
    selectors: {},
    mediaQueries: {}
}

With --jit compilation setup:

import MasterCSS, { Config } from '@master/css'

...

export const css = new MasterCSS({ config })

With --aot compilation setup:

import { Options } from '@master/css-compiler'

...

export const options: Options = {
    sources: [],
    fixedClasses: [],
    ignoredClasses: [],
}

Enable JIT Compilation

You can enable JIT by importing /master.css.js into your application entry file, e.g. main.ts:

import { css } from './master.css'

Of course if you don't need to access the css instance:

import './master.css'

Build

This command will automatically read the compiler options in the master.css.js file.

npx mcss

Watch the build process using the CLI ( chokidar )

npx mcss -w

@BenSeage To add the .output compiler options:

{
    output: 'master.css'
}

Export file schemas

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

[1aron]

🎉 Released in https://github.com/master-co/css/releases/tag/v2.0.0-beta.113