Releases: master-co/css
Releases · master-co/css
v2.0.0-rc.48
New Features
Cascade layers, resolved #354 @1aron 92277ab
The new cascade layers allows you to manage styles and their precedences more systematically. You can just write your classes as usual without having to worry about style conflicts:
<body class="list-style:none_ul@base">
<button class="btn flex">Submit</button>
<ul class="@fade|1s">…</ul>
<article class="text:16_p@preset">
<p>…</p>
</article>
</body>export default {
variables: {
primary: {
'@light': '#000000',
'@dark': '#ffffff'
}
},
components: {
btn: 'inline-flex bg:primary'
}
}Generated CSS:
@layer base, theme, preset, components, general;
@layer base {
.list-style\:none_ul\@base ul {
list-style: none
}
}
@layer theme {
.light,
:root {
--primary: 0 0 0
}
.dark {
--primary: 255 255 255
}
}
@layer preset {
.text\:16_p\@preset p {
font-size: 1rem;
line-height: calc(1rem + 0.875em)
}
}
@layer components {
.btn {
display: inline-flex;
background-color: rgb(var(--primary))
}
}
@layer general {
.flex {
display: flex
}
.\@fade\|1s {
animation: fade 1s
}
}
@keyframes fade {
0% {
opacity: 0
}
to {
opacity: 1
}
}Stateful Components, resolved #258
Now you can give abstract components states, such as btn-sm@<sm
<button class="btn btn-md btn-sm@<sm …">Submit</button>export default {
components: {
btn: {
'': '… inline-flex font:semibold',
'sm': 'font:12 h:8x px:3x r:6',
'md': 'font:14 h:10x px:4x r:6',
}
}
}Generated CSS:
@layer base, theme, preset, components, general;
@layer components {
.btn-md {
font-size: 0.875rem;
height: 2.5rem;
padding-left: 1rem;
padding-right: 1rem;
border-radius: 0.375rem
}
.btn {
display: inline-flex;
font-weight: 600
}
@media (max-width:833.98px) {
.btn-sm\@\<sm {
font-size: 0.75rem;
height: 2rem;
padding-left: 0.75rem;
padding-right: 0.75rem;
border-radius: 0.375rem
}
}
}Improvements
export default {
- syntaxes: { ... }
+ rules: { ... }
}export default {
- styles: { ... }
+ components: { ... }
}React
- Enhance config resolution and lifecycle management @1aron c027f5f
- Optimize CSSRuntimeProvider for improved performance @1aron 1b7eebe
- Prevent the initial secondary rendering of properties @1aron 1577fe9
Runtime
Svelte
Vue
Bug Fixes
Documentation
- Add initial test cases and templates for CSS cascade layers @1aron 0026939
- Add installation instructions for @master/normal.css package @1aron f0b26bf
- Add note on native CSS cascade layers support in browser compatibility guide @1aron b320fc4
- Revise styles guide with an overview and new examples for abstract styles @1aron bb9f55b
- Update button class names to use rounded variants for consistency @1aron cee6213
- Update descriptions for layers and enhance summary in cascade layers guide @1aron 2a44c30
Contributors
0Miles and 1aron
Assets 3
v2.0.0-rc.47
Contributors
1aron
Assets 3
v2.0.0-rc.46
New Features
-
Support ESLint v9 and flat configuration @1aron f0c83a4
// eslint.config.js import css from '@master/eslint-config-css' export default [ css ]
Additions
ESLint
-
Automatically load
master.css.*configuration based on the current working directory @1aron 1578d11// before import { fileURLToPath } from 'node:url' import css from '@master/eslint-config-css' export default [ css, { settings: { '@master/css': { config: fileURLToPath(new URL('master.css', import.meta.url)) } } } ]
// after import css from '@master/eslint-config-css' export default [ css ]
You can still manually specify
master.css.jsif it is not in the current working directory.
Extractor
Improvements
ESLint
-
Import css from
@master/eslint-config-cssinstead of@master/eslint-config-css/flat@1aron 5656195// eslint.config.js - import css from '@master/eslint-config-css/flat' + import css from '@master/eslint-config-css' export default [ css ]
-
Use
plugin:@master/css/legacyinstead of@master/css@1aron ac85723/** @type {import('eslint').Linter.LegacyConfig} */ module.exports = { extends: [ - 'plugin:@master/css', + 'plugin:@master/css/legacy', ] }
Extractor Vite
Bug Fixes
Extractor Vite
Upgrades
Examples
- Add legacy config @1aron 4fde02d
- Improve ESLint v9 example @1aron 304e631
- Update ESLint configuration for React @1aron 0508ec3
- Update ESLint configuration for Svelte @1aron 67ae9cb
- Update ESLint configuration for Vue @1aron ee7615b
- Update Nuxt examples @1aron 60c006d
- Update Svelte example @1aron 73a2e89
- Update Vue examples @1aron 884d210
Contributors
1aron
Assets 3
v2.0.0-rc.45
Contributors
BenSeage
Assets 3
v2.0.0-rc.44
Contributors
1aron
Assets 3
v2.0.0-rc.43
Contributors
1aron
Assets 3
v2.0.0-rc.42
New Features
-
defaultModeconfig option, resolved #357 @1aron 5d07398 #357Default light mode
// master.css.js export default { defaultMode: 'light' // default }
Generated CSS:
.light, :root { --primary: 0 0 0; }
Now using variables with theme mode such as
fg:bluedoes not require addinghtml.lightin advance.-<html class="light"> +<html>
If your application supports light/dark,
html.lightis still required. This change mainly improves the startup experience of projects without theme mode.No default mode
// master.css.js export default { defaultMode: false }
Generated CSS:
.light { --primary: 0 0 0; }
Bug Fixes
Contributors
1aron
Assets 3
v2.0.0-rc.41
v2.0.0-rc.40
v2.0.0-rc.39
Contributors
0Miles, 1aron, and BenSeage