Skip to content

Commit 092c464

Browse files
Antonio-LagunaAntonio-Laguna
authored
Adding new option to control design-token function name (#559)
* Adding new option to control `design-token` function name * Fixing message * Fixing condition * Renaming option * Adding option to change the at-rule too * Renaming options for better future-proof compatibility * Fixing README
1 parent e2fca57 commit 092c464

12 files changed

+160
-7
lines changed

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,4 +101,16 @@ postcssTape(plugin)({
101101
}
102102
}
103103
},
104+
'examples/example-custom-value-function-name': {
105+
message: 'minimal example with { valueFunctionName: "token" }',
106+
options: {
107+
valueFunctionName: 'token'
108+
}
109+
},
110+
'examples/example-custom-import-at-rule-name': {
111+
message: 'minimal example with { importAtRuleName: "tokens" }',
112+
options: {
113+
importAtRuleName: 'tokens'
114+
}
115+
},
104116
});

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Changes to PostCSS Design Tokens
22

3+
### Unreleased
4+
5+
- Added `valueFunctionName` option to control the `design-token` function name.
6+
- Added `importAtRuleName` option to control the `design-tokens` at-rule name.
7+
38
### 1.0.0 (May 23, 2022)
49

510
- Initial version

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

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,34 @@ Use `style-dictionary3` in `@design-tokens` rules to pick this format.
7474

7575
## Options
7676

77+
### importAtRuleName
78+
79+
The `importAtRuleName` option allows you to set a custom alias for `@design-tokens`.
80+
81+
```js
82+
postcssDesignTokens({ importAtRuleName: 'tokens' })
83+
```
84+
85+
```pcss
86+
@tokens url('./tokens.json') format('style-dictionary3');
87+
88+
.foo {
89+
color: design-token('color.background.primary');
90+
padding-top: design-token('size.spacing.small');
91+
padding-left: design-token('size.spacing.small' to px);
92+
padding-bottom: design-token('size.spacing.small' to rem);
93+
}
94+
95+
/* becomes */
96+
97+
.foo {
98+
color: #fff;
99+
padding-top: 16px;
100+
padding-left: 16px;
101+
padding-bottom: 1rem;
102+
}
103+
```
104+
77105
### is
78106

79107
The `is` option determines which design tokens are used.
@@ -160,6 +188,34 @@ postcssDesignTokens({ is: ['dark'] })
160188
}
161189
```
162190

191+
### valueFunctionName
192+
193+
The `valueFunctionName` option allows you to set a custom alias for `design-token`.
194+
195+
```js
196+
postcssDesignTokens({ valueFunctionName: 'token' })
197+
```
198+
199+
```pcss
200+
@design-tokens url('./tokens.json') format('style-dictionary3');
201+
202+
.foo {
203+
color: token('color.background.primary');
204+
padding-top: token('size.spacing.small');
205+
padding-left: token('size.spacing.small' to px);
206+
padding-bottom: token('size.spacing.small' to rem);
207+
}
208+
209+
/* becomes */
210+
211+
.foo {
212+
color: #fff;
213+
padding-top: 16px;
214+
padding-left: 16px;
215+
padding-bottom: 1rem;
216+
}
217+
```
218+
163219
### unitsAndValues
164220

165221
The `unitsAndValues` option allows you to control some aspects of how design values are converted to CSS.

‎plugins/postcss-design-tokens/docs/README.md

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,22 @@ Use `style-dictionary3` in `@design-tokens` rules to pick this format.
4444

4545
## Options
4646

47+
### importAtRuleName
48+
49+
The `importAtRuleName` option allows you to set a custom alias for `@design-tokens`.
50+
51+
```js
52+
<exportName>({ importAtRuleName: 'tokens' })
53+
```
54+
55+
```pcss
56+
<example-custom-import-at-rule-name.css>
57+
58+
/* becomes */
59+
60+
<example-custom-import-at-rule-name.expect.css>
61+
```
62+
4763
### is
4864

4965
The `is` option determines which design tokens are used.
@@ -99,6 +115,22 @@ By default only `@design-tokens` without any `when('foo')` conditions are used.
99115
<example-conditional.dark.expect.css>
100116
```
101117

118+
### valueFunctionName
119+
120+
The `valueFunctionName` option allows you to set a custom alias for `design-token`.
121+
122+
```js
123+
<exportName>({ valueFunctionName: 'token' })
124+
```
125+
126+
```pcss
127+
<example-custom-value-function-name.css>
128+
129+
/* becomes */
130+
131+
<example-custom-value-function-name.expect.css>
132+
```
133+
102134
### unitsAndValues
103135

104136
The `unitsAndValues` option allows you to control some aspects of how design values are converted to CSS.

