Release v2.0.0-beta.160 · master-co/css

( ↑ Expand all the release details )

Compilation modes have been renamed:

Progressive Rendering - Scan the requested HTML on the server side, generate CSS rules, and enable runtime-rendering compilation on the browser side
Runtime Rendering - Observe the DOM tree, manipulate CSS rules according to the changed class name, and synchronize to the running style sheet at runtime (Just-in-time)
Static Extraction - Scan source files for class names at build time, extract class names, and generate CSS files/virtual modules, then import them in the entry file (Ahead-of-time)

New Features

Vue

@master/css.vue #248 _^dac0ffd

You can now initialize the Master CSS Runtime Rendering using CSSProvider:

<script setup lang="ts">
import { CSSProvider } from '@master/css.vue'
import config from '../master.css'
</script>

<template>
    <CSSProvider :config="config">...</CSSProvider>
</template>

Or lazy load the Runtime Engine for Progressive Rendering: CSSProvider:

<script setup lang="ts">
import { defineAsyncComponent } from 'vue'
const CSSProvider = defineAsyncComponent(async () => (await import('@master/css.vue')).CSSProvider)
</script>

<template>
    <CSSProvider :config="import('../master.css')">...</CSSProvider>
</template>

CSS

config.extends multiple configurations #180 _^5b080ae

// master.css.js

export default {
    extends: [
        require('aron.css'),
        require('@master/tailwind.css'),
        require('./styles/btn.css')
    ],
    colors: { ... },
    ...
}

Fallback invalid at-rules @.* to be themes #214 _^836e702

<div class="fg:red@christmas">

Generated CSS:

.christmas .fg\:red\@christmas {
    color: #d11a1e
}

Support BEM's double underscore naming #218 _^8c8586d

Support semantics and rules with animation keyframes #222 _^f2f8b87

// master.css.js

export default {
    semantics: {
        'my-animation': {
            animation: '1s linear infinite rotate'
        }
    }
}

React

Integrate Class Variant using React elements #191 _^277ee1d

// React
import { styled } from '@master/css.react';

const Link = styled.a`text:center px:20`

return (
    <Link href="https://css.master.co/">Master CSS</Link>
)

Validator

@master/css-validator - Validator for Master CSS class syntax _^73bfec1

import { isClassValid, reportErrors, createValidRules } from '@master/css-validator'

isClassValid('text:center')
// => true

isClassValid('love:css')
// => false

createValidRules('text:center')
// => [{...}]

createValidRules('love:css')
// => []

reportErrors('text:center')
// => []

reportErrors('love:css')
// => [SyntaxError]

Extractor

@master/css-extractor - Master CSS static extractor for various raw text _^2f51401

- npm uninstall @master/css-compiler
+ npm install @master/css-extractor

$ mcss extract

Extractor Vite

@master/css-extractor.vite - Integrate Master CSS Static Extraction in Vite way _^f461c83

- npm uninstall @master/css.vite
+ npm install @master/css-extractor.vite

import { defineConfig } from 'vite'
- import { MasterCSSExtractorPlugin } from '@master/css.vite'
+ import { CSSExtractorPlugin } from '@master/css-extractor.vite'

export default defineConfig({
    plugins: [
-       MasterCSSExtractorPlugin(),
+       CSSExtractorPlugin()
    ]
})

Extractor Webpack

@master/css-extractor.webpack _^761b902

- npm uninstall @master/css.webpack
+ npm install @master/css-extractor.webpack

- const { MasterCSSExtractorPlugin } = require('@master/css.webpack')
+ const { CSSExtractorPlugin } = require('@master/css-extractor.webpack')

+ /** @type {import('webpack').Configuration} */
+ const webpackConfig = {
+     plugins: [
+         new CSSExtractorPlugin()
+     ]
+ }

/** @type {import('next').NextConfig} */
const nextConfig = {
    webpack: (config) => {
-       config.plugins.push(new MasterCSSExtractorPlugin())
+       config.plugins.push(...webpackConfig.plugins)
        return config
    }
}

module.exports = nextConfig

Server Nitro

@master/css-server.nitro - Integrate Master CSS Progressive Rendering in Nitro way _^72061c4

// nuxt.js-with-progressive-rendering/server/plugins/css-server.ts

import { createCSSServerPlugin } from '@master/css-server.nitro'
// @ts-expect-error allowImportingTsExtensions
import config from '../../master.css.ts'

export default createCSSServerPlugin({ config })

Renderer

@master/css-renderer _^85d82a7
```
$ mcss render ".next/**/*.html"
```

Class Variant

class-variant #191 _^3dd94ff

import cv from 'class-variant'

const btn = cv(
    'inline-flex rounded',
    {
        intent: {
            primary: 'bg:blue fg:white bg:blue-55:hover',
            secondary: 'bg:white fg:slate-30 bg:slate-90:hover',
        },
        size: {
            sm: 'text:14 p:5|15',
            md: 'text:16 p:10|25'
        }
    },
    ['uppercase', { intent: 'primary', size: 'md' }],
    ({ indent, size }) => indent && size && 'font:semibold'
)

