css

New Features

• Master CSS ESLint dfb66ee 91bce44 @0Miles

  npm install -D @master/eslint-plugin-css @typescript-eslint/parser eslint
  

  {
      "extends": ["@master/css"],
      "overrides": [
          {
              "files": ["*.ts", "*.tsx", "*.js"],
              "parser": "@typescript-eslint/parser"
          }
      ]
  }
  

  Now you can keep the order of category names consistent and more features coming in the future.

Performance Upgrades

CSS

• Improved variable syntax algorithm b866769 @1aron

Additions

Vscode Language Service

• Support mdx 5c947ec @0Miles

Improvements

CSS

• Make functions support color tokens to avoid broad matching feb990b @1aron
• Supports any color tokens eb7efc7 @BenSeage
• Type Config c25b482 @1aron
• Type-safe CoreLayer enum bbb30c6 @1aron
• Type-safe Layer enum 7d1197a @1aron
• Use RegExp instead of String to define config.rules[].match 8b48d8c @1aron

Bug Fixes

CSS

• Config definition 19e7693 @1aron
• Functions were incorrectly replaced with values d532d6a @BenSeage
• Rules are inserted in unpredictable order f011929 @1aron
• The order of CSS rules insertion is not reliable 6adad14 @1aron

Language Service

• Parse color 1f8ef31 @0Miles

Deprecations

CSS

• Use the kebab-case to define config.semantics instead of camelCase 1273454 @1aron

Documentation

• Add the Code Splitting documentation 7952100 @1aron
• Add the Font Feature Settings documentation 039bd29 @1aron
• Add the Fonts - Configuration documentation c89413a @1aron

New Features

CSS

• Fonts API, resolved #275 824d0ed @1aron

Bug Fixes

CSS

• Type parameter 'key' has a circular constraint c24d374 @1aron

Documentation

• Fix transition syntax d8f9ed3 @BenSeage
• Fix webpack plugin 9fe627a @BenSeage

Improvements

CSS

• Make CSS variable syntax support color tokens, resolved #276 5fa9fa5 @benseage

Bug Fixes

CSS

• Incorrectly rehydrated animation CSS rules, resolved #274 c1d6c4d @oskar-gmerek

Documentation

Svelte

• Use svelte:component to provide CSS cc9a21c @BenSeage

Examples

Svelte

• Use svelte:component to provide CSS 20dd294 @BenSeage

New Features

Vue

• Class Variant Element 2fa48d9 @BenSeage

New Features

Vue

• Register the theme service using ThemeServiceProvider f4dfaca @BenSeage

  <script setup lang="ts">
  import { CSSProvider, ThemeServiceProvider } from '@master/css.vue'
  import config from '../master.css'
  import HelloWorld from "./components/HelloWorld.vue";
  </script>
  
  <template>
      <CSSProvider :config="config">
          <ThemeServiceProvider :options="{ default: 'system' }">
              <HelloWorld />
          </ThemeServiceProvider>
      </CSSProvider>
  </template>
  

  and access the theme context:

  <script setup lang="ts">
  import { ref, inject } from 'vue'
  
  const count = ref<number>(0)
  const themeService = inject<any>('theme-service')
  
  function changeTheme(event: any) {
      themeService.switch(event.target.value)
  }
  </script>
  

Documentation

• Open source the official documentation 671779a @1aron

Bug Fixes

CSS

• Missed removing the logs for testing 15c8806 @1aron

React

• Matching classes were not added, fixed #271 307a7ee @1aron

Bug Fixes

Vue

• nuxt generate failed to parse @master/css.vue/dist/CSSProvider.vue, fixed #261 6068aa5 @1aron

Bug Fixes

CSS

• CLI doesn't read the specified config path 9d5f3b0 @1aron
• Support selector shorthands for group syntax 0da4dcc @BenSeage

React

• Client and server components shouldn't be bundled together, fixed #262 2b9ca7a @1aron

Extractor

• Missed patterns to match filenames starting with a period 1fa97ea @1aron

Language Service

• Color parse eb25776 @0Miles

Examples

• Update Next.js with Progressive Rendering 45a0e32 @1aron
• Update Next.js with Runtime Rendering 3c02281 @1aron

Next.js

• Update CSSProvider registration 2b05b35 @1aron

Improvements

CSS

• Rename config.breakpoints to config.viewports and add the viewport 4xs d766c3f by @1aron

  export default {
  -   breakpoints: {
  -       '3xs': 360,
  -       '2xs': 480,
  -       xs: 600,
  -       sm: 768,
  -       md: 1024,
  -       lg: 1280,
  -       xl: 1440,
  -       '2xl': 1600,
  -       '3xl': 1920,
  -       '4xl': 2560
  -   },
  +   viewports: {
  +       '4xs': 360,
  +       '3xs': 480,
  +       '2xs': 600,
  +       'xs': 768,
  +       'sm': 834,
  +       'md': 1024,
  +       'lg': 1280,
  +       'xl': 1440,
  +       '2xl': 1600,
  +       '3xl': 1920,
  +       '4xl': 2560
  +   }
  }
  

