@nordcraft/core 2.0.11 → 2.0.13
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/styling/className.d.ts +3 -1
- package/dist/styling/className.js +26 -0
- package/dist/styling/className.js.map +1 -1
- package/dist/styling/style.css.d.ts +2 -1
- package/dist/styling/style.css.js +7 -14
- package/dist/styling/style.css.js.map +1 -1
- package/dist/styling/variantSelector.d.ts +1 -1
- package/dist/utils/getNodeSelector.js +2 -1
- package/dist/utils/getNodeSelector.js.map +1 -1
- package/package.json +1 -1
- package/src/styling/className.test.ts +4 -4
- package/src/styling/className.ts +52 -1
- package/src/styling/style.css.ts +14 -18
- package/src/styling/variantSelector.ts +1 -1
- package/src/utils/getNodeSelector.test.ts +10 -7
- package/src/utils/getNodeSelector.ts +2 -1
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
import type { NodeStyleModel } from '../component/component.types';
|
|
1
|
+
import type { ComponentNodeModel, ElementNodeModel, NodeStyleModel } from '../component/component.types';
|
|
2
2
|
import type { Nullable } from '../types';
|
|
3
3
|
import type { StyleVariant } from './variantSelector';
|
|
4
4
|
export declare const getClassName: (object: [Nullable<NodeStyleModel>, Nullable<StyleVariant[]>]) => string;
|
|
5
|
+
export declare const getPathClassName: (path: string) => string;
|
|
6
|
+
export declare const getStaticStyleAndVariants: (node: ComponentNodeModel | ElementNodeModel) => [Nullable<NodeStyleModel>, Nullable<StyleVariant[]>];
|
|
5
7
|
export declare const toValidClassName: (input: string, escapeSpecialCharacters?: boolean) => string;
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { appendUnit } from './customProperty';
|
|
1
2
|
import { generateAlphabeticName, hash } from './hash';
|
|
2
3
|
// Classnames are reused a lot, and JS hashing is expensive, so there is benefit in caching them in a native hashmap.
|
|
3
4
|
const CLASSNAME_LOOKUP = new Map();
|
|
@@ -13,6 +14,31 @@ export const getClassName = (object) => {
|
|
|
13
14
|
CLASSNAME_LOOKUP.set(stringified, className);
|
|
14
15
|
return className;
|
|
15
16
|
};
|
|
17
|
+
export const getPathClassName = (path) => generateAlphabeticName(hash(path));
|
|
18
|
+
const getStaticCustomPropertyStyles = (customProperties) => Object.fromEntries(Object.entries(customProperties ?? {})
|
|
19
|
+
.filter(([, value]) => value.formula?.type === 'value')
|
|
20
|
+
.map(([key, value]) => [
|
|
21
|
+
key,
|
|
22
|
+
appendUnit(value.formula?.type === 'value' ? value.formula.value : undefined, value.unit),
|
|
23
|
+
]));
|
|
24
|
+
const mergeStaticStyle = (style, customProperties) => {
|
|
25
|
+
const staticStyles = getStaticCustomPropertyStyles(customProperties);
|
|
26
|
+
const merged = { ...staticStyles, ...style };
|
|
27
|
+
return Object.keys(merged).length > 0 ? merged : undefined;
|
|
28
|
+
};
|
|
29
|
+
export const getStaticStyleAndVariants = (node) => {
|
|
30
|
+
const variants = node.variants ??
|
|
31
|
+
node.style?.variants;
|
|
32
|
+
const staticStyle = mergeStaticStyle(node.style, node.customProperties ?? {});
|
|
33
|
+
const mappedVariants = variants?.map((variant) => ({
|
|
34
|
+
...variant,
|
|
35
|
+
style: mergeStaticStyle(variant.style, variant.customProperties ?? {}),
|
|
36
|
+
}));
|
|
37
|
+
return [
|
|
38
|
+
staticStyle,
|
|
39
|
+
mappedVariants && mappedVariants.length > 0 ? mappedVariants : undefined,
|
|
40
|
+
];
|
|
41
|
+
};
|
|
16
42
|
export const toValidClassName = (input, escapeSpecialCharacters = false) => {
|
|
17
43
|
// Replace invalid characters with hyphens
|
|
18
44
|
let className = input
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"className.js","sourceRoot":"","sources":["../../src/styling/className.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"className.js","sourceRoot":"","sources":["../../src/styling/className.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import type { Component, ComponentNodeModel, ElementNodeModel, NodeStyleModel } from '../component/component.types';
|
|
2
|
+
import type { Nullable } from '../types';
|
|
2
3
|
import type { OldTheme, Theme, ThemeOptions } from './theme';
|
|
3
4
|
export declare function kebabCase(string: string): string;
|
|
4
|
-
export declare const styleToCss: (style: NodeStyleModel) => string;
|
|
5
|
+
export declare const styleToCss: (style: Nullable<NodeStyleModel>) => string;
|
|
5
6
|
export declare const getNodeStyles: (node: ComponentNodeModel | ElementNodeModel, classHash: string, animationHashes?: Set<string>) => string;
|
|
6
7
|
export declare const createStylesheet: (root: Component, components: Component[], themes: Record<string, OldTheme | Theme>, options: ThemeOptions) => string;
|
|
7
8
|
export declare const getAllFonts: (components: Component[]) => Set<string>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { omitKeys } from '../utils/collections';
|
|
2
2
|
import { isDefined } from '../utils/util';
|
|
3
|
-
import { getClassName, toValidClassName } from './className';
|
|
3
|
+
import { getClassName, getStaticStyleAndVariants, toValidClassName, } from './className';
|
|
4
4
|
import { getThemeCss } from './theme';
|
|
5
5
|
import { variantSelector } from './variantSelector';
|
|
6
6
|
const LEGACY_BREAKPOINTS = {
|
|
@@ -56,7 +56,7 @@ const SIZE_PROPERTIES = new Set([
|
|
|
56
56
|
'outline-width',
|
|
57
57
|
]);
|
|
58
58
|
export const styleToCss = (style) => {
|
|
59
|
-
return Object.entries(style)
|
|
59
|
+
return Object.entries(style ?? {})
|
|
60
60
|
.map(([property, value]) => {
|
|
61
61
|
if (!isDefined(value)) {
|
|
62
62
|
// ignore undefined/null values
|
|
@@ -74,17 +74,10 @@ export const styleToCss = (style) => {
|
|
|
74
74
|
};
|
|
75
75
|
export const getNodeStyles = (node, classHash, animationHashes = new Set()) => {
|
|
76
76
|
try {
|
|
77
|
-
const
|
|
78
|
-
|
|
79
|
-
'breakpoints',
|
|
80
|
-
'shadows',
|
|
81
|
-
]);
|
|
82
|
-
const styleVariants = node.variants ??
|
|
83
|
-
// Support for old style variants stored inside style object
|
|
84
|
-
// Once we have better versioning options, this should be removed
|
|
85
|
-
node.style?.variants;
|
|
77
|
+
const [_style, styleVariants] = getStaticStyleAndVariants(node);
|
|
78
|
+
const style = omitKeys(_style ?? {}, ['variants', 'breakpoints', 'shadows']);
|
|
86
79
|
const renderVariant = (selector, style, options) => {
|
|
87
|
-
const scrollbarStyles = Object.entries(style).filter(([key]) => key === 'scrollbar-width');
|
|
80
|
+
const scrollbarStyles = Object.entries(style ?? {}).filter(([key]) => key === 'scrollbar-width');
|
|
88
81
|
// If selectorCss is empty, we don't need to render the selector
|
|
89
82
|
let styles = styleToCss(style);
|
|
90
83
|
if (options?.startingStyle) {
|
|
@@ -228,7 +221,7 @@ export const createStylesheet = (root, components, themes, options
|
|
|
228
221
|
if (node.type !== 'element') {
|
|
229
222
|
return;
|
|
230
223
|
}
|
|
231
|
-
const classHash = getClassName(
|
|
224
|
+
const classHash = getClassName(getStaticStyleAndVariants(node));
|
|
232
225
|
if (hashes.has(classHash)) {
|
|
233
226
|
return '';
|
|
234
227
|
}
|
|
@@ -247,7 +240,7 @@ export const getAllFonts = (components) => {
|
|
|
247
240
|
return [
|
|
248
241
|
node.style?.fontFamily,
|
|
249
242
|
node.style?.['font-family'],
|
|
250
|
-
...(node.variants?.map((v) => v.style
|
|
243
|
+
...(node.variants?.map((v) => v.style?.fontFamily ?? v.style?.['font-family']) ?? []),
|
|
251
244
|
].filter(isDefined);
|
|
252
245
|
}
|
|
253
246
|
return [];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../src/styling/style.css.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,QAAQ,EAAE,MAAM,sBAAsB,CAAA;AAC/C,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,
|
|
1
|
+
{"version":3,"file":"style.css.js","sourceRoot":"","sources":["../../src/styling/style.css.ts"],"names":[],"mappings":"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"}
|
|
@@ -46,7 +46,7 @@ export interface StyleVariant {
|
|
|
46
46
|
mediaQuery?: Nullable<MediaQuery>;
|
|
47
47
|
pseudoElement?: Nullable<string>;
|
|
48
48
|
startingStyle?: Nullable<boolean>;
|
|
49
|
-
style: NodeStyleModel
|
|
49
|
+
style: Nullable<NodeStyleModel>;
|
|
50
50
|
visited?: Nullable<boolean>;
|
|
51
51
|
}
|
|
52
52
|
export declare const variantSelector: (variant: StyleVariant) => string;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
+
import { getPathClassName } from '../styling/className';
|
|
1
2
|
import { variantSelector } from '../styling/variantSelector';
|
|
2
3
|
export function getNodeSelector(path, { componentName, nodeId, variant } = {}) {
|
|
3
|
-
let selector =
|
|
4
|
+
let selector = `.${getPathClassName(path)}`;
|
|
4
5
|
if (componentName) {
|
|
5
6
|
// Do not allow classes to start with a number, for example a page named "404" would result in a selector starting with a number which is invalid in CSS.
|
|
6
7
|
selector += startsWithNumber(componentName)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"getNodeSelector.js","sourceRoot":"","sources":["../../src/utils/getNodeSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAqB,MAAM,4BAA4B,CAAA;AAe/E,MAAM,UAAU,eAAe,CAC7B,IAAY,EACZ,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,GAAwB,EAAE;IAE5D,IAAI,QAAQ,GAAG,
|
|
1
|
+
{"version":3,"file":"getNodeSelector.js","sourceRoot":"","sources":["../../src/utils/getNodeSelector.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAA;AACvD,OAAO,EAAE,eAAe,EAAqB,MAAM,4BAA4B,CAAA;AAe/E,MAAM,UAAU,eAAe,CAC7B,IAAY,EACZ,EAAE,aAAa,EAAE,MAAM,EAAE,OAAO,EAAE,GAAwB,EAAE;IAE5D,IAAI,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,EAAE,CAAA;IAC3C,IAAI,aAAa,EAAE,CAAC;QAClB,yJAAyJ;QACzJ,QAAQ,IAAI,gBAAgB,CAAC,aAAa,CAAC;YACzC,CAAC,CAAC,KAAK,aAAa,EAAE;YACtB,CAAC,CAAC,IAAI,aAAa,EAAE,CAAA;IACzB,CAAC;IACD,IAAI,MAAM,EAAE,CAAC;QACX,QAAQ,IAAI,MAAM,MAAM,EAAE,CAAA;IAC5B,CAAC;IACD,iFAAiF;IACjF,QAAQ,GAAG,QAAQ,CAAC,OAAO,CAAC,cAAc,EAAE,OAAO,CAAC,CAAA;IACpD,IAAI,OAAO,EAAE,CAAC;QACZ,QAAQ,IAAI,eAAe,CAAC,OAAO,CAAC,CAAA;IACtC,CAAC;IAED,OAAO,QAAQ,CAAA;AACjB,CAAC;AAED,SAAS,gBAAgB,CAAC,GAAW;IACnC,IAAI,CAAC,GAAG;QAAE,OAAO,KAAK,CAAA;IACtB,MAAM,IAAI,GAAG,GAAG,CAAC,UAAU,CAAC,CAAC,CAAC,CAAA;IAC9B,OAAO,IAAI,IAAI,EAAE,IAAI,IAAI,IAAI,EAAE,CAAA;AACjC,CAAC"}
|
package/package.json
CHANGED
|
@@ -21,14 +21,14 @@ describe('toValidClassName()', () => {
|
|
|
21
21
|
|
|
22
22
|
describe('getClassName()', () => {
|
|
23
23
|
test('it produces the same classname whether a nullish entry is provided or not', () => {
|
|
24
|
-
expect(getClassName([null, undefined, { color: 'red' }])).toBe(
|
|
25
|
-
getClassName([{ color: 'red' }]),
|
|
24
|
+
expect(getClassName([null, undefined, { color: 'red' }] as any)).toBe(
|
|
25
|
+
getClassName([{ color: 'red' }] as any),
|
|
26
26
|
)
|
|
27
27
|
})
|
|
28
28
|
|
|
29
29
|
test('it produces the same classname whether an empty object is provided or not', () => {
|
|
30
|
-
expect(getClassName([{}, { color: 'red' }])).toBe(
|
|
31
|
-
getClassName([{ color: 'red' }]),
|
|
30
|
+
expect(getClassName([{}, { color: 'red' }] as any)).toBe(
|
|
31
|
+
getClassName([{ color: 'red' }] as any),
|
|
32
32
|
)
|
|
33
33
|
})
|
|
34
34
|
})
|
package/src/styling/className.ts
CHANGED
|
@@ -1,5 +1,11 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type {
|
|
2
|
+
ComponentNodeModel,
|
|
3
|
+
CustomProperty,
|
|
4
|
+
ElementNodeModel,
|
|
5
|
+
NodeStyleModel,
|
|
6
|
+
} from '../component/component.types'
|
|
2
7
|
import type { Nullable } from '../types'
|
|
8
|
+
import { appendUnit } from './customProperty'
|
|
3
9
|
import { generateAlphabeticName, hash } from './hash'
|
|
4
10
|
import type { StyleVariant } from './variantSelector'
|
|
5
11
|
|
|
@@ -25,6 +31,51 @@ export const getClassName = (
|
|
|
25
31
|
return className
|
|
26
32
|
}
|
|
27
33
|
|
|
34
|
+
export const getPathClassName = (path: string) =>
|
|
35
|
+
generateAlphabeticName(hash(path))
|
|
36
|
+
|
|
37
|
+
const getStaticCustomPropertyStyles = (
|
|
38
|
+
customProperties: Record<`--${string}`, CustomProperty> | undefined,
|
|
39
|
+
) =>
|
|
40
|
+
Object.fromEntries(
|
|
41
|
+
Object.entries(customProperties ?? {})
|
|
42
|
+
.filter(([, value]) => value.formula?.type === 'value')
|
|
43
|
+
.map(([key, value]) => [
|
|
44
|
+
key,
|
|
45
|
+
appendUnit(
|
|
46
|
+
value.formula?.type === 'value' ? value.formula.value : undefined,
|
|
47
|
+
value.unit,
|
|
48
|
+
),
|
|
49
|
+
]),
|
|
50
|
+
)
|
|
51
|
+
const mergeStaticStyle = (
|
|
52
|
+
style: NodeStyleModel | undefined | null,
|
|
53
|
+
customProperties: Record<`--${string}`, CustomProperty> | undefined,
|
|
54
|
+
): Nullable<NodeStyleModel> => {
|
|
55
|
+
const staticStyles = getStaticCustomPropertyStyles(customProperties)
|
|
56
|
+
const merged = { ...staticStyles, ...style }
|
|
57
|
+
return Object.keys(merged).length > 0 ? merged : undefined
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
export const getStaticStyleAndVariants = (
|
|
61
|
+
node: ElementNodeModel | ComponentNodeModel,
|
|
62
|
+
) => {
|
|
63
|
+
const variants =
|
|
64
|
+
node.variants ??
|
|
65
|
+
(node.style?.variants as unknown as StyleVariant[] | undefined)
|
|
66
|
+
|
|
67
|
+
const staticStyle = mergeStaticStyle(node.style, node.customProperties ?? {})
|
|
68
|
+
const mappedVariants = variants?.map((variant) => ({
|
|
69
|
+
...variant,
|
|
70
|
+
style: mergeStaticStyle(variant.style, variant.customProperties ?? {}),
|
|
71
|
+
}))
|
|
72
|
+
|
|
73
|
+
return [
|
|
74
|
+
staticStyle,
|
|
75
|
+
mappedVariants && mappedVariants.length > 0 ? mappedVariants : undefined,
|
|
76
|
+
] as [Nullable<NodeStyleModel>, Nullable<StyleVariant[]>]
|
|
77
|
+
}
|
|
78
|
+
|
|
28
79
|
export const toValidClassName = (
|
|
29
80
|
input: string,
|
|
30
81
|
escapeSpecialCharacters = false,
|
package/src/styling/style.css.ts
CHANGED
|
@@ -8,10 +8,14 @@ import type {
|
|
|
8
8
|
import type { Nullable } from '../types'
|
|
9
9
|
import { omitKeys } from '../utils/collections'
|
|
10
10
|
import { isDefined } from '../utils/util'
|
|
11
|
-
import {
|
|
11
|
+
import {
|
|
12
|
+
getClassName,
|
|
13
|
+
getStaticStyleAndVariants,
|
|
14
|
+
toValidClassName,
|
|
15
|
+
} from './className'
|
|
12
16
|
import type { OldTheme, Theme, ThemeOptions } from './theme'
|
|
13
17
|
import { getThemeCss } from './theme'
|
|
14
|
-
import { variantSelector
|
|
18
|
+
import { variantSelector } from './variantSelector'
|
|
15
19
|
|
|
16
20
|
const LEGACY_BREAKPOINTS = {
|
|
17
21
|
large: 1440,
|
|
@@ -68,8 +72,8 @@ const SIZE_PROPERTIES = new Set([
|
|
|
68
72
|
'outline-width',
|
|
69
73
|
])
|
|
70
74
|
|
|
71
|
-
export const styleToCss = (style: NodeStyleModel) => {
|
|
72
|
-
return Object.entries(style)
|
|
75
|
+
export const styleToCss = (style: Nullable<NodeStyleModel>) => {
|
|
76
|
+
return Object.entries(style ?? {})
|
|
73
77
|
.map(([property, value]) => {
|
|
74
78
|
if (!isDefined(value)) {
|
|
75
79
|
// ignore undefined/null values
|
|
@@ -93,22 +97,14 @@ export const getNodeStyles = (
|
|
|
93
97
|
animationHashes: Set<string> = new Set(),
|
|
94
98
|
) => {
|
|
95
99
|
try {
|
|
96
|
-
const
|
|
97
|
-
|
|
98
|
-
'breakpoints',
|
|
99
|
-
'shadows',
|
|
100
|
-
])
|
|
101
|
-
const styleVariants =
|
|
102
|
-
node.variants ??
|
|
103
|
-
// Support for old style variants stored inside style object
|
|
104
|
-
// Once we have better versioning options, this should be removed
|
|
105
|
-
(node.style?.variants as any as StyleVariant[])
|
|
100
|
+
const [_style, styleVariants] = getStaticStyleAndVariants(node)
|
|
101
|
+
const style = omitKeys(_style ?? {}, ['variants', 'breakpoints', 'shadows'])
|
|
106
102
|
const renderVariant = (
|
|
107
103
|
selector: string,
|
|
108
|
-
style: NodeStyleModel
|
|
104
|
+
style: Nullable<NodeStyleModel>,
|
|
109
105
|
options?: Nullable<{ startingStyle?: Nullable<boolean> }>,
|
|
110
106
|
) => {
|
|
111
|
-
const scrollbarStyles = Object.entries(style).filter(
|
|
107
|
+
const scrollbarStyles = Object.entries(style ?? {}).filter(
|
|
112
108
|
([key]) => key === 'scrollbar-width',
|
|
113
109
|
)
|
|
114
110
|
// If selectorCss is empty, we don't need to render the selector
|
|
@@ -294,7 +290,7 @@ export const createStylesheet = (
|
|
|
294
290
|
if (node.type !== 'element') {
|
|
295
291
|
return
|
|
296
292
|
}
|
|
297
|
-
const classHash = getClassName(
|
|
293
|
+
const classHash = getClassName(getStaticStyleAndVariants(node))
|
|
298
294
|
if (hashes.has(classHash)) {
|
|
299
295
|
return ''
|
|
300
296
|
}
|
|
@@ -317,7 +313,7 @@ export const getAllFonts = (components: Component[]) => {
|
|
|
317
313
|
node.style?.fontFamily,
|
|
318
314
|
node.style?.['font-family'],
|
|
319
315
|
...(node.variants?.map(
|
|
320
|
-
(v) => v.style
|
|
316
|
+
(v) => v.style?.fontFamily ?? v.style?.['font-family'],
|
|
321
317
|
) ?? []),
|
|
322
318
|
].filter(isDefined)
|
|
323
319
|
}
|
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
import type { StyleVariant } from '../component/component.types'
|
|
2
|
+
import { getPathClassName } from '../styling/className'
|
|
2
3
|
import { getNodeSelector } from './getNodeSelector'
|
|
3
4
|
|
|
4
5
|
describe('getNodeSelector', () => {
|
|
5
6
|
test('should return a selector to a specific node when given a path', () => {
|
|
6
7
|
const path = '0.1.2'
|
|
7
8
|
const selector = getNodeSelector(path)
|
|
8
|
-
expect(selector).toBe(
|
|
9
|
+
expect(selector).toBe(`.${getPathClassName(path)}`)
|
|
9
10
|
})
|
|
10
11
|
|
|
11
12
|
test('should return a selector to a specific node from a component instance', () => {
|
|
@@ -13,7 +14,9 @@ describe('getNodeSelector', () => {
|
|
|
13
14
|
const componentName = 'test-component'
|
|
14
15
|
const nodeId = 'test-node'
|
|
15
16
|
const selector = getNodeSelector(path, { componentName, nodeId })
|
|
16
|
-
expect(selector).toBe(
|
|
17
|
+
expect(selector).toBe(
|
|
18
|
+
`.${getPathClassName(path)}.test-component\\:test-node`,
|
|
19
|
+
)
|
|
17
20
|
})
|
|
18
21
|
|
|
19
22
|
test('should return a selector to a specific node variant when given a path and variant', () => {
|
|
@@ -24,7 +27,7 @@ describe('getNodeSelector', () => {
|
|
|
24
27
|
breakpoint: 'medium',
|
|
25
28
|
}
|
|
26
29
|
const selector = getNodeSelector(path, { variant })
|
|
27
|
-
expect(selector).toBe(
|
|
30
|
+
expect(selector).toBe(`.${getPathClassName(path)}:hover`)
|
|
28
31
|
})
|
|
29
32
|
|
|
30
33
|
test('should return a selector to a specific node variant from a component instance', () => {
|
|
@@ -39,20 +42,20 @@ describe('getNodeSelector', () => {
|
|
|
39
42
|
}
|
|
40
43
|
const selector = getNodeSelector(path, { componentName, nodeId, variant })
|
|
41
44
|
expect(selector).toBe(
|
|
42
|
-
|
|
45
|
+
`.${getPathClassName(path)}.test-component\\:test-node.test-class:active`,
|
|
43
46
|
)
|
|
44
47
|
})
|
|
45
48
|
|
|
46
49
|
test('should escape unescaped slashes in the path', () => {
|
|
47
50
|
const path = '0.1/2'
|
|
48
51
|
const selector = getNodeSelector(path)
|
|
49
|
-
expect(selector).toBe(
|
|
52
|
+
expect(selector).toBe(`.${getPathClassName(path)}`)
|
|
50
53
|
})
|
|
51
54
|
|
|
52
55
|
test('should not escape already escaped slashes in the path', () => {
|
|
53
56
|
const path = '0.1\\/2'
|
|
54
57
|
const selector = getNodeSelector(path)
|
|
55
|
-
expect(selector).toBe(
|
|
58
|
+
expect(selector).toBe(`.${getPathClassName(path)}`)
|
|
56
59
|
})
|
|
57
60
|
|
|
58
61
|
test('should prefix selector with an underscore if it starts with a number', () => {
|
|
@@ -61,6 +64,6 @@ describe('getNodeSelector', () => {
|
|
|
61
64
|
componentName: '404',
|
|
62
65
|
nodeId: 'test-node',
|
|
63
66
|
})
|
|
64
|
-
expect(selector).toBe(
|
|
67
|
+
expect(selector).toBe(`.${getPathClassName(path)}._404\\:test-node`)
|
|
65
68
|
})
|
|
66
69
|
})
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { getPathClassName } from '../styling/className'
|
|
1
2
|
import { variantSelector, type StyleVariant } from '../styling/variantSelector'
|
|
2
3
|
import type { Nullable } from '../types'
|
|
3
4
|
|
|
@@ -17,7 +18,7 @@ export function getNodeSelector(
|
|
|
17
18
|
path: string,
|
|
18
19
|
{ componentName, nodeId, variant }: NodeSelectorOptions = {},
|
|
19
20
|
): string {
|
|
20
|
-
let selector =
|
|
21
|
+
let selector = `.${getPathClassName(path)}`
|
|
21
22
|
if (componentName) {
|
|
22
23
|
// Do not allow classes to start with a number, for example a page named "404" would result in a selector starting with a number which is invalid in CSS.
|
|
23
24
|
selector += startsWithNumber(componentName)
|