btn.default = {
    intent: 'primary',
    size: 'sm'
}

export default btn

import btn from './class-variants/btn'

btn()
// inline-flex rounded bg:blue fg:white bg:blue-55:hover text:14 p:5|8 font:semibold

btn({ indent: 'secondary', size: 'sm' })
// inline-flex rounded bg:white fg:slate-30 bg:slate-90:hover text:14 p:5|8 font:semibold

btn({ indent: 'primary', size: 'md' })
// inline-flex rounded bg:blue fg:white bg:blue-55:hover text:16 p:10|25 uppercase font:semibold

Supports Boolean properties #247 _^c3bed63

import cv from 'class-variant'

const btn = cv(
    'inline-flex',
    {
        disabled: 'opacity:.5'
    }
)

btn({ disabled: true })
// => inline-flex opacity:.5

Performance Upgrades

Extractor

Use csstree instead of stylelint, 10x-60x faster than ever

Extractor Vite

Access the transform code to avoid reading the source file _^95d1726

Additions

CSS

extractClassesFromHTML() function _^e8f80b6
extractLatentClasses() function _^3b89074
generateFromClasses() function _^49cf346
generateFromHTML() function _^8c6dc60
mcss render '**/*.html' --analyze mode _^e9f14ca
renderHTML() function _^37ee2f3

Improvements

CSS

mcss render log brotil sized and rendered files #205 _^fe1b598

Initialization of Master CSS Runtime #249 _^493e091

- import MasterCSS from '@master/css'
+ import { initRuntime } from '@master/css'
import config from './master.css'

- new MasterCSS(config)
+ initRuntime(config)

Specify theme variants in each config options #213 _^c912f70

// master.css.js

export default {
    colors: {
-       primary: '#ff0000'
+       primary: '#ff0000 #ffffff@dark #000000@light'
    },
-   themes: {
-       light: {
-           colors: {
-               primary: '#000000'
-           }
-       },
-       dark: {
-           colors: {
-               primary: '#ffffff'
-           }
-       }
-   }
}

Extractor

Add options.exclude _^d93dc68
Exclude dev sources _^3e3e3d9
Virtual CSS mods are prefixed with virtual: by default to avoid confusion with real mods #200 _^d608e26
```
- import 'master.css'
+ import '.virtual/master.css'
```
Built-in handling of changes to options, configurations, and sources _^6560182

Extractor Vite

Automatically extract index.html according to transformIndexHtml _^8ebe612
Update the virtual CSS hot module more stably _^69ee216

Bug Fixes

Side effects of CLI entry splitting _^a2a668e

CSS

Function syntax with selectors generates incorrect rules #253 _^23f817c
Missing runtime initialization of browser package _^1bf520e
Re-rendering HTML repeatedly injects CSS _^388f420
Unexpectedly treated toString as a valid class _^92ef89c

Extractor

Make options accessible across environments _^fcb38d5
Miss extracting some strings _^f2fa8e4
Repeat to start watching _^7966860

Extractor Vite

A path with parameters passed the check unexpectedly _^c1c9b3a
Accidentally enabling extractors during SSR _^690bdb0
CSS isn't expected to be injected into the chunk after vite build _^e1ad44e
HMR doesn't work when modifying master.css.* config or master.css-extractor.* options _^ec284ef
HMR will not be performed after modifying master.css.js _^e9f9f3c
Vue/React environments don't have styles injected after server connection _^865149c

Extractor Webpack

Module not found: Can't resolve '.virtual/master.css' _^d20d087
All mods aren't rebuilt on config/options reset _^aa77584
Static extraction doesn't work for HMR in Next.js 13 App #102 _^1452aa7

React

CSSProvider Types _^b1707c9

Vscode Language Service

Supports highlight _^0207157

Deprecations

CSS

Rename render() to generateFromClasses() _^130d360
Rename renderFromHTML() to generateFromHTML() _^184c170
Rename renderIntoHTML() to renderHTML() _^e345e44
renderRules() _^1c11b2c
renderRulesFromHTML() _^625945e
config.rules[].symbol #224 _^29afcd4

Deprecate sm:, sp: collision-prone syntax _^7d32952

- <div class="sm:20 smx:32 sp:16 spx:48">
+ <div class="scroll-m:20 scroll-mx:32 scroll-p:16 scroll-px:48">

Compiler

Use @master/css-extractor instead of @master/css-compiler _^bfde550

Extractor

Use new CSSExtractor({}, cwd) instead of new CSSExtractor({ cwd }) _^f4da0a2

Svelte

Use CSSProvider instead of LazyCSSProvider _^9bd0c72

Vite

Use @master/css-extractor.vite instead of @master/css.vite _^9b4e443

Webpack

Use @master/css-extractor.webpack instead of @master/css.webpack _^626ee89

Reversions

Revert《 Improve(Extractor): Virtual CSS mods are prefixed with virtual: by default to avoid confusion with real mods #200 》 and prefix with .virtual: _^e6a6698, #200

Tests

Vite

Nuxt.js Static Extraction example _^e997c88
React Static Extraction example _^5d609c2
Vite Static Extraction example _^93712da