css

Performance Upgrades

• Fixed extending preset configurations repeatedly @1aron 5e79fc6

Improvements

• Rename config.queries to config.at @1aron 361968f

  export default {
  -    queries: { ... }
  +    at: { ... }
  }
  

• Responsive breakpoints are automatically derived from variables.screen @1aron a71e1ca

Documentation

• Add Language Server @1aron 660f5c6
• New documentation for Monorepo @1aron 12e27d2
• Update Language Service @1aron 970aae3
• Update modes configuration @1aron 0f019a2

Bug Fixes

• Incorrect ordering of rules @BenSeage 288fb54

ESLint

• Causes incorrect class selection when there is only one character, resolved #345 @0Miles ab88ebd #345

Language Server

• An error should not be thrown if the external file does not have a corresponding workspace @1aron aa9c3ed

Tests

Language Server

• Add monorepo tests @1aron 5ecde0d

Bug Fixes

VSCode

• URI paths are inconsistent on Windows OS @1aron ad4612b

New Features

VSCode

• Support monorepo workspaces and multiple configurations @1aron 4b31640

Bug Fixes

VSCode

• Cannot read properties of undefined @1aron 0028f73

Additions

• Text Wrap, resolved #349 @1aron bce8417 #349
• Utilities for top left right bottom @1aron b10b214

Improvements

• Shorthands containing var functions should not autofill in the solid style, resolved #348 @1aron 659f112 #348

Bug Fixes

• Numeric functions cause incorrect shorthand matching, resolved #347 @1aron cebdcd9 #347

Improvements

VSCode

• Restart and pop up notification when configuration changes @1aron 9f127f4
• Restart and pop up notification when settings are changed @1aron a490d55

Bug Fixes

• Cannot find module 'csstype' or its corresponding type declarations @1aron bc837e7

Bug Fixes

• Color functions are not mapped to color syntax @BenSeage eaa6b5e

Documentation

• Only rgb and hsl are available #346 @1aron 2e59816 #346

Bug Fixes

ESLint

• Missing multi-configuration handling in monorepo @1aron 67ffcca

Bug Fixes

• Cannot set properties of null (setting 'peer') @1aron c6cb9cb

Bug Fixes

• Loading config throws "Cannot find module", fixed #340 @1aron 18bf9e8 #340

Bug Fixes

Runtime

• contentDocument was incorrectly recognized as a non-document @BenSeage 1b101c4

Additions

ESLint

• Setting option classDeclarations for checking variable/member declarations @1aron bd41565
  

Language Service

• Setting options for classAttributes classAttributeBindings classDeclarations classFunctions @1aron ce33aea

VSCode

• Restart Master CSS Language Server @1aron 6d3ad69
  

Bug Fixes

Language Service

• Settings type @1aron 528ecae

Deprecations

ESLint

• Use classAttributes classFunctions instead of classMatching calleeMatching @1aron 4b89f5e

Deprecations

• Refactor config.modeDriver to config.modes @BenSeage 06d67bf

  export default {
  -   modeDriver: 'class',
  +   modes: { dark: 'class', light: 'class' }
  }
  

New Features

• @master/css-explore-config - A utility for exploring a Master CSS config file @1aron e1e3994

Performance Upgrades

• Generate CSS rules using the same CSS instance @1aron 23e63c5
• Simplify semantic rule comparison and manipulation @1aron 738a1ba

Language Service

• Improve CSS generation and hint interaction latency @1aron 7b2c1a2

Additions

• leading alias for line-height @1aron 4f04d20

    <div class="line-height:1">
  + <div class="leading:1">
  

• text-truncate: alias for lines: @1aron 3de751e

    <div class="lines:3">
  + <div class="text-truncate:3">
  

• text-underline-position: @1aron bf0d43c

  <p class="text-underline:front-font">
  <p class="text-underline:under">
  <p class="text-underline:left">
  <p class="text-underline:right">
  

