v2.0.0-rc.69

Changes Overview

1. From this version, color variables are defined under the variables.color namespace:

export default {
    variables: {
-        primary: '#000000'
+        color: {
+            primary: '#000000'
+        }
    }
}

2. Variables for different modes should be moved to the modes section:

export default {
    modes: {
        dark: {
            color: { primary: '#ffffff' }
        },
        light: {
            color: { primary: '#000000' }
        }
    }
}

3. Add some alternative syntax:

• align-content:* -> content-*
• align-items:* -> items-*
• align-self:* -> self-*
• justify-content:* -> justify-*

4. Deprecate and replace certain syntax to reduce syntax diversity

- flex:col flex:row flex:column-reverse
+ flex-col flex-row flex-col-reverse

- center-content
+ justify-center items-center

- position:abs position:rel
+ abs rel

5. The default value of modeTrigger has been changed to the more general media; it was previously set to class.

export default {
    modeTrigger: 'media' // default
}

---

New Features

• Master Colors P3 _{^{@1aron 4aa0875}}
• Master CSS Figma Plugin _{^{@1aron 52101b6}}

Performance Upgrades

• Flatten extended configuration _{^{@1aron 8b8e0a8}}
• Only extend JSON-safe valid types _{^{@1aron 545da84}}

Additions

• font:<size> Variables 3xs to 10xl _{^{@1aron f8e21d7}}
• r:<size> variables xs to 4xl _{^{@1aron b6e1f54}}
• text:<size> Variables 3xs to 10xl _{^{@1aron 0375506}}
• Most CSS color space functions are supported _{^{@1aron 229f17f}}
• Shorthand content-* for align-content:* _{^{@1aron 3d365bd}}
• Shorthand items-* for align-items:* _{^{@1aron c1fa1f8}}
• Shorthand justify-* for justify-content:* _{^{@1aron 1e99edb}}
• Shorthand self-* for align-self:* _{^{@1aron 2e47ab2}}
• Spacing variables 4xs to 5xl _{^{@1aron 4c396b6}}
• Use Inter as the default sans font _{^{@1aron c130a0f}}
• Utilities bg-clip-border bg-clip-content bg-clip-padding bg-clip-text _{^{@1aron 36ede5e}}
• Utilities bg-origin-border bg-origin-content bg-origin-padding _{^{@1aron 29788f7}}
• Utilities box-content box-border _{^{@1aron ef5736f}}
• Utilities clip-none clip-margin clip-border clip-padding clip-content clip-fill clip-stroke clip-view _{^{@1aron 221ee3a}}
• Utilities flex-col flex-row _{^{@1aron 1f8350a}}
• Utilities shape-none shape-margin shape-content shape-border shape-padding _{^{@1aron 80dec8e}}
• Utilities transform-content transform-border transform-fill transform-stroke transform-view _{^{@1aron 4750024}}

Improvements

• modeTrigger default changed to media _{^{@1aron a147414}}
• text:<size> with auto letter-spacing _{^{@1aron c8972da}}
• Colors should be defined in the variables.color namespace _{^{@1aron 4b4fd6b}}
• Rename config.rules.variables to config.rules.namespaces _{^{@1aron 9fd8ad4}}
• Rename config.rules[].ambiguousKeys and config.rules[].ambiguousValues to config.rules[].aliasGroups and config.rules[].values _{^{@1aron 24fc4db}}
• Use color-mix to modify alpha _{^{@1aron 8aeb6f8}}
• Use config.modes.light.x to define variables for different modes instead of variables.x.['@dark'] _{^{@1aron aba02ef}}
• Use config.modeTrigger instead of config.modes _{^{@1aron bfd2bd1}}
• Use createCSS to create a MasterCSS instance with default config _{^{@1aron 6a8e896}}

Bug Fixes

Runtime

• CSSRuntime initialization for iframe _{^{@1aron e2a1874}}

Deprecations

• config.override option _{^{@1aron 6c44d8c}}
• config.rules[].analyze _{^{@1aron 4bd9dfd}}
• config.rules[].transformValue for JSON-safe configuration _{^{@1aron 1202aa7}}
• flex:col flex:column-reverse _{^{@1aron 2d4941a}}
• Remove position:abs position:rel _{^{@1aron b0aca3d}}
• Use config.functions[].transformer instead of config.functions[].transform for JSON-safe configuration _{^{@1aron ebe3e6b}}
• Use config.rules[].declarations instead of config.rules[].declare for JSON-safe configuration _{^{@1aron fadc372}}
• Use config.rules[].transformer instead of config.rules[].transformValueComponents for JSON-safe configuration _{^{@1aron f2cbad9}}
• Use justify-center items-center instead of center-content _{^{@1aron 410065f}}

