css

Bug Fixes

• Vite - Cannot find file master.css on build start d6fddb25
• Vite - Dev server's index.html isn't scanned on startup 1a7ffd8a

Examples

• Svelte Kit - Renew project 0c49boeb

  There are currently known issues https://github.com/sveltejs/kit/issues/7942 with Svelte Kit in development mode to be fixed by the Svelte Team.

Bug Fixes

• analyze css (1800e86)

Bug Fixes

• prevent observing document when rendering (706495b)

Bug Fixes

• ignore handling of unchanged disconnected element (b99386f)

Bug Fixes

• ignore handling of unchanged disconnected element (58ed490)

Features

• support CSS property font-feature-settings (f7bdc5f)

Performance Improvements

• minify values.FontFamily (ddbe3fd)

Bug Fixes

• incorrect count of class (8245908)

Bug Fixes

• incorrect count of class (02ab08a)

Bug Fixes

• Ignore handling of new element removeNodes (f12cb91)

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)