• tracking: alias for letter-spacing: @1aron ffe607f

    <p class="letter-spacing:1">
  + <p class="tracking:1">
  

• Function generatedCSS(config) @1aron 3a12c6e

Language Service

• styles variables and configuration support all features @1aron f89bbfb
• CSS previews and property information for completion items @1aron f3079e7
• Hint @media() @supports() @1aron 8ead242
• Hint animations @1aron ecd6eef
• Hint at-queries @1aron 199e3cb
• Hint config styles @1aron 5faa2af
• Hint for group syntax @1aron a960090
• Hint full keys and abbreviated keys @1aron e9364cf
• Hint pseudo-class and pseudo-element selectors @1aron 9e0ae7f
• Hint rule scope variables like fg:blue @1aron b43049e
• Hint semantics @1aron 307932b
• Hint syntax values @1aron 53ef9fe
• Hints for all global variables @1aron 6661765
• Support Astro class bindings @1aron a847a81
• Support classes within function calls for clsx, styled, cva, and custom @1aron 89cea2d

Improvements

• @all, @print, @screen, @speech should be set in the default query @1aron 53ef2d0
• Rename config.semantics to config.utilities to prevent confusion with component classes @1aron 6728364

  export default {
  -    semantics: { ... },
  +    utilities: { ... }
  }
  

• Rules API @1aron 02f033d

Language Service

• Hints are based on the part of the syntax where the cursor is located @1aron 409190f
• Preview final CSS generation with configuration @1aron 0c09d6e
• Rely on reliable selector sources and improve prompt item ordering @1aron ff923b7
• Sorting completion items @1aron d167afa
• Sorting values @1aron f12521d
• Use color-rgba to convert all color spaces to rgba @1aron 6b3e527

Bug Fixes

• text-decoration has no effect in Safari @1aron 287c7a3
• Cannot read properties of undefined (reading 'sheet') @1aron 09b4227
• CSS declarations with vendor prefixes are not preferred, fixed #342 @1aron 2afedb6 #342
• Incorrect class count @BenSeage a514b25
• Negative variables are not scoped to rules @1aron 5412eb9
• Unstable rule scope variable groups @1aron 6129e5a
• Update css.customConfig on refresh @1aron b84e912

Core

• Value in config.variables is not recognized when it is zero, resolved #335 @0Miles 5f2caa5 #335

ESLint

• Flat config uses "languageOptions.parserOptions" to specify parser options, fixed #339 @1aron 6de5a47 #339
• Template literal parsing @0Miles 34b7414

Language Service

• Class is incorrectly positioned in literals @1aron cab746e
• Color editing results are inconsistent with syntax @1aron e5e1668
• Incorrect syntax highlighting, resolved 343 @0Miles 16731e3
• Instance regex capture excess range @0Miles 83f5636
• Missing handling of | syntax delimiters resulted in no rendering of colors @1aron 54e0321
• Missing handling of color value component in function @1aron 6598bed
• Null reference exception in renderSyntaxColors function @0Miles 1d9277e
• Re-type and no hint values @1aron 28d3cb1
• Single quotes in classes are mistaken for syntax @1aron 415b559
• Supports various assignments @1aron 531c3c6
• Syntax highlight @0Miles 7772d79
• Typing blank will not trigger the next hint @1aron ce73d77
• Wrong color syntax but rendering colors @1aron 0b8fb5d

VSCode Language Service

• Vue syntax highlight @0Miles d56a357

Deprecations

• .hide utility class in favor of .hidden @1aron 43499ad

  - <div class="hide">
  + <div class="hidden">
  

• lh: alias in favor of line-h: @1aron 8e7dcb2

  - <div class="lh:1">
  + <div class="line-h:1">
  + <div class="leading:1">
  

• Unused ::meter @1aron ffa5251

Tests

Language Service

• Make sure the configuration is loaded @1aron d4e401b