Documentation

• Add examples for font-family _{^{@1aron 2da2c59}}
• Add examples for font-size _{^{@1aron 79fa13b}}
• Add examples for font-weight _{^{@1aron 9f4052c}}
• Add examples for line-height _{^{@1aron 0576b50}}
• Add examples for text-size _{^{@1aron 9b8ca7f}}
• New document Corner Radius _{^{@1aron d3968c4}}
• New document Spacing _{^{@1aron 8c0dfef}}
• New guide Typography _{^{@1aron 5372bd8}}

v2.0.0-rc.68

Additions

• Support $var in config.variables and class, resolved #401 _{^{@1aron 2060bc2 #401}}

Bug Fixes

• #id selector does not work in :of() _{^{@1aron e3fa3b1}}
• Components should maintain the core atomic philosophy, intentional merging will lead to unexpected behavior _{^{@1aron e42b882}}

v2.0.0-rc.67

Additions

• overflow-wrap wrap-break-word wrap-anywhere wrap-normal _{^{@1aron b01a740}}

Improvements

• Renamed .overflowed to .overflow _{^{@1aron 7886cf6}}

Bug Fixes

• Components inheriting from the same address lead to incorrect styling _{^{@1aron 43bfa6b}}

v2.0.0-rc.66

Bug Fixes

Language

• Change 'grammars' to 'syntaxes' in package.json _{^{@1aron 54ae65b}}

v2.0.0-rc.65

Bug Fixes

ESLint

• TypeError: value.split is not a function, fixed #400 _{^{@1aron b94e9d2 #400}}

Runtime

• The first rule inserted is repeated because layer is attached _{^{@1aron 07100d7}}
• The new rule was not done based on the inserted index _{^{@1aron 57e1c1d}}

v2.0.0-rc.64

New Features

• @master/css.astro integration _{^{@1aron 334cda8}}

Additions

Nuxt

• extract runtime progressive modes _{^{@1aron b1d24c5}}

Vite

• ConfigVirtualModulePlugin for watching config file and virtual module import _{^{@1aron a751561}}
• extract mode _{^{@1aron aa63c7e}}
• options.inject options.avoidFOUC _{^{@1aron f1a67c6}}
• runtime mode _{^{@1aron fdb9a25}}

Improvements

Builder

• Rename options.classes.fixed options.classes.ignored to options.includeClasses options.excludeClasses _{^{@1aron e76fef4}}

Vite

• Deprecate @master/css-extractor.vite in favor of @master/css.vite _{^{@1aron b6fbcdf}}

Webpack

• Deprecate @master/css-extractor.webpack in favor of @master/css.webpack _{^{@1aron f30f587}}

Bug Fixes

Runtime

• Seriously missing styles due to miscalculation of class counts _{^{@1aron 1818f2d}}

Documentation

• Add Astro reference _{^{@1aron ce1b564}}
• Add brand and trademark policy _{^{@1aron b1f5416}}
• Add deview view height _{^{@1aron f96e966}}
• Add Nuxt reference _{^{@1aron b5f87bc}}
• Add Vite reference _{^{@1aron 8a6345d}}
• New blog post - Bootstrapping Master CSS with Vite in seconds _{^{@1aron 0abccab}}
• Update installation guide and CDN integration metadata _{^{@1aron 475c364}}

v2.0.0-rc.63

Bug Fixes

• Some combination orders can never be corrected, fixed #377 _{^{@1aron 15a34a0 #377}}
• Unable to resolve universal selectors _{^{@1aron 1ef0fb1}}

ESLint

• Sorting warning selected the wrong range for TemplateLiteral, fixed #375 _{^{@1aron da74995 #375}}
• Validation error selected the wrong range for TemplateLiteral, fixed #387 _{^{@1aron 3a34780 #387}}

VSCode

• Deprecated the styled template literal highlight to prevent crashing _{^{@1aron 1a8406e}}

Documentation

• Deprecate extended breakpoints and queries in favor of config.screens and config.at; update syntax for foreground colors and introduce :of() pseudo-class for ancestor-based styling _{^{@1aron 014a641}}

Tests

