Bot releases are hidden (Show)
Published by 1aron almost 2 years ago
Performance Improvements
- remove
propNamefor less output size (78f5efa)
Published by 1aron almost 2 years ago
Published by 1aron almost 2 years ago
Bug Fixes
- colorful style with
inheritvalue (4cf8095)
Published by 1aron almost 2 years ago
Features
-
global values (859d4d6)
Previously
config.valuesonly supported default rules such asBoxShadow,FontFamily.Now, tokens starting with a non-capital letter are global:
/* master.css.js */ /** @type {import('@master/css').MasterCSSConfig} */ export default { values: { '2x': '.5rem', '3x': '.75rem', '4x': '1rem', FontFamily: { sans: 'Inter var, Noto Sans TC, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue', mono: 'Fira Code VF, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace' } }, ... }Then mark it directly in the HTML:
<div class="mt:2x w:4x@sm p:3x font:mono">...</div>
Published by 1aron almost 2 years ago
Bug Fixes
-
text-sizediff (327013b)
Published by 1aron almost 2 years ago
Features
-
counter-resetstyle (e8aafc5)
Published by 1aron almost 2 years ago
Bug Fixes
- tokenize extended colors with default color (74b4278)
Published by 1aron almost 2 years ago
Features
- access extended color tokens (b727379)
Published by 1aron almost 2 years ago
Bug Fixes
- document observed by default (d408a9b)
Published by 1aron almost 2 years ago
Bug Fixes
- if
options.rootexists, autoobserve()it (9853a4c)
Published by 1aron almost 2 years ago
Features
-
Support
colorsgroup configuration and access extendedconfig.colorsto simplify markup (b4b053b)Set the foreground color of the code by theme:
module.exports = { themes: { light: { colors: { - 'code-fade': defaultColors.slate['60'], - 'code-pink': defaultColors.pink['50'], + code: { + fade: 'slate-60', + pink: 'pink-50', + } }, }, dark: { colors: { - 'code-fade': defaultColors.gray['55'], - 'code-pink': defaultColors.pink['70'], + code: { + fade: 'gray-55', + pink: 'pink-70', + } } } } }and it only needs to be marked once:
<span class="fg:code-fade">{}</span> <span class="fg:code-pink">div</span>⚠️ Group configuration
.colorsdoesn't support nesting to avoid designs where a single class name is too long and increases the size of the markup, but you can still do this with other Design Tokens:<div className={`fg:${tokens.button.cta.foreground.color}`}>...</div>
Published by 1aron almost 2 years ago
Bug Fixes
- init MasterCSS (92f4f63)
Published by 1aron almost 2 years ago
Using new MasterCSS to initialize uniformly, and preset different behaviors according to ESM, CJS, IIFE
Remove init(config) API and use new MasterCSS(options) instead
import config from './master.css'
- import { init } from '@master/css'
+ import MasterCSS from '@master/css'
- export const css = init(config)
+ export const css = new MasterCSS({ config })
Complete initial code master.js:
import config from './master.css'
import MasterCSS from '@master/css'
export const css = new MasterCSS({ config })
Create MasterCSS configurable options:
export declare type MasterCSSOptions = {
config?: MasterCSSConfig // your custom config
override?: boolean // not to extend default config
observe?: boolean // automatically observe document after initialization
}
Import the output bundle in IIFE format in the browser, it'll automatically initialize
<head>
<script src="https://cdn.master.co/[email protected]"></script>
</head>
You can also customize your configuration directly in HTML before importing:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.masterCSSConfig = {
colors: {
primary: '#ff0000'
}
}
</script>
<script src="https://cdn.master.co/[email protected]"></script>
</head>
<body>
<h1 class="font:40 font:heavy italic m:50 text:center fg:primary">Hello World</h1>
</body>
</html>
Published by 1aron almost 2 years ago
Bug Fixes
- instantly initialize when the script is directly imported into the browser (58a31a6)
Published by 1aron almost 2 years ago
Bug Fixes
- remove default
scheme.preference, which should be customized by the developer (1488475)
Published by 1aron almost 2 years ago
Features
-
remove
configure()api, preset extend behavior and provideoverrideconfig (3562216)/* master.css.js */ - import { configure } from '@master/css' - module.exports = configure({ + module.exports = { .... }
Published by 1aron almost 2 years ago
Bug Fixes
-
.cjs,.mjs(2105d7d)
Published by 1aron almost 2 years ago
Bug Fixes
- esm (da83636)
Published by 1aron almost 2 years ago