Skip to content

Commit 2c75263

Browse files
romainmenkeromainmenke
authored
design tokens (#304)
* design tokens * wip * wip * wip * wip * wip * wip * wip * feedback * gather tokens first * feedback * wip * implement dereferencing * error handling * typo * design tokens : unit conversion (#388) * update docs * add syntax docs * update docs * better docs gen * cleanup * more docs * more docs * cleanup * improve the typing * more examples * stricter value and plugin option handling * more docs * fix * document VSCode extension * clarify multiple when * cleanup
1 parent df0db56 commit 2c75263

File tree

83 files changed

+2335
-31
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

83 files changed

+2335
-31
lines changed

‎.github/bin/generate-docs/readme.mjs

Lines changed: 13 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -28,10 +28,14 @@ installDoc = installDoc.replace(`<!-- Available Variables: -->
2828
// Insert "Header" section
2929
installDoc = installDoc.replace('<header>', `# <humanReadableName> [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
3030
31-
[<img alt="npm version" src="https://img.shields.io/npm/v/<packageName>.svg" height="20">][npm-url]
32-
[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/<cssdbId>.svg" height="20">][css-url]
33-
[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
34-
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]`);
31+
` + `[<img alt="npm version" src="https://img.shields.io/npm/v/<packageName>.svg" height="20">][npm-url] ` +
32+
`${
33+
packageJSONInfo.csstools?.cssdbId ?
34+
`[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/<cssdbId>.svg" height="20">][css-url] ` :
35+
''
36+
}` +
37+
`[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] ` +
38+
`[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]`);
3539

3640
// Insert "Usage" section
3741
installDoc = installDoc.replace('<usage>', `## Usage
@@ -62,7 +66,11 @@ instructions for:
6266

6367
// Insert "Link List" section
6468
installDoc = installDoc.replace('<link-list>', `[cli-url]: https://github.com/csstools/postcss-plugins/actions/workflows/test.yml?query=workflow/test
65-
[css-url]: https://cssdb.org/#<cssdbId>
69+
${
70+
packageJSONInfo.csstools?.cssdbId ?
71+
`[css-url]: https://cssdb.org/#<cssdbId>` :
72+
''
73+
}
6674
[discord]: https://discord.gg/bUadyRwkJS
6775
[npm-url]: https://www.npmjs.com/package/<packageName>
6876

‎package-lock.json

Lines changed: 46 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/postcss-base-plugin/README.md

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,8 @@
11
# PostCSS Base Plugin [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
22

3-
[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-base-plugin.svg" height="20">][npm-url]
4-
[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/TODO.svg" height="20">][css-url]
5-
[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
6-
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
3+
[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-base-plugin.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/TODO.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
74

8-
[PostCSS Base Plugin] lets easily create new plugins following some [CSS Specification].
5+
[PostCSS Base Plugin] lets you easily create new plugins following some [CSS Specification].
96

107
```pcss
118
.foo {

‎plugins/postcss-base-plugin/docs/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414

1515
<header>
1616

17-
[<humanReadableName>] lets easily create new plugins following some [CSS Specification].
17+
[<humanReadableName>] lets you easily create new plugins following some [CSS Specification].
1818

1919
```pcss
2020
<example.css>

‎plugins/postcss-cascade-layers/README.md

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
# PostCSS Cascade Layers [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
22

3-
[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-cascade-layers.svg" height="20">][npm-url]
4-
[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/cascade-layers.svg" height="20">][css-url]
5-
[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
6-
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
3+
[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-cascade-layers.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/cascade-layers.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
74

85
[PostCSS Cascade Layers] lets you use `@layer` following the [Cascade Layers Specification]. For more information on layers, checkout [A Complete Guide to CSS Cascade Layers] by Miriam Suzanne.
96

‎plugins/postcss-color-function/README.md

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
# PostCSS Color Function [<img src="https://postcss.github.io/postcss/logo.svg" alt="PostCSS Logo" width="90" height="90" align="right">][postcss]
22

3-
[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-color-function.svg" height="20">][npm-url]
4-
[<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/color-function.svg" height="20">][css-url]
5-
[<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url]
6-
[<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
3+
[<img alt="npm version" src="https://img.shields.io/npm/v/@csstools/postcss-color-function.svg" height="20">][npm-url] [<img alt="CSS Standard Status" src="https://cssdb.org/images/badges/color-function.svg" height="20">][css-url] [<img alt="Build Status" src="https://github.com/csstools/postcss-plugins/workflows/test/badge.svg" height="20">][cli-url] [<img alt="Discord" src="https://shields.io/badge/Discord-5865F2?logo=discord&logoColor=white">][discord]
74

85
[PostCSS Color Function] lets you use the `color` function in
96
CSS, following the [CSS Color] specification.

‎plugins/postcss-design-tokens/.gitignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
node_modules
2+
package-lock.json
3+
yarn.lock
4+
*.result.css
5+
*.result.css.map
6+
dist/*

‎plugins/postcss-design-tokens/.nvmrc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
v16.13.1

‎plugins/postcss-design-tokens/.tape.mjs

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import postcssTape from '../../packages/postcss-tape/dist/index.mjs';
2+
import plugin from '@csstools/postcss-design-tokens';
3+
import postcssImport from 'postcss-import';
4+
5+
postcssTape(plugin)({
6+
basic: {
7+
message: "supports basic usage",
8+
plugins: [
9+
postcssImport(),
10+
plugin()
11+
]
12+
},
13+
'basic:rootFontSize-20': {
14+
message: "supports basic usage with { unitsAndValues { rootFontSize: 20 } }",
15+
plugins: [
16+
postcssImport(),
17+
plugin({
18+
unitsAndValues: {
19+
rootFontSize: 20
20+
}
21+
})
22+
]
23+
},
24+
'basic:rootFontSize-NaN': {
25+
message: "supports basic usage with { unitsAndValues { rootFontSize: NaN } }",
26+
plugins: [
27+
postcssImport(),
28+
plugin({
29+
unitsAndValues: {
30+
rootFontSize: NaN
31+
}
32+
})
33+
]
34+
},
35+
'basic:rootFontSize-invalid': {
36+
message: "supports basic usage with { unitsAndValues { rootFontSize: invalid } }",
37+
plugins: [
38+
postcssImport(),
39+
plugin({
40+
unitsAndValues: {
41+
rootFontSize: 'invalid'
42+
}
43+
})
44+
]
45+
},
46+
'errors': {
47+
message: "handles issues correctly",
48+
options: {},
49+
warnings: 4
50+
},
51+
'is': {
52+
message: "supports basic usage with { is ['dark', 'tablet', 'branded-green'] }",
53+
options: {
54+
is: ['dark', 'tablet', 'branded-green']
55+
}
56+
},
57+
'value-parsing-a': {
58+
message: "supports value parsing (A)",
59+
},
60+
'value-parsing-b': {
61+
message: "supports value parsing (B)",
62+
},
63+
'value-parsing-c': {
64+
message: "supports value parsing (C)",
65+
warnings: 2
66+
},
67+
'value-parsing-d': {
68+
message: "supports value parsing (D)",
69+
warnings: 2
70+
},
71+
'value-parsing-e': {
72+
message: "supports value parsing (E)",
73+
warnings: 2
74+
},
75+
'value-parsing-f': {
76+
message: "supports value parsing (F)",
77+
},
78+
'value-parsing-g': {
79+
message: "supports value parsing (G)",
80+
warnings: 2
81+
},
82+
'examples/example': {
83+
message: 'minimal example',
84+
options: {},
85+
},
86+
'examples/example-conditional': {
87+
message: 'minimal example with conditional imports : default',
88+
options: {},
89+
},
90+
'examples/example-conditional:dark': {
91+
message: 'minimal example with conditional imports : dark',
92+
options: {
93+
is: ['dark']
94+
},
95+
},
96+
'examples/example:rootFontSize-20': {
97+
message: "minimal example with { unitsAndValues { rootFontSize: 20 } }",
98+
options: {
99+
unitsAndValues: {
100+
rootFontSize: 20
101+
}
102+
}
103+
},
104+
});

‎plugins/postcss-design-tokens/CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# Changes to PostCSS Design Tokens
2+
3+
### 1.0.0 (Unreleased)
4+
5+
- Initial version

0 commit comments

Comments
 (0)