css

Bug Fixes

• Ignore handling of new element removeNodes (63f2f2a)

Bug Fixes

• incorrect count of class (860ba0e)

Bug Fixes

• incorrect count of class (2951aae)

Bug Fixes

• aspect-ratio (47772fb)

Bug Fixes

• incorrect count of class (9408677)

New Features

• CSS - Support unit conversion for configuration (0d8902b)

  export default {
      values: {
  -      '2x': '2rem',
  +      '2x': 32,
  -      '3x': '3rem',
  +      '3x': 48,
          FontSize: {
  -          sm: '1rem',
  +          sm: 16,
  -          md: '1.5rem',
  +          md: 25
          },
          LetterSpacing: {
  -          wide: '0.025em',
  +          wide: .4
          },
      }
  }
  

Bug Fixes

• breakpoints (08d26ea)

Features

• nested configuration for breakpoints / colors / selectors / semantics / values (f7e574e)

  This feature is used to simplify, format your custom configuration and avoid writing the same name repeatedly. Supported configurations include .breakpoints, .colors, .selectors, .semantics, .values:

  /** @type {import('@master/css').Config} */
  export default {
      colors: {
          primary: '#ebbb40', // fg:primary
  -       'code-silence': 'slate-70',
  -       'code-js-pink': 'pink-70',
  -       'code-js-blue': 'blue-70',
  +       code: {
  +           silence: 'slate-70',
  +           js: {
  +               pink: 'pink-70',
  +               blue: 'blue-70',
  +           }
  +       }
      },
      semantics: {
  -       show: 'display:block',
  +       show: {
  +           display: 'block'
  +       }
      },
      values: {
          Width: {
  -           'content-xs': '37.5rem',
  -           'content-sm': '48rem',
  +           content: {
  +              xs: '37.5rem'
  +              sm: '48rem'
  +           }
          }
      },
      ...
  }
  

  Applied in HTML:

  <code class="fg:code-js-pink fg:code-silence.disabled disabled">...</code>
  
  <div class="show!" hidden>...</div>
  
  <article class="w:content-xs w:content-sm@lg">...</div>
  <article class="w:600 w:768@lg">same as built-in</div>
  <article class="w:xs w:sm@lg">same as built-in</div>
  

  It can be observed that the Master takes the key defined by the nesting of concatenation - as the class name.

  ⚠️ In order to prevent the class name from being too long, the best practice for nested configuration is 2-3 layers.

Bug Fixes

• config.values typing (456397f)

master.css.js

- /** @type {import('@master/css').MasterCSSConfig} */
+ /** @type {import('@master/css').Config} */
export default { ... }

• rename .prioritySelectorIndex to .priority
• rename MasterCSSOptions to Options
• rename MasterCSSConfig to Config
• rename MasterCSSRule to Rule
• rename MasterCSSRuleMatching to RuleMatching
• rename MasterCSSDeclaration to Declaration
• rename MasterCSSMedia to MediaQuery
• rename MasterCSSMediaFeatureRule to MediaFeatureRule

Bug Fixes

• stylesheet crossorigin issue (dedff8f)

Performance Improvements

• remove propName for less output size (78f5efa)

Bug Fixes

• filter/backdrop-filter don't support color tokens (6afb0c7)

Bug Fixes

• backdrop-filter doesn't support color tokens (cb36a6b)
• filter doesn't support color tokens (3288b6b)

Bug Fixes

• colorful style with inherit value (4cf8095)

Features

• global values (859d4d6)

  Previously config.values only supported default rules such as BoxShadow, FontFamily.

  Now, tokens starting with a non-capital letter are global:

  /* master.css.js */
  
  /** @type {import('@master/css').MasterCSSConfig} */
  export default {
       values: {
           '2x': '.5rem',
           '3x': '.75rem',
           '4x': '1rem',
           FontFamily: {
               sans: 'Inter var, Noto Sans TC, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue',
               mono: 'Fira Code VF, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace'
           }
       },
       ...
  }
  

  Then mark it directly in the HTML:

  <div class="mt:2x w:4x@sm p:3x font:mono">...</div>
  

Bug Fixes

• text-size diff (327013b)

Features

• counter-reset style (e8aafc5)

Bug Fixes

• tokenize extended colors with default color (74b4278)

Features

• access extended color tokens (b727379)

Bug Fixes

• document observed by default (d408a9b)