• Template literal interpolation is not currently supported, resolved #376 _{^{@1aron 76f4ca2 #376}}

v2.0.0-rc.62

Performance Upgrades

• Optimization rule priority comparison algorithm _{^{@1aron 532bb18}}
• Parse @token into AST _{^{@1aron ae7befd}}
• Update UNIT_REGEX to use non-capturing groups _{^{@1aron 255e464}}
• Using media feature ranges to minify output and improve algorithm _{^{@1aron 3ae9fac}}

Additions

• .container utility syntax for container-type: inline-size _{^{@1aron b784807}}
• @w @h aliases _{^{@1aron ea6e16c}}
• container container-name container-type rules for container queries _{^{@1aron d6a87f2}}
• generateAt util function _{^{@1aron d4205a7}}
• generateSelector util for selector AST nodes _{^{@1aron 01a3af9}}
• parseAt() util function _{^{@1aron 899ad92}}
• parsePairs() util function _{^{@1aron fc50074}}
• parseSelector util for selector AST nodes _{^{@1aron 3a9f283}}
• parseValue() util function _{^{@1aron e8c32aa}}
• replaceCharOutsideQuotes util function _{^{@1aron 9316d66}}
• splitCharOutsideQuotes util function _{^{@1aron ae6177e}}
• Alias @start for @starting-style _{^{@1aron b9fdb61}}

Language Service

• @h @start @w @container() @media() hints _{^{@1aron 38ce000}}

Updates

• Bump @master/colors to version ^2.1.1 _{^{@1aron 4e7c4cf}}

Improvements

• Enhance components sorting logic for readable classes _{^{@1aron 150d231}}
• Enhance feature comparison sorting to handle numeric values correctly _{^{@1aron ac3f1aa}}
• Rename @reduced-motion to @reduce-motion _{^{@1aron 843893e}}
• Rename reorderForReadableClasses to sortReadableClasses and improve sort readability _{^{@1aron 5180e39}}
• Sort completion items using numeric comparison for better accuracy _{^{@1aron 5645b09}}
• Sort unknown classes in a locale-aware manner and append to ordered classes _{^{@1aron 8809725}}
• The reliability of rule comparison _{^{@1aron 4d0227d}}
• Update sorting logic for readable classes and improve rule comparison _{^{@1aron 0ebbdec}}
• Use config.screens instead of config.variables.screens _{^{@1aron d1b15be}}

Language Server

• Change workspaces to use Map for improved management and add global workspace support _{^{@1aron 3a86e4c}}

VSCode

• Extend included languages to support untitled files _{^{@1aron 36668b1}}

Bug Fixes

• @supports generates duplicate at identifiers _{^{@1aron b03f73c}}
• Enhance parsing logic to handle escaped characters and string boundaries _{^{@1aron 29acc98}}
• Ensure proper spacing in generated selectors based on combinator usage _{^{@1aron 56d12c7}}
• Not deleted according to the syntax rules corresponding to the class name _{^{@1aron 28a704e}}
• Prevent duplicate class rule insertion in MasterCSS _{^{@1aron 215f97b}}
• Rules were not inserted/removed correctly, fixed #385 _{^{@1aron b74aae7 #385}}

ESLint

• Anchoring reliability of class names nodes _{^{@1aron 0019f64}}
• Fixed output error in class order _{^{@1aron 4688587}}

Runtime

• Rule insertion and deletion handling _{^{@1aron 991bfc6}}

Deprecations

• Use :of() instead of reactive styles selector{...} _{^{@1aron 810f494}}
• Use AtDefinition for config.at instead of string; deprecate tree-style definition for simplicity _{^{@1aron e5a5dfd}}

Upgrades

• ESlint deps _{^{@1aron a08cecc}}

Tests

• Add unit tests for adding and removing CSS rules in MasterCSS _{^{@1aron e01da56}}

v2.0.0-rc.61

Bug Fixes

• The problem with the assignment of the base and preset layers _{^{@1aron 0de4f7f}}

Runtime

• An invalid or illegal string was specified on firefox, fixed #384 _{^{@1aron 9fa4220 #384}}

v2.0.0-rc.60

⚠️ It is recommended to update to this version. The runtime engine is stability.

Bug Fixes

• Remove development environment error logging for syntax rule creation _{^{@1aron a26f6d2}}

Runtime

• Runtime class name counter overflow caused styles to leak memory _{^{@1aron 7db9bed}}