⚠️ This release requires some naming changes.

Performance Upgrades

• Parse at-tokens and manipulate abstract syntax nodes @1aron 947bb5a

ESLint

• Move heavy collision checking to workers @1aron 0476a2a

Additions

• Function to check if rules are duplicated @1aron f9b958c
• Function to compare rule modes @1aron 59d99f8
• Function to compare rule queries @1aron 0f91468
• Function to compare rule selectors @1aron f1c9baa
• Function to compare rule states @1aron b6f97dc

Improvements

• Rename config.mediaQueries to config.queries and share it with @media @supports @container @1aron 2f561d9

  export default {
  -   mediaQueries: {
  +   queries: {
          tablet: 1024, 
          desktop: 1280,
  -       landscape: '(orientation:landscape)',
  +       landscape: 'media (orientation:landscape)'
      }
  }
  

• Rename config.themeDriver to config.modeDriver @1aron 67f2c2c

  export default {
  -   themeDriver: 'class',
  +   modeDriver: 'class',
  }
  

Bug Fixes

Extractor

• Cannot use import statement outside a module @1aron 618704a

Upgrades

• Master Colors v2 @1aron 2a63baf

Bug Fixes

Svelte

• Refresh triggered on initialization @BenSeage 28a1435

Theme Mode ( Stable v1 )

Renamed ThemeServiceProvider to ThemeModeProvider and separated it into a new repository "master-co/theme-mode" and package "theme-mode" to prevent it from hindering the progress of future Master CSS.

This package automatically switches themes using class="" and color-scheme:; that's it.

For example:

npm install @master/theme-mode.react

-import { ThemeServiceProvider } from '@master/css.react'
+import ThemeModeProvider from '@master/theme-mode.react'

export default function App({ children }) {
    return (
-       <ThemeServiceProvider options={{ default: 'system' }}>{children}</ThemeModeProvider>
+       <ThemeModeProvider preference='system'>{children}</ThemeModeProvider>
    )
}

• The Theme Mode now supports @master/theme-mode.svelte.

Normal CSS ( Stable v2 )

The packages/normal.css is separated into a new repository "master-co/normal.css"

Bug Fixes

ESLint

• Cannot read properties of null (reading 'type') @0Miles 1669ac0

Runtime

• Original style#master was removed when refreshing config @1aron b1f44f1

Deprecations

React

• Remove ThemeServiceProvider and use @master/theme-mode.react instead @1aron d823b83

Theme Service

• Use theme-mode instead @1aron d5208ba

Vue

• Remove ThemeServiceProvider and use @master/theme-mode.vue instead @1aron 72f4cf2

To accommodate this release, you'll need to adjust the path of importing styled. We have separated the styled into a new repository at https://github.com/master-co/styled to prevent it from hindering the progress of the Master CSS in the future.

Additions

• @container queries support, resolved #43 @1aron 27a389a #43

  <div class="font:32@container|sidebar(min-width:800px)">
  

  @container sidebar (min-width:800px) {
      .font\:32\@container\|sidebar\(min-width\:800px\) {
          font-size: 2rem
      }
  }
  

  ⚠️ This is an experimental release and we have not yet designed a smooth syntax for @container.

Improvements

React

• styled is separated into @master/styled.react @1aron d07a2aa

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

Vue

• styled is separated into @master/styled.vue @1aron 01aa33a

  -import { styled } from '@master/css.vue'
  -import styled from '@master/styled.vue'
  

New Features

• Master Colors @1aron 02bf77a

  Starting from this version, the Master CSS color palette has been spun off into a new product called Master Colors. This release is specifically targeted toward users who prefer v1 colors, and separating it will facilitate the future progress of Master CSS.

  You can also install @master/colors from NPM if needed and access the colors object:

  import colors from '@master/colors'
  
  console.log(colors.blue[60])
  

Documentation

• Use default colors @1aron 13d0230