Releases: master-co/css
v2.0.0-rc.27
New Features
Performance Upgrades
- Generate CSS rules using the same CSS instance @1aron 23e63c5
- Simplify semantic rule comparison and manipulation @1aron 738a1ba
Language Service
Additions
leadingalias forline-height@1aron 4f04d20<div class="line-height:1"> + <div class="leading:1">
text-truncate:alias forlines:@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 forletter-spacing:@1aron ffe607f<p class="letter-spacing:1"> + <p class="tracking:1">
- Function
generatedCSS(config)@1aron 3a12c6e
Language Service
stylesvariables 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,@speechshould be set in the default query @1aron 53ef2d0- Rename
config.semanticstoconfig.utilitiesto prevent confusion with component classes @1aron 6728364export 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-rgbato convert all color spaces torgba@1aron 6b3e527
Bug Fixes
text-decorationhas 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.customConfigon refresh @1aron b84e912
Core
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](7772d79...
Contributors
Assets 3
v2.0.0-rc.26
Performance Upgrades
ESLint
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.mediaQueriestoconfig.queriesand share it with@media@supports@container@1aron 2f561d9export default { - mediaQueries: { + queries: { tablet: 1024, desktop: 1280, - landscape: '(orientation:landscape)', + landscape: 'media (orientation:landscape)' } } -
Rename
config.themeDrivertoconfig.modeDriver@1aron 67f2c2cexport default { - themeDriver: 'class', + modeDriver: 'class', }
Contributors
Assets 3
v2.0.0-rc.25
Contributors
Assets 3
v2.0.0-rc.24
Contributors
Assets 3
v2.0.0-rc.23
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
Runtime
Deprecations
React
Theme Service
Vue
Contributors
Assets 3
v2.0.0-rc.22
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
-
@containerqueries 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
-
styledis separated into@master/styled.react@1aron d07a2aa-import { styled } from '@master/css.react' -import styled from '@master/styled.react'
Vue
Contributors
Assets 4
v2.0.0-rc.21
New Features
-
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/colorsfrom NPM if needed and access thecolorsobject:import colors from '@master/colors' console.log(colors.blue[60])