‎plugins/postcss-design-tokens/src/constants.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,4 @@
11
// a random, but shared default condition
22
export const DEFAULT_CONDITION = '6b4e71e7-4787-42f7-a092-8684961895db';
3+
export const DEFAULT_VALUE_FUNCTION_NAME = 'design-token';
4+
export const DEFAULT_IMPORT_AT_RULE_NAME = 'design-tokens';

‎plugins/postcss-design-tokens/src/index.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
2323
Once: async (root, { result }) => {
2424
const designTokenAtRules: Array<{filePath: string, params: string, node: Node}> = [];
2525
root.walkAtRules((atRule) => {
26-
if (atRule.name.toLowerCase() !== 'design-tokens') {
26+
if (atRule.name.toLowerCase() !== options.importAtRuleName) {
2727
return;
2828
}
2929

@@ -65,7 +65,7 @@ const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
6565
}
6666
},
6767
Declaration(decl, { result }) {
68-
if (decl.value.toLowerCase().indexOf('design-token') === -1) {
68+
if (!decl.value.toLowerCase().includes(options.valueFunctionName)) {
6969
return;
7070
}
7171

‎plugins/postcss-design-tokens/src/options.ts

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,35 @@
1-
import { DEFAULT_CONDITION } from './constants';
1+
import {
2+
DEFAULT_CONDITION,
3+
DEFAULT_VALUE_FUNCTION_NAME,
4+
DEFAULT_IMPORT_AT_RULE_NAME,
5+
} from './constants';
26

37
export type pluginOptions = {
8+
importAtRuleName: string,
49
is?: Array<string>
510
unitsAndValues?: {
611
rootFontSize?: number
7-
}
12+
},
13+
valueFunctionName: string,
814
}
915

1016
export type parsedPluginOptions = {
11-
is: Array<string>
17+
importAtRuleName: string,
18+
is: Array<string>,
1219
unitsAndValues: {
1320
rootFontSize: number
14-
}
21+
},
22+
valueFunctionName: string,
1523
}
1624

1725
export function parsePluginOptions(opts?: pluginOptions): parsedPluginOptions {
1826
const options: parsedPluginOptions = {
27+
importAtRuleName: DEFAULT_IMPORT_AT_RULE_NAME,
1928
is: [DEFAULT_CONDITION],
2029
unitsAndValues: {
2130
rootFontSize: 16,
2231
},
32+
valueFunctionName: DEFAULT_VALUE_FUNCTION_NAME,
2333
};
2434

2535
if (!opts) {
@@ -42,6 +52,14 @@ export function parsePluginOptions(opts?: pluginOptions): parsedPluginOptions {
4252
options.unitsAndValues.rootFontSize = opts.unitsAndValues.rootFontSize;
4353
}
4454

55+
if (typeof opts.valueFunctionName === 'string') {
56+
options.valueFunctionName = opts.valueFunctionName;
57+
}
58+
59+
if (typeof opts.importAtRuleName === 'string') {
60+
options.importAtRuleName = opts.importAtRuleName;
61+
}
62+
4563
return options;
4664
}
4765

‎plugins/postcss-design-tokens/src/values.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export function onCSSValue(tokens: Map<string, Token>, result: Result, decl: Dec
77
const valueAST = valueParser(decl.value);
88

99
valueAST.walk(node => {
10-
if (node.type !== 'function' || node.value.toLowerCase() !== 'design-token') {
10+
if (node.type !== 'function' || node.value.toLowerCase() !== opts.valueFunctionName) {
1111
return;
1212
}
1313

‎plugins/postcss-design-tokens/test/examples/example-custom-import-at-rule-name.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@tokens url('./tokens.json') format('style-dictionary3');
2+
3+
.foo {
4+
color: design-token('color.background.primary');
5+
padding-top: design-token('size.spacing.small');
6+
padding-left: design-token('size.spacing.small' to px);
7+
padding-bottom: design-token('size.spacing.small' to rem);
8+
}

‎plugins/postcss-design-tokens/test/examples/example-custom-import-at-rule-name.expect.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.foo {
2+
color: #fff;
3+
padding-top: 16px;
4+
padding-left: 16px;
5+
padding-bottom: 1rem;
6+
}

‎plugins/postcss-design-tokens/test/examples/example-custom-value-function-name.css

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
@design-tokens url('./tokens.json') format('style-dictionary3');
2+
3+
.foo {
4+
color: token('color.background.primary');
5+
padding-top: token('size.spacing.small');
6+
padding-left: token('size.spacing.small' to px);
7+
padding-bottom: token('size.spacing.small' to rem);
8+
}

‎plugins/postcss-design-tokens/test/examples/example-custom-value-function-name.expect.css

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
.foo {
2+
color: #fff;
3+
padding-top: 16px;
4+
padding-left: 16px;
5+
padding-bottom: 1rem;
6+
}

0 commit comments

Comments
 (0)