css

‼️ This release contains syntactically breaking changes.

Performance Upgrades

Server

• Add decodeHTML function and fix class duplication dd5d607 @1aron

Bug Fixes

Server

• Missing decoding of React-specific ' f1e5a3d @1aron

‼️ This release contains syntactically breaking changes.

Improvements

• Refactor default media queries to use screen sizes tokens dd9dbbb @1aron
• Remove unused variables size and simplify code 5619e66 @1aron
• Rename variables box-size to screen a798d99 @1aron

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

  Apply the screen variables:

  - max-w:md
  + max-w:screen-md
  

• Use size:W|H, max:W|H, min:W|H instead of WxH, max:WxH, min:WxH da8331e @1aron

  - 16x16
  + size:16 = size:4x
  

  - max:16x32
  + max:16|32 = max:4x|8x
  

  - min:16x16
  + min:16 = min:4x
  

  The x separator in 16x32 collides with the latest unit multiplier x, like 16xx32x, and it is unintuitive.

Documentation

• New documentation Screen Sizes ddc8631 @1aron
• Add code to cancel maximum width for media #318 d3835a5 @1aron
• Update Box Decoration Break demos f1a9d2f @1aron

Tests

• Add tests for size, max size, and min size 92238b3 @1aron

Bug Fixes

• Prevent % or indeterminate CSS variables from converting units 51f4118 @BenSeage

This release helps you fix hydration errors caused by progressive rendering in Next.js, Nuxt.js, etc.

Bug Fixes

Server

• Class names from HTML must be decoded beforehand 13e07c7 @1aron

Documentation

• New documentation Development strategies for minimizing CSS bb446d5 @1aron

Improvements

• Prefer animation names over variables, resolved #317 5fedc0b @BenSeage

This release helps you fix hydration errors caused by progressive rendering in Next.js, Nuxt.js, etc.

Bug Fixes

Server

• Use htmlparser2 instead of node-html-parser to reliably parse HTML d213c8b @1aron

Bug Fixes

• All elements under the pre node are not parsed 9d43396 @BenSeage

Documentation

• New Spacing documentation 6a6846a @1aron

New Features

• Multiplier unit x and config.baseUnit #316 51bf4a2

New Features

• Smart conversion of units for factors in calc 6b7c08b @BenSeage

Performance Upgrades

• Share utilities instead of duplicate instantiations 2d263fb @1aron

Deprecations

• Nested variable definitions to align rules 1ad1e7a @1aron

  import { variables } from '@master/css'
  
  /** @type {import('@master/css').Config} */
  export default {
      variables: {
  -      font: {
  -          family: {
  -              sans: ['Inter', ...variables.font.family.sans]
  -          }
  -      }
  +      'font-family': {
  +          sans: ['Inter', ...variables['font-family'].sans]
  +      }
      }
  }
  

Documentation

• Add Box Sizes documentation eb32a18 @1aron
• Improve Fonts documentation a35e6e4 @1aron

Bug Fixes

• Vite execution phase was too late causing Astro to not generate CSS bundles 131260d

Additions

• Assign foreground variables to related rules 87fa6ba @1aron

Normal CSS

• Eliminate click delays on touch devices 1ed5cf6 @1aron
• Make media elements responsive a8171cf @1aron

Improvements

Normal CSS

• Support modular import on demand e7451d9 @1aron

Bug Fixes

• No known conditions for "." specifier in @master/css-server package a38f812 @1aron

Server Nitro

• No such file or directory, open 'D:\a\css\css\packages\server\dist\index.mjs' 9a73eb8 @1aron

Documentation

• Add Remove tap highlight color section 785b145 @1aron
• Improve Global Styles documentation 1c19be1 @1aron

Svelte

• Import the master.css.* config file from the root, resolved #309 44d9930 @1aron

Examples

Svelte

• Import the master.css.* config file from the root, resolved #309 6098004 @1aron

Bug Fixes

Server

• Removing comments can break hydration, fixed #310 9ed3493 @1aron

Examples

• Update Lit example f9d4af7 @1aron

Vue

• Correct path b46b918 @1aron

Performance Upgrades

ESLint

• Use workers to share configuration and speed up expensive style calculations e66a680 @1aron

Documentation

• Update Core documentation 7ce4e33 @1aron

Examples

• Add Angular v17 example 10373e0 @0Tyler
• Upgrade to Angular 17 + Progressive Rendering f680eb2 @0Tyler

Additions

• class RuntimeCSS d54ad61 @1aron

  - import { MasterCSS } from '@master/css';
  + import { RuntimeCSS } from '@master/css';
  
  - const css = new MasterCSS(config).observe(document)
  + const css = new RuntimeCSS(document, config).observe() 
  

  New APIs:

  - window.masterCSS
  + window.runtimeCSS
  - window.masterCSSs
  + window.runtimeCSSs 
  

Bug Fixes

• Incorrect rule index when parsing pre-generated CSS text b4e8aad @BenSeage

Additions

• Autofill solid to border-(left|right|top|bottom|x|y) syntax fe55383 @1aron

Bug Fixes

• Typo mix-blend-mode, shape-image-threshold d8b1eda @1aron

Performance Upgrades

• Create CSSStyleRule based on different themes, resolved #303 #301 820705e @BenSeage

Improvements

• Autofill solid to outline and border, resolved #302 2c889a0 @lesha1201 @1aron
• Merge CoreLayer to Layer 5f3989e @1aron
• Unify rules and variables using kebab-case, resolved #305 b4582db @1aron

  /** @type {import('@master/css').Config} */
  export default {
      variables: {
  -       fontFamily: {
  -           'open-sans': 'Open Sans' 
  -       }
  +      font: {
  +          family: {
  +              'open-sans': 'Open Sans' 
  +          }
  +      }
      }
  }
  

ESLint

• Rules schema 20a093b @0Miles

Bug Fixes

CSS

• override doesn't work cab1bd0 @lesha1201

Documentation

• Update font-family documentation 85a20fe @1aron
• Update fonts documentation 8e4fe89 @1aron

Reversions

• Revert Improve(Normal CSS): Preset outline and border style `0 solid` #299 `text` e8b515f @1aron @lesha1201 #299

Improvements

• Make $(variable) have a fallback mechanism 9da7d35 @BenSeage
  • Unit tests: https://github.com/master-co/css/commit/9da7d35325c128da611311e0bd772f5c053bfd06#diff-66c679ef9403738072129be3d80ccfd420e2004c6afe5434506ed87b5c37535aR5-R21
• Rename css.insertRules to css.render 2b454bd @1aron

Additions

• sizing design tokens for all related syntax 4eae683 @1aron

Bug Fixes

• initRuntime() is missing the default document 2bb34d9 @1aron

ESLint

• A template literal with interpolation cannot be sorted correctly 07daad2 @0Miles

Improvements

• No need to check for the existence of a syntax value 6eb8db5 @BenSeage

Bug Fixes

• Usage is not cleared when disconnecting 6cd711b @BenSeage

Upgrades

Play

• Forgot to upgrade configuration variables b3fd8cd @1aron