@nordcraft/core 1.0.43 → 1.0.45
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/component/component.types.d.ts +1 -4
- package/dist/component/component.types.js.map +1 -1
- package/dist/styling/customProperty.d.ts +4 -3
- package/dist/styling/customProperty.js +10 -27
- package/dist/styling/customProperty.js.map +1 -1
- package/dist/styling/style.css.js +0 -22
- package/dist/styling/style.css.js.map +1 -1
- package/dist/styling/theme.d.ts +12 -0
- package/dist/styling/theme.js +9 -11
- package/dist/styling/theme.js.map +1 -1
- package/package.json +1 -1
- package/src/component/component.types.ts +1 -4
- package/src/styling/customProperty.test.ts +8 -9
- package/src/styling/customProperty.ts +15 -31
- package/src/styling/style.css.ts +0 -38
- package/src/styling/theme.ts +31 -15
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { ApiStatus, ComponentAPI, LegacyApiStatus } from '../api/apiTypes';
|
|
2
2
|
import type { Formula } from '../formula/formula';
|
|
3
|
-
import type { CssSyntaxNode } from '../styling/customProperty';
|
|
4
3
|
import type { StyleTokenCategory } from '../styling/theme';
|
|
5
4
|
import type { NordcraftMetadata, RequireFields } from '../types';
|
|
6
5
|
interface ListItem {
|
|
@@ -70,9 +69,7 @@ export interface TextNodeModel {
|
|
|
70
69
|
}
|
|
71
70
|
export type CustomPropertyName = `--${string}`;
|
|
72
71
|
export type CustomProperty = {
|
|
73
|
-
syntax: CssSyntaxNode;
|
|
74
72
|
formula: Formula;
|
|
75
|
-
description?: string;
|
|
76
73
|
};
|
|
77
74
|
/**
|
|
78
75
|
* @deprecated - use CustomProperties instead
|
|
@@ -96,7 +93,7 @@ export interface ElementNodeModel {
|
|
|
96
93
|
variants?: StyleVariant[];
|
|
97
94
|
animations?: Record<string, Record<string, AnimationKeyframe>>;
|
|
98
95
|
children: string[];
|
|
99
|
-
events: Record<string, EventModel>;
|
|
96
|
+
events: Record<string, EventModel | null>;
|
|
100
97
|
classes: Record<string, {
|
|
101
98
|
formula?: Formula;
|
|
102
99
|
}>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"component.types.js","sourceRoot":"","sources":["../../src/component/component.types.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"component.types.js","sourceRoot":"","sources":["../../src/component/component.types.ts"],"names":[],"mappings":"AAmRA,MAAM,CAAN,IAAY,YAMX;AAND,WAAY,YAAY;IACtB,6BAAa,CAAA;IACb,6BAAa,CAAA;IACb,iCAAiB,CAAA;IACjB,qCAAqB,CAAA;IACrB,+BAAe,CAAA;AACjB,CAAC,EANW,YAAY,KAAZ,YAAY,QAMvB"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
import type {
|
|
2
|
-
|
|
1
|
+
import type { CustomPropertyName } from '../component/component.types';
|
|
2
|
+
import type { CustomPropertyDefinition } from './theme';
|
|
3
|
+
export type CssSyntax = 'angle' | 'color' | 'custom-ident' | 'image' | 'integer' | 'length' | 'length-percentage' | 'number' | 'percentage' | 'resolution' | 'string' | 'time' | 'transform-function' | 'transform-list' | 'url' | '*';
|
|
3
4
|
export type CssSyntaxNode = {
|
|
4
5
|
type: 'primitive';
|
|
5
6
|
name: CssSyntax;
|
|
@@ -8,4 +9,4 @@ export type CssSyntaxNode = {
|
|
|
8
9
|
keywords: string[];
|
|
9
10
|
};
|
|
10
11
|
export declare function stringifySyntaxNode(node: CssSyntaxNode): string;
|
|
11
|
-
export declare function
|
|
12
|
+
export declare function renderSyntaxDefinition(key: CustomPropertyName, { syntax, inherits, initialValue }: CustomPropertyDefinition): string;
|
|
@@ -1,25 +1,3 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Default initial values for CSS properties based on their syntax type.
|
|
3
|
-
*
|
|
4
|
-
* Note: Eventually, the initial values may be set in a theme or somewhere global.
|
|
5
|
-
*/
|
|
6
|
-
const DEFAULT_INITIAL_VALUE_BY_SYNTAX = {
|
|
7
|
-
length: '0px',
|
|
8
|
-
number: '0',
|
|
9
|
-
percentage: '0%',
|
|
10
|
-
color: 'transparent',
|
|
11
|
-
image: 'none',
|
|
12
|
-
url: 'none',
|
|
13
|
-
integer: '0',
|
|
14
|
-
angle: '0deg',
|
|
15
|
-
time: '0s',
|
|
16
|
-
resolution: '1dppx',
|
|
17
|
-
'transform-function': 'none',
|
|
18
|
-
'custom-ident': '',
|
|
19
|
-
string: '',
|
|
20
|
-
'length-percentage': '0px',
|
|
21
|
-
'transform-list': 'none',
|
|
22
|
-
};
|
|
23
1
|
export function stringifySyntaxNode(node) {
|
|
24
2
|
switch (node.type) {
|
|
25
3
|
case 'primitive':
|
|
@@ -30,11 +8,16 @@ export function stringifySyntaxNode(node) {
|
|
|
30
8
|
throw new Error(`Unknown syntax node type: ${node.type}`);
|
|
31
9
|
}
|
|
32
10
|
}
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
11
|
+
/*
|
|
12
|
+
TODO: `initialValue` does not support referencing other properties (e.g. var(--some-other-property))
|
|
13
|
+
To Fix this, we could either statically solve by accessing theme at SSR, but to handle theme-switching at runtime,
|
|
14
|
+
we would instead need to do `:root { --my-property: var(--some-other-property); }` for properties that need to reference other properties.
|
|
15
|
+
*/
|
|
16
|
+
export function renderSyntaxDefinition(key, { syntax, inherits, initialValue }) {
|
|
17
|
+
return `@property ${key} {
|
|
18
|
+
syntax: "${stringifySyntaxNode(syntax)}";
|
|
19
|
+
inherits: ${String(inherits)};
|
|
20
|
+
initial-value: ${initialValue};
|
|
38
21
|
}`;
|
|
39
22
|
}
|
|
40
23
|
//# sourceMappingURL=customProperty.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"customProperty.js","sourceRoot":"","sources":["../../src/styling/customProperty.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"customProperty.js","sourceRoot":"","sources":["../../src/styling/customProperty.ts"],"names":[],"mappings":"AAgCA,MAAM,UAAU,mBAAmB,CAAC,IAAmB;IACrD,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;QAClB,KAAK,WAAW;YACd,OAAO,IAAI,IAAI,CAAC,IAAI,GAAG,CAAA;QACzB,KAAK,SAAS;YACZ,OAAO,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;QAClC;YACE,MAAM,IAAI,KAAK,CAAC,6BAA8B,IAAY,CAAC,IAAI,EAAE,CAAC,CAAA;IACtE,CAAC;AACH,CAAC;AAED;;;;EAIE;AACF,MAAM,UAAU,sBAAsB,CACpC,GAAuB,EACvB,EAAE,MAAM,EAAE,QAAQ,EAAE,YAAY,EAA4B;IAE5D,OAAO,aAAa,GAAG;aACZ,mBAAmB,CAAC,MAAM,CAAC;cAC1B,MAAM,CAAC,QAAQ,CAAC;mBACX,YAAY;EAC7B,CAAA;AACF,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { omitKeys } from '../utils/collections';
|
|
2
2
|
import { isDefined } from '../utils/util';
|
|
3
3
|
import { getClassName, toValidClassName } from './className';
|
|
4
|
-
import { syntaxNodeToPropertyAtDefinition, } from './customProperty';
|
|
5
4
|
import { getThemeCss } from './theme';
|
|
6
5
|
import { variantSelector } from './variantSelector';
|
|
7
6
|
const LEGACY_BREAKPOINTS = {
|
|
@@ -59,7 +58,6 @@ const SIZE_PROPERTIES = new Set([
|
|
|
59
58
|
export const createStylesheet = (root, components, theme, options) => {
|
|
60
59
|
const hashes = new Set();
|
|
61
60
|
const animationHashes = new Set();
|
|
62
|
-
const registeredCustomProperties = new Map();
|
|
63
61
|
// Get fonts used on the page
|
|
64
62
|
const fonts = getAllFonts(components);
|
|
65
63
|
//Exclude fonts that are not used on this page.
|
|
@@ -185,26 +183,6 @@ ${selector}::-webkit-scrollbar {
|
|
|
185
183
|
})
|
|
186
184
|
.join('\n')
|
|
187
185
|
: ''}
|
|
188
|
-
${[
|
|
189
|
-
...Object.entries(node.customProperties ?? {}),
|
|
190
|
-
...(node.variants?.flatMap((variant) => Object.entries(variant.customProperties ?? {})) ?? []),
|
|
191
|
-
]
|
|
192
|
-
.map(([customPropertyName, customProperty]) => {
|
|
193
|
-
const existingVariable = registeredCustomProperties.get(customPropertyName);
|
|
194
|
-
if (existingVariable) {
|
|
195
|
-
// Warn if the style variable is already registered with a different syntax, as registration is global.
|
|
196
|
-
if (existingVariable.type === 'primitive' &&
|
|
197
|
-
customProperty.syntax.type === 'primitive' &&
|
|
198
|
-
existingVariable.name !== customProperty.syntax.name) {
|
|
199
|
-
// eslint-disable-next-line no-console
|
|
200
|
-
console.warn(`Custom property "${customPropertyName}" is already registered with a different syntax: "${existingVariable.name}".`);
|
|
201
|
-
}
|
|
202
|
-
return '';
|
|
203
|
-
}
|
|
204
|
-
registeredCustomProperties.set(customPropertyName, customProperty.syntax);
|
|
205
|
-
return syntaxNodeToPropertyAtDefinition(customPropertyName, customProperty);
|
|
206
|
-
})
|
|
207
|
-
.join('\n')}
|
|
208
186
|
`;
|
|
209
187
|
}
|
|
210
188
|
catch (e) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../src/styling/style.css.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,YAAY,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../src/styling/style.css.ts"],"names":[],"mappings":"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"}
|
package/dist/styling/theme.d.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import type { CustomPropertyName } from '../component/component.types';
|
|
2
|
+
import { type CssSyntaxNode } from './customProperty';
|
|
1
3
|
export interface ThemeOptions {
|
|
2
4
|
includeResetStyle: boolean;
|
|
3
5
|
createFontFaces: boolean;
|
|
@@ -67,6 +69,16 @@ export type Theme = {
|
|
|
67
69
|
'border-radius': StyleTokenGroup[];
|
|
68
70
|
shadow: StyleTokenGroup[];
|
|
69
71
|
'z-index': StyleTokenGroup[];
|
|
72
|
+
categories?: Record<string, CustomCategory>;
|
|
73
|
+
};
|
|
74
|
+
export type CustomCategory = {
|
|
75
|
+
propertyDefinitions: Record<CustomPropertyName, CustomPropertyDefinition>;
|
|
76
|
+
};
|
|
77
|
+
export type CustomPropertyDefinition = {
|
|
78
|
+
syntax: CssSyntaxNode;
|
|
79
|
+
inherits: boolean;
|
|
80
|
+
initialValue: string;
|
|
81
|
+
description: string;
|
|
70
82
|
};
|
|
71
83
|
export declare const getThemeCss: (theme: Theme | OldTheme, options: ThemeOptions) => string;
|
|
72
84
|
export declare const getOldThemeCss: (theme: OldTheme) => string;
|
package/dist/styling/theme.js
CHANGED
|
@@ -1,9 +1,15 @@
|
|
|
1
|
+
import { renderSyntaxDefinition } from './customProperty';
|
|
1
2
|
import { RESET_STYLES } from './theme.const';
|
|
2
3
|
export const getThemeCss = (theme, options) => {
|
|
3
4
|
if ('breakpoints' in theme) {
|
|
4
5
|
return getOldThemeCss(theme);
|
|
5
6
|
}
|
|
6
|
-
return `${
|
|
7
|
+
return `${Object.values(theme.categories ?? {})
|
|
8
|
+
.map((category) => Object.entries(category.propertyDefinitions)
|
|
9
|
+
.map(([propertyName, property]) => renderSyntaxDefinition(propertyName, property))
|
|
10
|
+
.join('\n'))
|
|
11
|
+
.join('\n')}
|
|
12
|
+
${options.includeResetStyle ? RESET_STYLES : ''}
|
|
7
13
|
@layer base {
|
|
8
14
|
${options.createFontFaces
|
|
9
15
|
? theme.fonts
|
|
@@ -24,10 +30,10 @@ export const getThemeCss = (theme, options) => {
|
|
|
24
30
|
: ''}
|
|
25
31
|
body, :host {
|
|
26
32
|
/* Color */
|
|
27
|
-
|
|
33
|
+
${theme.color
|
|
28
34
|
.flatMap((group) => group.tokens.map((color) => `--${color.name}: ${color.value};`))
|
|
29
35
|
.join('\n')}
|
|
30
|
-
|
|
36
|
+
/* Fonts */
|
|
31
37
|
${theme.fonts
|
|
32
38
|
.map((font) => `--font-${font.name}: '${font.family}',${font.type};`)
|
|
33
39
|
.join('\n')}
|
|
@@ -111,10 +117,6 @@ export const getThemeCss = (theme, options) => {
|
|
|
111
117
|
export const getOldThemeCss = (theme) => {
|
|
112
118
|
const colorVars = Object.entries(theme.colors).flatMap(([color, { variants }]) => Object.entries(variants).map(([variant, { value }]) => `--${color}-${variant}:${value}`));
|
|
113
119
|
return `
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
120
|
body, :host {
|
|
119
121
|
${Object.entries(theme.fontFamily)
|
|
120
122
|
.map(([name, { value: [family, ...fallback], },]) => `--font-${name}: '${family}',${fallback.join(',')};`)
|
|
@@ -131,7 +133,6 @@ body, :host {
|
|
|
131
133
|
--spacing:${theme.spacing}rem;
|
|
132
134
|
${colorVars.join(';\n')};
|
|
133
135
|
|
|
134
|
-
|
|
135
136
|
--text-xxs:0.625rem;
|
|
136
137
|
--line-height-xxs:0.9rem;
|
|
137
138
|
|
|
@@ -177,7 +178,6 @@ ${RESET_STYLES}
|
|
|
177
178
|
transform: rotate(360deg);
|
|
178
179
|
}
|
|
179
180
|
}
|
|
180
|
-
|
|
181
181
|
@keyframes animation-fade-in {
|
|
182
182
|
from {
|
|
183
183
|
opacity:0;
|
|
@@ -186,8 +186,6 @@ ${RESET_STYLES}
|
|
|
186
186
|
opacity:1;
|
|
187
187
|
}
|
|
188
188
|
}
|
|
189
|
-
|
|
190
|
-
|
|
191
189
|
@keyframes animation-fade-out {
|
|
192
190
|
from {
|
|
193
191
|
opacity:1;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/styling/theme.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/styling/theme.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { ApiStatus, ComponentAPI, LegacyApiStatus } from '../api/apiTypes'
|
|
2
2
|
import type { Formula } from '../formula/formula'
|
|
3
|
-
import type { CssSyntaxNode } from '../styling/customProperty'
|
|
4
3
|
import type { StyleTokenCategory } from '../styling/theme'
|
|
5
4
|
import type { NordcraftMetadata, RequireFields } from '../types'
|
|
6
5
|
|
|
@@ -81,9 +80,7 @@ export interface TextNodeModel {
|
|
|
81
80
|
export type CustomPropertyName = `--${string}`
|
|
82
81
|
|
|
83
82
|
export type CustomProperty = {
|
|
84
|
-
syntax: CssSyntaxNode
|
|
85
83
|
formula: Formula
|
|
86
|
-
description?: string
|
|
87
84
|
}
|
|
88
85
|
|
|
89
86
|
/**
|
|
@@ -109,7 +106,7 @@ export interface ElementNodeModel {
|
|
|
109
106
|
variants?: StyleVariant[]
|
|
110
107
|
animations?: Record<string, Record<string, AnimationKeyframe>>
|
|
111
108
|
children: string[]
|
|
112
|
-
events: Record<string, EventModel>
|
|
109
|
+
events: Record<string, EventModel | null>
|
|
113
110
|
classes: Record<string, { formula?: Formula }>
|
|
114
111
|
'style-variables'?: Array<StyleVariable>
|
|
115
112
|
customProperties?: Record<CustomPropertyName, CustomProperty>
|
|
@@ -1,10 +1,7 @@
|
|
|
1
1
|
import { describe, expect, test } from 'bun:test'
|
|
2
|
-
import type { CustomProperty } from '../component/component.types'
|
|
3
2
|
import type { CssSyntax, CssSyntaxNode } from './customProperty'
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
syntaxNodeToPropertyAtDefinition,
|
|
7
|
-
} from './customProperty'
|
|
3
|
+
import { renderSyntaxDefinition, stringifySyntaxNode } from './customProperty'
|
|
4
|
+
import type { CustomPropertyDefinition } from './theme'
|
|
8
5
|
|
|
9
6
|
describe('stringifySyntaxNode()', () => {
|
|
10
7
|
;['length', 'number', 'percentage', 'length-percentage', 'color'].forEach(
|
|
@@ -31,16 +28,18 @@ describe('stringifySyntaxNode()', () => {
|
|
|
31
28
|
})
|
|
32
29
|
})
|
|
33
30
|
|
|
34
|
-
describe('
|
|
31
|
+
describe('renderSyntaxDefinition()', () => {
|
|
35
32
|
test('it generates a valid property definition', () => {
|
|
36
|
-
const property:
|
|
33
|
+
const property: CustomPropertyDefinition = {
|
|
37
34
|
syntax: {
|
|
38
35
|
type: 'primitive',
|
|
39
36
|
name: 'length',
|
|
40
37
|
},
|
|
41
|
-
|
|
38
|
+
description: 'My custom property',
|
|
39
|
+
inherits: true,
|
|
40
|
+
initialValue: '0px',
|
|
42
41
|
}
|
|
43
|
-
expect(
|
|
42
|
+
expect(renderSyntaxDefinition('--my-property', property)).toBe(
|
|
44
43
|
'@property --my-property {\n syntax: "<length>";\n inherits: true;\n initial-value: 0px;\n}',
|
|
45
44
|
)
|
|
46
45
|
})
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { CustomPropertyName } from '../component/component.types'
|
|
2
|
+
import type { CustomPropertyDefinition } from './theme'
|
|
2
3
|
|
|
3
4
|
// See https://developer.mozilla.org/en-US/docs/Web/CSS/@property/syntax
|
|
4
5
|
export type CssSyntax =
|
|
@@ -17,6 +18,7 @@ export type CssSyntax =
|
|
|
17
18
|
| 'transform-function'
|
|
18
19
|
| 'transform-list'
|
|
19
20
|
| 'url'
|
|
21
|
+
| '*'
|
|
20
22
|
|
|
21
23
|
export type CssSyntaxNode =
|
|
22
24
|
| {
|
|
@@ -28,29 +30,6 @@ export type CssSyntaxNode =
|
|
|
28
30
|
keywords: string[]
|
|
29
31
|
}
|
|
30
32
|
|
|
31
|
-
/**
|
|
32
|
-
* Default initial values for CSS properties based on their syntax type.
|
|
33
|
-
*
|
|
34
|
-
* Note: Eventually, the initial values may be set in a theme or somewhere global.
|
|
35
|
-
*/
|
|
36
|
-
const DEFAULT_INITIAL_VALUE_BY_SYNTAX: Record<CssSyntax, string> = {
|
|
37
|
-
length: '0px',
|
|
38
|
-
number: '0',
|
|
39
|
-
percentage: '0%',
|
|
40
|
-
color: 'transparent',
|
|
41
|
-
image: 'none',
|
|
42
|
-
url: 'none',
|
|
43
|
-
integer: '0',
|
|
44
|
-
angle: '0deg',
|
|
45
|
-
time: '0s',
|
|
46
|
-
resolution: '1dppx',
|
|
47
|
-
'transform-function': 'none',
|
|
48
|
-
'custom-ident': '',
|
|
49
|
-
string: '',
|
|
50
|
-
'length-percentage': '0px',
|
|
51
|
-
'transform-list': 'none',
|
|
52
|
-
}
|
|
53
|
-
|
|
54
33
|
export function stringifySyntaxNode(node: CssSyntaxNode): string {
|
|
55
34
|
switch (node.type) {
|
|
56
35
|
case 'primitive':
|
|
@@ -62,13 +41,18 @@ export function stringifySyntaxNode(node: CssSyntaxNode): string {
|
|
|
62
41
|
}
|
|
63
42
|
}
|
|
64
43
|
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
44
|
+
/*
|
|
45
|
+
TODO: `initialValue` does not support referencing other properties (e.g. var(--some-other-property))
|
|
46
|
+
To Fix this, we could either statically solve by accessing theme at SSR, but to handle theme-switching at runtime,
|
|
47
|
+
we would instead need to do `:root { --my-property: var(--some-other-property); }` for properties that need to reference other properties.
|
|
48
|
+
*/
|
|
49
|
+
export function renderSyntaxDefinition(
|
|
50
|
+
key: CustomPropertyName,
|
|
51
|
+
{ syntax, inherits, initialValue }: CustomPropertyDefinition,
|
|
68
52
|
): string {
|
|
69
|
-
return `@property ${
|
|
70
|
-
syntax: "${stringifySyntaxNode(
|
|
71
|
-
inherits:
|
|
72
|
-
initial-value: ${
|
|
53
|
+
return `@property ${key} {
|
|
54
|
+
syntax: "${stringifySyntaxNode(syntax)}";
|
|
55
|
+
inherits: ${String(inherits)};
|
|
56
|
+
initial-value: ${initialValue};
|
|
73
57
|
}`
|
|
74
58
|
}
|
package/src/styling/style.css.ts
CHANGED
|
@@ -3,10 +3,6 @@ import type { Component } from '../component/component.types'
|
|
|
3
3
|
import { omitKeys } from '../utils/collections'
|
|
4
4
|
import { isDefined } from '../utils/util'
|
|
5
5
|
import { getClassName, toValidClassName } from './className'
|
|
6
|
-
import {
|
|
7
|
-
syntaxNodeToPropertyAtDefinition,
|
|
8
|
-
type CssSyntaxNode,
|
|
9
|
-
} from './customProperty'
|
|
10
6
|
import type { OldTheme, Theme, ThemeOptions } from './theme'
|
|
11
7
|
import { getThemeCss } from './theme'
|
|
12
8
|
import type {
|
|
@@ -80,7 +76,6 @@ export const createStylesheet = (
|
|
|
80
76
|
) => {
|
|
81
77
|
const hashes = new Set<string>()
|
|
82
78
|
const animationHashes = new Set<string>()
|
|
83
|
-
const registeredCustomProperties = new Map<string, CssSyntaxNode>()
|
|
84
79
|
|
|
85
80
|
// Get fonts used on the page
|
|
86
81
|
const fonts = getAllFonts(components)
|
|
@@ -240,39 +235,6 @@ ${selector}::-webkit-scrollbar {
|
|
|
240
235
|
.join('\n')
|
|
241
236
|
: ''
|
|
242
237
|
}
|
|
243
|
-
${[
|
|
244
|
-
...Object.entries(node.customProperties ?? {}),
|
|
245
|
-
...(node.variants?.flatMap((variant) =>
|
|
246
|
-
Object.entries(variant.customProperties ?? {}),
|
|
247
|
-
) ?? []),
|
|
248
|
-
]
|
|
249
|
-
.map(([customPropertyName, customProperty]) => {
|
|
250
|
-
const existingVariable =
|
|
251
|
-
registeredCustomProperties.get(customPropertyName)
|
|
252
|
-
if (existingVariable) {
|
|
253
|
-
// Warn if the style variable is already registered with a different syntax, as registration is global.
|
|
254
|
-
if (
|
|
255
|
-
existingVariable.type === 'primitive' &&
|
|
256
|
-
customProperty.syntax.type === 'primitive' &&
|
|
257
|
-
existingVariable.name !== customProperty.syntax.name
|
|
258
|
-
) {
|
|
259
|
-
// eslint-disable-next-line no-console
|
|
260
|
-
console.warn(
|
|
261
|
-
`Custom property "${customPropertyName}" is already registered with a different syntax: "${existingVariable.name}".`,
|
|
262
|
-
)
|
|
263
|
-
}
|
|
264
|
-
return ''
|
|
265
|
-
}
|
|
266
|
-
registeredCustomProperties.set(
|
|
267
|
-
customPropertyName,
|
|
268
|
-
customProperty.syntax,
|
|
269
|
-
)
|
|
270
|
-
return syntaxNodeToPropertyAtDefinition(
|
|
271
|
-
customPropertyName,
|
|
272
|
-
customProperty,
|
|
273
|
-
)
|
|
274
|
-
})
|
|
275
|
-
.join('\n')}
|
|
276
238
|
`
|
|
277
239
|
} catch (e) {
|
|
278
240
|
// eslint-disable-next-line no-console
|
package/src/styling/theme.ts
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import type { CustomPropertyName } from '../component/component.types'
|
|
2
|
+
import { renderSyntaxDefinition, type CssSyntaxNode } from './customProperty'
|
|
1
3
|
import { RESET_STYLES } from './theme.const'
|
|
2
4
|
|
|
3
5
|
export interface ThemeOptions {
|
|
@@ -79,13 +81,35 @@ export type Theme = {
|
|
|
79
81
|
'border-radius': StyleTokenGroup[]
|
|
80
82
|
shadow: StyleTokenGroup[]
|
|
81
83
|
'z-index': StyleTokenGroup[]
|
|
84
|
+
categories?: Record<string, CustomCategory>
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
export type CustomCategory = {
|
|
88
|
+
propertyDefinitions: Record<CustomPropertyName, CustomPropertyDefinition>
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
export type CustomPropertyDefinition = {
|
|
92
|
+
syntax: CssSyntaxNode
|
|
93
|
+
inherits: boolean
|
|
94
|
+
initialValue: string
|
|
95
|
+
description: string
|
|
82
96
|
}
|
|
83
97
|
|
|
84
98
|
export const getThemeCss = (theme: Theme | OldTheme, options: ThemeOptions) => {
|
|
85
99
|
if ('breakpoints' in theme) {
|
|
86
100
|
return getOldThemeCss(theme)
|
|
87
101
|
}
|
|
88
|
-
|
|
102
|
+
|
|
103
|
+
return `${Object.values(theme.categories ?? {})
|
|
104
|
+
.map((category) =>
|
|
105
|
+
Object.entries(category.propertyDefinitions)
|
|
106
|
+
.map(([propertyName, property]) =>
|
|
107
|
+
renderSyntaxDefinition(propertyName as CustomPropertyName, property),
|
|
108
|
+
)
|
|
109
|
+
.join('\n'),
|
|
110
|
+
)
|
|
111
|
+
.join('\n')}
|
|
112
|
+
${options.includeResetStyle ? RESET_STYLES : ''}
|
|
89
113
|
@layer base {
|
|
90
114
|
${
|
|
91
115
|
options.createFontFaces
|
|
@@ -117,12 +141,12 @@ export const getThemeCss = (theme: Theme | OldTheme, options: ThemeOptions) => {
|
|
|
117
141
|
}
|
|
118
142
|
body, :host {
|
|
119
143
|
/* Color */
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
144
|
+
${theme.color
|
|
145
|
+
.flatMap((group) =>
|
|
146
|
+
group.tokens.map((color) => `--${color.name}: ${color.value};`),
|
|
147
|
+
)
|
|
148
|
+
.join('\n')}
|
|
149
|
+
/* Fonts */
|
|
126
150
|
${theme.fonts
|
|
127
151
|
.map((font) => `--font-${font.name}: '${font.family}',${font.type};`)
|
|
128
152
|
.join('\n')}
|
|
@@ -244,10 +268,6 @@ export const getOldThemeCss = (theme: OldTheme) => {
|
|
|
244
268
|
),
|
|
245
269
|
)
|
|
246
270
|
return `
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
271
|
body, :host {
|
|
252
272
|
${Object.entries(theme.fontFamily)
|
|
253
273
|
.map(
|
|
@@ -271,7 +291,6 @@ body, :host {
|
|
|
271
291
|
--spacing:${theme.spacing}rem;
|
|
272
292
|
${colorVars.join(';\n')};
|
|
273
293
|
|
|
274
|
-
|
|
275
294
|
--text-xxs:0.625rem;
|
|
276
295
|
--line-height-xxs:0.9rem;
|
|
277
296
|
|
|
@@ -317,7 +336,6 @@ ${RESET_STYLES}
|
|
|
317
336
|
transform: rotate(360deg);
|
|
318
337
|
}
|
|
319
338
|
}
|
|
320
|
-
|
|
321
339
|
@keyframes animation-fade-in {
|
|
322
340
|
from {
|
|
323
341
|
opacity:0;
|
|
@@ -326,8 +344,6 @@ ${RESET_STYLES}
|
|
|
326
344
|
opacity:1;
|
|
327
345
|
}
|
|
328
346
|
}
|
|
329
|
-
|
|
330
|
-
|
|
331
347
|
@keyframes animation-fade-out {
|
|
332
348
|
from {
|
|
333
349
|
opacity:1;
|