@nordcraft/core 2.0.12 → 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 +1 -0
- package/dist/styling/className.js +4 -3
- package/dist/styling/className.js.map +1 -1
- package/dist/styling/style.css.d.ts +2 -1
- package/dist/styling/style.css.js +3 -3
- 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 +6 -4
- package/src/styling/style.css.ts +5 -5
- package/src/styling/variantSelector.ts +1 -1
- package/src/utils/getNodeSelector.test.ts +10 -7
- package/src/utils/getNodeSelector.ts +2 -1
|
@@ -2,5 +2,6 @@ import type { ComponentNodeModel, ElementNodeModel, NodeStyleModel } from '../co
|
|
|
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;
|
|
5
6
|
export declare const getStaticStyleAndVariants: (node: ComponentNodeModel | ElementNodeModel) => [Nullable<NodeStyleModel>, Nullable<StyleVariant[]>];
|
|
6
7
|
export declare const toValidClassName: (input: string, escapeSpecialCharacters?: boolean) => string;
|
|
@@ -14,6 +14,7 @@ export const getClassName = (object) => {
|
|
|
14
14
|
CLASSNAME_LOOKUP.set(stringified, className);
|
|
15
15
|
return className;
|
|
16
16
|
};
|
|
17
|
+
export const getPathClassName = (path) => generateAlphabeticName(hash(path));
|
|
17
18
|
const getStaticCustomPropertyStyles = (customProperties) => Object.fromEntries(Object.entries(customProperties ?? {})
|
|
18
19
|
.filter(([, value]) => value.formula?.type === 'value')
|
|
19
20
|
.map(([key, value]) => [
|
|
@@ -29,9 +30,9 @@ export const getStaticStyleAndVariants = (node) => {
|
|
|
29
30
|
const variants = node.variants ??
|
|
30
31
|
node.style?.variants;
|
|
31
32
|
const staticStyle = mergeStaticStyle(node.style, node.customProperties ?? {});
|
|
32
|
-
const mappedVariants = variants?.map((
|
|
33
|
-
...
|
|
34
|
-
style: mergeStaticStyle(
|
|
33
|
+
const mappedVariants = variants?.map((variant) => ({
|
|
34
|
+
...variant,
|
|
35
|
+
style: mergeStaticStyle(variant.style, variant.customProperties ?? {}),
|
|
35
36
|
}));
|
|
36
37
|
return [
|
|
37
38
|
staticStyle,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"className.js","sourceRoot":"","sources":["../../src/styling/className.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAC7C,OAAO,EAAE,sBAAsB,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAA;AAGrD,qHAAqH;AACrH,MAAM,gBAAgB,GAAG,IAAI,GAAG,EAAkB,CAAA;AAClD,MAAM,CAAC,MAAM,YAAY,GAAG,CAC1B,MAA4D,EAC5D,EAAE;IACF,MAAM,WAAW,GAAG,IAAI,CAAC,SAAS,CAChC,MAAM,CAAC,MAAM,CACX,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,KAAK,IAAI,IAAI,sBAAsB;QACvC,IAAI,KAAK,SAAS;QAClB,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,4BAA4B;QAC9E,CAAC,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CACnE,CACF,CAAA;IACD,IAAI,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAC,EAAE,CAAC;QACtC,OAAO,gBAAgB,CAAC,GAAG,CAAC,WAAW,CAAE,CAAA;IAC3C,CAAC;IACD,MAAM,SAAS,GAAG,sBAAsB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAA;IAC3D,gBAAgB,CAAC,GAAG,CAAC,WAAW,EAAE,SAAS,CAAC,CAAA;IAC5C,OAAO,SAAS,CAAA;AAClB,CAAC,CAAA;AAED,MAAM,6BAA6B,GAAG,CACpC,gBAAmE,EACnE,EAAE,CACF,MAAM,CAAC,WAAW,CAChB,MAAM,CAAC,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAAC;KACnC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,IAAI,KAAK,OAAO,CAAC;KACtD,GAAG,CAAC,CAAC,CAAC,GAAG,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC;IACrB,GAAG;IACH,UAAU,CACR,KAAK,CAAC,OAAO,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,EACjE,KAAK,CAAC,IAAI,CACX;CACF,CAAC,CACL,CAAA;AACH,MAAM,gBAAgB,GAAG,CACvB,KAAwC,EACxC,gBAAmE,EACzC,EAAE;IAC5B,MAAM,YAAY,GAAG,6BAA6B,CAAC,gBAAgB,CAAC,CAAA;IACpE,MAAM,MAAM,GAAG,EAAE,GAAG,YAAY,EAAE,GAAG,KAAK,EAAE,CAAA;IAC5C,OAAO,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAA;AAC5D,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,yBAAyB,GAAG,CACvC,IAA2C,EAC3C,EAAE;IACF,MAAM,QAAQ,GACZ,IAAI,CAAC,QAAQ;QACZ,IAAI,CAAC,KAAK,EAAE,QAAkD,CAAA;IAEjE,MAAM,WAAW,GAAG,gBAAgB,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAC,CAAA;
|
|
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>;
|
|
@@ -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
|
|
@@ -77,7 +77,7 @@ export const getNodeStyles = (node, classHash, animationHashes = new Set()) => {
|
|
|
77
77
|
const [_style, styleVariants] = getStaticStyleAndVariants(node);
|
|
78
78
|
const style = omitKeys(_style ?? {}, ['variants', 'breakpoints', 'shadows']);
|
|
79
79
|
const renderVariant = (selector, style, options) => {
|
|
80
|
-
const scrollbarStyles = Object.entries(style).filter(([key]) => key === 'scrollbar-width');
|
|
80
|
+
const scrollbarStyles = Object.entries(style ?? {}).filter(([key]) => key === 'scrollbar-width');
|
|
81
81
|
// If selectorCss is empty, we don't need to render the selector
|
|
82
82
|
let styles = styleToCss(style);
|
|
83
83
|
if (options?.startingStyle) {
|
|
@@ -240,7 +240,7 @@ export const getAllFonts = (components) => {
|
|
|
240
240
|
return [
|
|
241
241
|
node.style?.fontFamily,
|
|
242
242
|
node.style?.['font-family'],
|
|
243
|
-
...(node.variants?.map((v) => v.style
|
|
243
|
+
...(node.variants?.map((v) => v.style?.fontFamily ?? v.style?.['font-family']) ?? []),
|
|
244
244
|
].filter(isDefined);
|
|
245
245
|
}
|
|
246
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,EACL,YAAY,EACZ,yBAAyB,EACzB,gBAAgB,GACjB,MAAM,aAAa,CAAA;AAEpB,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AACrC,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAA;AAEnD,MAAM,kBAAkB,GAAG;IACzB,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,GAAG;IACV,MAAM,EAAE,GAAG;CACZ,CAAA;AAED,MAAM,UAAU,SAAS,CAAC,MAAc;IACtC,OAAO,MAAM;SACV,KAAK,CAAC,EAAE,CAAC;SACT,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QACnB,OAAO,4BAA4B,CAAC,QAAQ,CAAC,IAAI,CAAC;YAChD,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,iBAAiB,EAAE;YACrD,CAAC,CAAC,IAAI,CAAA;IACV,CAAC,CAAC;SACD,IAAI,CAAC,EAAE,CAAC,CAAA;AACb,CAAC;AAED,MAAM,eAAe,GAAG,IAAI,GAAG,CAAC;IAC9B,OAAO;IACP,WAAW;IACX,WAAW;IACX,QAAQ;IACR,YAAY;IACZ,YAAY;IACZ,QAAQ;IACR,YAAY;IACZ,aAAa;IACb,eAAe;IACf,cAAc;IACd,SAAS;IACT,aAAa;IACb,cAAc;IACd,gBAAgB;IAChB,eAAe;IACf,KAAK;IACL,OAAO;IACP,OAAO;IACP,eAAe;IACf,2BAA2B;IAC3B,4BAA4B;IAC5B,wBAAwB;IACxB,yBAAyB;IACzB,cAAc;IACd,kBAAkB;IAClB,mBAAmB;IACnB,qBAAqB;IACrB,oBAAoB;IACpB,WAAW;IACX,KAAK;IACL,OAAO;IACP,QAAQ;IACR,MAAM;IACN,eAAe;CAChB,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,
|
|
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
|
@@ -31,6 +31,9 @@ export const getClassName = (
|
|
|
31
31
|
return className
|
|
32
32
|
}
|
|
33
33
|
|
|
34
|
+
export const getPathClassName = (path: string) =>
|
|
35
|
+
generateAlphabeticName(hash(path))
|
|
36
|
+
|
|
34
37
|
const getStaticCustomPropertyStyles = (
|
|
35
38
|
customProperties: Record<`--${string}`, CustomProperty> | undefined,
|
|
36
39
|
) =>
|
|
@@ -62,10 +65,9 @@ export const getStaticStyleAndVariants = (
|
|
|
62
65
|
(node.style?.variants as unknown as StyleVariant[] | undefined)
|
|
63
66
|
|
|
64
67
|
const staticStyle = mergeStaticStyle(node.style, node.customProperties ?? {})
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
style: mergeStaticStyle(rest.style, customProperties ?? {}),
|
|
68
|
+
const mappedVariants = variants?.map((variant) => ({
|
|
69
|
+
...variant,
|
|
70
|
+
style: mergeStaticStyle(variant.style, variant.customProperties ?? {}),
|
|
69
71
|
}))
|
|
70
72
|
|
|
71
73
|
return [
|
package/src/styling/style.css.ts
CHANGED
|
@@ -72,8 +72,8 @@ const SIZE_PROPERTIES = new Set([
|
|
|
72
72
|
'outline-width',
|
|
73
73
|
])
|
|
74
74
|
|
|
75
|
-
export const styleToCss = (style: NodeStyleModel) => {
|
|
76
|
-
return Object.entries(style)
|
|
75
|
+
export const styleToCss = (style: Nullable<NodeStyleModel>) => {
|
|
76
|
+
return Object.entries(style ?? {})
|
|
77
77
|
.map(([property, value]) => {
|
|
78
78
|
if (!isDefined(value)) {
|
|
79
79
|
// ignore undefined/null values
|
|
@@ -101,10 +101,10 @@ export const getNodeStyles = (
|
|
|
101
101
|
const style = omitKeys(_style ?? {}, ['variants', 'breakpoints', 'shadows'])
|
|
102
102
|
const renderVariant = (
|
|
103
103
|
selector: string,
|
|
104
|
-
style: NodeStyleModel
|
|
104
|
+
style: Nullable<NodeStyleModel>,
|
|
105
105
|
options?: Nullable<{ startingStyle?: Nullable<boolean> }>,
|
|
106
106
|
) => {
|
|
107
|
-
const scrollbarStyles = Object.entries(style).filter(
|
|
107
|
+
const scrollbarStyles = Object.entries(style ?? {}).filter(
|
|
108
108
|
([key]) => key === 'scrollbar-width',
|
|
109
109
|
)
|
|
110
110
|
// If selectorCss is empty, we don't need to render the selector
|
|
@@ -313,7 +313,7 @@ export const getAllFonts = (components: Component[]) => {
|
|
|
313
313
|
node.style?.fontFamily,
|
|
314
314
|
node.style?.['font-family'],
|
|
315
315
|
...(node.variants?.map(
|
|
316
|
-
(v) => v.style
|
|
316
|
+
(v) => v.style?.fontFamily ?? v.style?.['font-family'],
|
|
317
317
|
) ?? []),
|
|
318
318
|
].filter(isDefined)
|
|
319
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)
|