v2.0.0-beta.215

‼️ 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}}

v2.0.0-beta.214

‼️ 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}}

v2.0.0-beta.213

Bug Fixes

• Prevent % or indeterminate CSS variables from converting units _{^{51f4118 @BenSeage}}

v2.0.0-beta.212

📢 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}}

v2.0.0-beta.211

Improvements

• Prefer animation names over variables, resolved #317 _{^{5fedc0b @BenSeage}}

v2.0.0-beta.210

📢 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}}

v2.0.0-beta.209

Bug Fixes

• All elements under the pre node are not parsed _{^{9d43396 @BenSeage}}

Documentation

• New Spacing documentation _{^{6a6846a @1aron}}

v2.0.0-beta.208

New Features

• Multiplier unit x and config.baseUnit #316 _{^{51bf4a2 @BenSeage}}

  For example, with the default baseUnit: 4, the spacing scale 1x, 2x, … will be 4, 8, ….

  <div class="m:4x"></div>

  Generated CSS:

  .m\:4x {
      margin: 1rem;
  }

  How is 1rem calculated?

  4x = 4(multiplier)*4(base unit) = 16px, 16px / 16(root size) = 1rem

  So you don't need to define the spacing scale one by one:

  export default {
  -    variables: {
  -        spacing: {
  -            '1x': 4,
  -            '2x': 8,
  -            '3x': 12,
  -            ...,
  -            '40x': 160
  -        }
  -    }
  }

v2.0.0-beta.207

New Features

• Smart conversion of units for factors in calc _{^{6b7c08b @BenSeage}}

v2.0.0-beta.206

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}}