• Rename config.keyframes to config.animations #268 2895a1c by @BenSeage

  export default {
  -   keyframes: {
  +   animations: {
          slideIn: { to: { ... }, from: { ... } }
      }
  }
  

Bug Fixes

CSS

• Generates incorrect keyframes rule 7d4160f

Improvements

CSS

• config.keyframes and config.semantics are strictly follow csstype 81e2eec by @BenSeage

  export default {
      semantics: {
          'hide-text': {
  -             'font-size': '0px'
  +             fontSize: '0px'
          }
      }
  }
  

  Now it's type safe.

New Features

CSS

• Semantic fit = width:fit + height:fit #257 a199e34 by @BenSeage

  - <div class="w:fit h:fit">
  + <div class="fit">
  

Additions

CSS

• Selector shorthand :only for :only-child #266 371b83d by @BenSeage

  <ul>
  -    <li class="hide:only-child"></li>
  +    <li class="hide:only"></li>
  </ul>
  

Improvements

CSS

• border and outline default to solid when style is not specified #267 4aea676 @BenSeage

  - <div class="border:1|solid|slate">
  + <div class="border:1|slate">
  
  - <div class="outline:1|solid|slate">
  + <div class="outline:1|slate">
  

Bug Fixes

CSS

• Wrong order of extended targets 2dbdebe by @BenSeage

Bug Fixes

Extractor Vite

• Changing fixed sources didn't trigger HMR a5309a7 by @1aron

Examples

• Add Laravel with Static Extraction 802d53e by @1aron

Additions

Theme Service

• init() function to initialize ThemeService more concisely 1cc98fc by @1aron

  import { init } from 'theme-service'
  
  init({ default: 'dark' })
  

Improvements

CSS

• Made color config syntax consistent with class syntax #264 20fa8fc by @benseage

  export default {
      colors: {
          primary: '#000',
          primary: 'rgb(0,0,0)',
  -       primary: 'rgb(0 0 0)',
  +       primary: 'rgb(0|0|0)',
  -       primary: 'rgb(0 0 0/.5)',
  +       primary: 'rgb(0|0|0/.5)',
          primary: 'rgba(0,0,0,.5)',
          primary: 'blue/.5'
      }
  }
  

• Specify multiple theme colors on a single prop #263 af8b3f1 by @benseage

  export default {
      colors: {
  -       primary: {
  -           '': '#ff0000'
  -           '@light': '#000000',
  -           '@dark': '#ffffff'
  -       },
  -       accent: {
  -           '': '#ff3300'
  -           '@light': '#111111',
  -           '@dark': '#eeeeee'
  -       }
  +       primary: '#ff0000 #000000@light #ffffff@dark',
  +       accent': '#ff3300 #111111@light #eeeeee@dark'
      }
  }
  

Bug Fixes

Theme Service

• Cannot find module 'src/core' from 'src/functions/init.ts' a66cf2f by @benseage

Deprecations

Theme Service

• options.init in favor of manual initialization cbea12e by @1aron

Bug Fixes

CSS

• Colors with themes are not reflected in the classes #260 @benseage fce7282

Extractor Vite

• Read a file that does not exist on reset @1aron 5b142a8
• Read incorrect file path on reset @1aron 19d18b6

Extractor

• Missing waiting for the watcher initialization @1aron 35ccd1a

( ↑ 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

Bug Fixes

• CSS - Unsupported CSS properties in a group have no fallback 891e3f0

Improvements

• CSS - Simplify animation-play-state: to @play: #223 e01886d

  - <div class="animation-play-state:paused">
  - <div class="animation-play-state:running">
  + <div class="@play:paused">
  + <div class="@play:running">
  

• CSS - Simplify animation-direction values #220 a70f8c0

  - <div class="animation-direction:alternate">
  - <div class="animation-direction:alternate-reverse">
  + <div class="@direction:alt">
  + <div class="@direction:alt-reverse">
  

• CSS - Simplify animation-fill-mode #228 e5d2fe5

  - <div class="animation-fill-mode:forwards">
  - <div class="animation-fill-mode:backwards">
  - <div class="animation-fill-mode:both">
  + <div class="@fill:forwards">
  + <div class="@fill:backwards">
  + <div class="@fill:both">
  

• CSS - Simplify animation-iteration-count #227 8c65635

  - <div class="animation-iteration-count:infinite">
  + <div class="@iteration:infinite">
  

Bug Fixes

• React - Repeat to initialize Master CSS on SSR 1118e97

Bug Fixes

• Theme Service - matchMedia is not defined e185afd