Bot releases are hidden (Show)
Published by 1aron almost 2 years ago
propName
for less output size (78f5efa)Published by 1aron almost 2 years ago
Published by 1aron almost 2 years ago
inherit
value (4cf8095)Published by 1aron almost 2 years ago
global values (859d4d6)
Previously config.values
only supported default rules such as BoxShadow
, 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
text-size
diff (327013b)Published by 1aron almost 2 years ago
counter-reset
style (e8aafc5)Published by 1aron almost 2 years ago
Published by 1aron almost 2 years ago
Published by 1aron almost 2 years ago
Published by 1aron almost 2 years ago
options.root
exists, auto observe()
it (9853a4c)Published by 1aron almost 2 years ago
Support colors
group configuration and access extended config.colors
to 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 .colors
doesn'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
Published by 1aron almost 2 years ago
Using new MasterCSS
to initialize uniformly, and preset different behaviors according to ESM
, CJS
, IIFE
init(config)
API and use new MasterCSS(options)
insteadimport 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
}
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
Published by 1aron almost 2 years ago
scheme.preference
, which should be customized by the developer (1488475)Published by 1aron almost 2 years ago
remove configure()
api, preset extend behavior and provide override
config (3562216)
/* master.css.js */
- import { configure } from '@master/css'
- module.exports = configure({
+ module.exports = {
....
}
Published by 1aron almost 2 years ago
.cjs
, .mjs
(2105d7d)Published by 1aron almost 2 years ago
Published by 1aron almost 2 years ago