From 203da1717906148264d9829e6b477a87b3925eac Mon Sep 17 00:00:00 2001 From: Matheus Cardoso Date: Mon, 11 Nov 2024 19:26:37 -0300 Subject: [PATCH 1/6] feat(style-compiler): enable :root selector for native-shadow-only CSS --- .../actual.css | 1 + .../config.json | 3 +++ .../expected.js | 12 +++++++++ .../actual.css | 1 + .../config.json | 3 +++ .../expected.js | 12 +++++++++ .../style-compiler/src/postcss-lwc-plugin.ts | 26 +++++++++++++------ .../src/selector-scoping/transform.ts | 8 ++++-- .../src/selector-scoping/validate.ts | 8 +++--- packages/@lwc/style-compiler/src/transform.ts | 3 ++- 10 files changed, 62 insertions(+), 15 deletions(-) create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/actual.css create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/config.json create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/expected.js create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/actual.css create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/config.json create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/expected.js diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/actual.css b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/actual.css new file mode 100644 index 0000000000..18ba4145c5 --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/actual.css @@ -0,0 +1 @@ +:host-context(.foo) {} diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/config.json b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/config.json new file mode 100644 index 0000000000..0a910de825 --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/config.json @@ -0,0 +1,3 @@ +{ + "disableSyntheticShadowSupport": true +} diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/expected.js b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/expected.js new file mode 100644 index 0000000000..252029db11 --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/expected.js @@ -0,0 +1,12 @@ +function stylesheet() { + var token; + var useActualHostSelector = true; + var useNativeDirPseudoclass = true; + var shadowSelector = token ? ("[" + token + "]") : ""; + var hostSelector = token ? ("[" + token + "-host]") : ""; + var suffixToken = token ? ("-" + token) : ""; + return ":host-context(.foo)" + shadowSelector + " {}"; + /*LWC compiler vX.X.X*/ +} +stylesheet.$nativeOnly$ = true; +export default [stylesheet]; \ No newline at end of file diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/actual.css b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/actual.css new file mode 100644 index 0000000000..052bf632f1 --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/actual.css @@ -0,0 +1 @@ +:root {} diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/config.json b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/config.json new file mode 100644 index 0000000000..0a910de825 --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/config.json @@ -0,0 +1,3 @@ +{ + "disableSyntheticShadowSupport": true +} diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/expected.js b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/expected.js new file mode 100644 index 0000000000..42d7d5cbc3 --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/expected.js @@ -0,0 +1,12 @@ +function stylesheet() { + var token; + var useActualHostSelector = true; + var useNativeDirPseudoclass = true; + var shadowSelector = token ? ("[" + token + "]") : ""; + var hostSelector = token ? ("[" + token + "-host]") : ""; + var suffixToken = token ? ("-" + token) : ""; + return ":root" + shadowSelector + " {}"; + /*LWC compiler vX.X.X*/ +} +stylesheet.$nativeOnly$ = true; +export default [stylesheet]; \ No newline at end of file diff --git a/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts b/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts index 92171b694a..b27631714b 100644 --- a/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts +++ b/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts @@ -20,11 +20,14 @@ function shouldTransformSelector(rule: Rule) { return rule.parent?.type !== 'atrule' || (rule.parent as AtRule).name !== 'keyframes'; } -function selectorProcessorFactory(transformConfig: SelectorScopingConfig) { +function selectorProcessorFactory( + transformConfig: SelectorScopingConfig, + disableSyntheticShadowSupport: boolean +) { return postCssSelector((root) => { validateIdSelectors(root); - transformSelectorScoping(root, transformConfig); + transformSelectorScoping(root, transformConfig, disableSyntheticShadowSupport); transformDirPseudoClass(root); }); } @@ -32,16 +35,23 @@ function selectorProcessorFactory(transformConfig: SelectorScopingConfig) { export default function postCssLwcPlugin(options: { scoped: boolean; apiVersion: APIVersion; + disableSyntheticShadowSupport: boolean; }): TransformCallback { // We need 2 types of selectors processors, since transforming the :host selector make the selector // unusable when used in the context of the native shadow and vice-versa. // This distinction also applies to light DOM in scoped (synthetic-like) vs unscoped (native-like) mode. - const nativeShadowSelectorProcessor = selectorProcessorFactory({ - transformHost: false, - }); - const syntheticShadowSelectorProcessor = selectorProcessorFactory({ - transformHost: true, - }); + const nativeShadowSelectorProcessor = selectorProcessorFactory( + { + transformHost: false, + }, + options.disableSyntheticShadowSupport + ); + const syntheticShadowSelectorProcessor = selectorProcessorFactory( + { + transformHost: true, + }, + options.disableSyntheticShadowSupport + ); return (root, result) => { transformImport(root, result, options.scoped); diff --git a/packages/@lwc/style-compiler/src/selector-scoping/transform.ts b/packages/@lwc/style-compiler/src/selector-scoping/transform.ts index 25b3a44c5e..bb7bb7c617 100644 --- a/packages/@lwc/style-compiler/src/selector-scoping/transform.ts +++ b/packages/@lwc/style-compiler/src/selector-scoping/transform.ts @@ -144,8 +144,12 @@ function transformHost(selector: Selector) { } } -export default function transformSelector(root: Root, transformConfig: SelectorScopingConfig) { - validateSelectors(root); +export default function transformSelector( + root: Root, + transformConfig: SelectorScopingConfig, + disableSyntheticShadowSupport: boolean +) { + validateSelectors(root, disableSyntheticShadowSupport); root.each(scopeSelector); diff --git a/packages/@lwc/style-compiler/src/selector-scoping/validate.ts b/packages/@lwc/style-compiler/src/selector-scoping/validate.ts index 036f2bc1a0..99827a5fc7 100644 --- a/packages/@lwc/style-compiler/src/selector-scoping/validate.ts +++ b/packages/@lwc/style-compiler/src/selector-scoping/validate.ts @@ -10,7 +10,7 @@ const DEPRECATED_SELECTORS = new Set(['/deep/', '::shadow', '>>>']); const UNSUPPORTED_SELECTORS = new Set([':root', ':host-context']); const TEMPLATE_DIRECTIVES = [/^key$/, /^lwc:*/, /^if:*/, /^for:*/, /^iterator:*/]; -function validateSelectors(root: Root) { +function validateSelectors(root: Root, disableSyntheticShadowSupport: boolean) { root.walk((node) => { const { value, sourceIndex } = node; @@ -24,7 +24,7 @@ function validateSelectors(root: Root) { } // Ensure the selector doesn't use an unsupported selector. - if (UNSUPPORTED_SELECTORS.has(value)) { + if (!disableSyntheticShadowSupport && UNSUPPORTED_SELECTORS.has(value)) { throw root.error(`Invalid usage of unsupported selector "${value}".`, { index: sourceIndex, word: value, @@ -55,7 +55,7 @@ function validateAttribute(root: Root) { }); } -export default function validate(root: Root) { - validateSelectors(root); +export default function validate(root: Root, disableSyntheticShadowSupport: boolean) { + validateSelectors(root, disableSyntheticShadowSupport); validateAttribute(root); } diff --git a/packages/@lwc/style-compiler/src/transform.ts b/packages/@lwc/style-compiler/src/transform.ts index e82020feb1..52f50fe6a2 100644 --- a/packages/@lwc/style-compiler/src/transform.ts +++ b/packages/@lwc/style-compiler/src/transform.ts @@ -53,8 +53,9 @@ export function transform(src: string, id: string, config: Config = {}): { code: const scoped = !!config.scoped; const apiVersion = getAPIVersionFromNumber(config.apiVersion); + const disableSyntheticShadowSupport = !!config.disableSyntheticShadowSupport; - const plugins = [postcssLwc({ scoped, apiVersion })]; + const plugins = [postcssLwc({ scoped, apiVersion, disableSyntheticShadowSupport })]; const result = postcss(plugins).process(src, { from: id }).sync(); From b7e46a3b36d3b580b353430a519eec4fe01a0950 Mon Sep 17 00:00:00 2001 From: Matheus Cardoso Date: Mon, 11 Nov 2024 21:04:21 -0300 Subject: [PATCH 2/6] chore: move disableSyntheticShadowSupport to ScopingConfig --- .../style-compiler/src/postcss-lwc-plugin.ts | 27 +++++++------------ .../src/selector-scoping/transform.ts | 10 +++---- 2 files changed, 14 insertions(+), 23 deletions(-) diff --git a/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts b/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts index b27631714b..88d4b39678 100644 --- a/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts +++ b/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts @@ -20,14 +20,11 @@ function shouldTransformSelector(rule: Rule) { return rule.parent?.type !== 'atrule' || (rule.parent as AtRule).name !== 'keyframes'; } -function selectorProcessorFactory( - transformConfig: SelectorScopingConfig, - disableSyntheticShadowSupport: boolean -) { +function selectorProcessorFactory(transformConfig: SelectorScopingConfig) { return postCssSelector((root) => { validateIdSelectors(root); - transformSelectorScoping(root, transformConfig, disableSyntheticShadowSupport); + transformSelectorScoping(root, transformConfig); transformDirPseudoClass(root); }); } @@ -40,18 +37,14 @@ export default function postCssLwcPlugin(options: { // We need 2 types of selectors processors, since transforming the :host selector make the selector // unusable when used in the context of the native shadow and vice-versa. // This distinction also applies to light DOM in scoped (synthetic-like) vs unscoped (native-like) mode. - const nativeShadowSelectorProcessor = selectorProcessorFactory( - { - transformHost: false, - }, - options.disableSyntheticShadowSupport - ); - const syntheticShadowSelectorProcessor = selectorProcessorFactory( - { - transformHost: true, - }, - options.disableSyntheticShadowSupport - ); + const nativeShadowSelectorProcessor = selectorProcessorFactory({ + transformHost: false, + disableSyntheticShadowSupport: options.disableSyntheticShadowSupport, + }); + const syntheticShadowSelectorProcessor = selectorProcessorFactory({ + transformHost: true, + disableSyntheticShadowSupport: options.disableSyntheticShadowSupport, + }); return (root, result) => { transformImport(root, result, options.scoped); diff --git a/packages/@lwc/style-compiler/src/selector-scoping/transform.ts b/packages/@lwc/style-compiler/src/selector-scoping/transform.ts index bb7bb7c617..150340a396 100644 --- a/packages/@lwc/style-compiler/src/selector-scoping/transform.ts +++ b/packages/@lwc/style-compiler/src/selector-scoping/transform.ts @@ -27,6 +27,8 @@ type ChildNode = Exclude; export interface SelectorScopingConfig { /** When set to true, the :host selector gets replace with the the scoping token. */ transformHost: boolean; + /** When set to true, the synthetic shadow support is disabled. */ + disableSyntheticShadowSupport: boolean; } function isHostPseudoClass(node: Node): node is Pseudo { @@ -144,12 +146,8 @@ function transformHost(selector: Selector) { } } -export default function transformSelector( - root: Root, - transformConfig: SelectorScopingConfig, - disableSyntheticShadowSupport: boolean -) { - validateSelectors(root, disableSyntheticShadowSupport); +export default function transformSelector(root: Root, transformConfig: SelectorScopingConfig) { + validateSelectors(root, transformConfig.disableSyntheticShadowSupport); root.each(scopeSelector); From f680832e849ed19d31fb1ec034056884b3a7aabf Mon Sep 17 00:00:00 2001 From: Matheus Cardoso Date: Tue, 12 Nov 2024 07:35:23 -0300 Subject: [PATCH 3/6] fix(style-compiler): do not support :root and :host-context selectors in scoped --- .../actual.css | 1 + .../config.json | 4 ++++ .../error.json | 6 ++++++ .../actual.css | 1 + .../config.json | 4 ++++ .../error.json | 6 ++++++ packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts | 2 ++ .../@lwc/style-compiler/src/selector-scoping/transform.ts | 7 ++++++- .../@lwc/style-compiler/src/selector-scoping/validate.ts | 8 ++++---- 9 files changed, 34 insertions(+), 5 deletions(-) create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/actual.css create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/config.json create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/error.json create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/actual.css create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/config.json create mode 100644 packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/error.json diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/actual.css b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/actual.css new file mode 100644 index 0000000000..18ba4145c5 --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/actual.css @@ -0,0 +1 @@ +:host-context(.foo) {} diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/config.json b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/config.json new file mode 100644 index 0000000000..b93f34675c --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/config.json @@ -0,0 +1,4 @@ +{ + "disableSyntheticShadowSupport": true, + "scoped": true +} diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/error.json b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/error.json new file mode 100644 index 0000000000..f5131d5bdf --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/error.json @@ -0,0 +1,6 @@ +{ + "name": "CssSyntaxError", + "reason": "Invalid usage of unsupported selector \":host-context\".", + "column": 1, + "line": 1 +} \ No newline at end of file diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/actual.css b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/actual.css new file mode 100644 index 0000000000..052bf632f1 --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/actual.css @@ -0,0 +1 @@ +:root {} diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/config.json b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/config.json new file mode 100644 index 0000000000..b93f34675c --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/config.json @@ -0,0 +1,4 @@ +{ + "disableSyntheticShadowSupport": true, + "scoped": true +} diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/error.json b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/error.json new file mode 100644 index 0000000000..ba796fd202 --- /dev/null +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/error.json @@ -0,0 +1,6 @@ +{ + "name": "CssSyntaxError", + "reason": "Invalid usage of unsupported selector \":root\".", + "column": 1, + "line": 1 +} \ No newline at end of file diff --git a/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts b/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts index 88d4b39678..812110ff7d 100644 --- a/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts +++ b/packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts @@ -40,10 +40,12 @@ export default function postCssLwcPlugin(options: { const nativeShadowSelectorProcessor = selectorProcessorFactory({ transformHost: false, disableSyntheticShadowSupport: options.disableSyntheticShadowSupport, + scoped: options.scoped, }); const syntheticShadowSelectorProcessor = selectorProcessorFactory({ transformHost: true, disableSyntheticShadowSupport: options.disableSyntheticShadowSupport, + scoped: options.scoped, }); return (root, result) => { diff --git a/packages/@lwc/style-compiler/src/selector-scoping/transform.ts b/packages/@lwc/style-compiler/src/selector-scoping/transform.ts index 150340a396..3558bece3a 100644 --- a/packages/@lwc/style-compiler/src/selector-scoping/transform.ts +++ b/packages/@lwc/style-compiler/src/selector-scoping/transform.ts @@ -29,6 +29,8 @@ export interface SelectorScopingConfig { transformHost: boolean; /** When set to true, the synthetic shadow support is disabled. */ disableSyntheticShadowSupport: boolean; + /** When set to true, the selector is scoped. */ + scoped: boolean; } function isHostPseudoClass(node: Node): node is Pseudo { @@ -147,7 +149,10 @@ function transformHost(selector: Selector) { } export default function transformSelector(root: Root, transformConfig: SelectorScopingConfig) { - validateSelectors(root, transformConfig.disableSyntheticShadowSupport); + validateSelectors( + root, + transformConfig.disableSyntheticShadowSupport && !transformConfig.scoped + ); root.each(scopeSelector); diff --git a/packages/@lwc/style-compiler/src/selector-scoping/validate.ts b/packages/@lwc/style-compiler/src/selector-scoping/validate.ts index 99827a5fc7..746a8ed2b8 100644 --- a/packages/@lwc/style-compiler/src/selector-scoping/validate.ts +++ b/packages/@lwc/style-compiler/src/selector-scoping/validate.ts @@ -10,7 +10,7 @@ const DEPRECATED_SELECTORS = new Set(['/deep/', '::shadow', '>>>']); const UNSUPPORTED_SELECTORS = new Set([':root', ':host-context']); const TEMPLATE_DIRECTIVES = [/^key$/, /^lwc:*/, /^if:*/, /^for:*/, /^iterator:*/]; -function validateSelectors(root: Root, disableSyntheticShadowSupport: boolean) { +function validateSelectors(root: Root, native: boolean) { root.walk((node) => { const { value, sourceIndex } = node; @@ -24,7 +24,7 @@ function validateSelectors(root: Root, disableSyntheticShadowSupport: boolean) { } // Ensure the selector doesn't use an unsupported selector. - if (!disableSyntheticShadowSupport && UNSUPPORTED_SELECTORS.has(value)) { + if (!native && UNSUPPORTED_SELECTORS.has(value)) { throw root.error(`Invalid usage of unsupported selector "${value}".`, { index: sourceIndex, word: value, @@ -55,7 +55,7 @@ function validateAttribute(root: Root) { }); } -export default function validate(root: Root, disableSyntheticShadowSupport: boolean) { - validateSelectors(root, disableSyntheticShadowSupport); +export default function validate(root: Root, native: boolean) { + validateSelectors(root, native); validateAttribute(root); } From e90e6f42c98f51e3a9863b2bcc755e7deffaf489 Mon Sep 17 00:00:00 2001 From: Matheus Cardoso Date: Tue, 12 Nov 2024 18:14:12 -0300 Subject: [PATCH 4/6] Update packages/@lwc/style-compiler/src/selector-scoping/validate.ts Co-authored-by: Nolan Lawson --- packages/@lwc/style-compiler/src/selector-scoping/validate.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/@lwc/style-compiler/src/selector-scoping/validate.ts b/packages/@lwc/style-compiler/src/selector-scoping/validate.ts index 746a8ed2b8..2ced059589 100644 --- a/packages/@lwc/style-compiler/src/selector-scoping/validate.ts +++ b/packages/@lwc/style-compiler/src/selector-scoping/validate.ts @@ -25,7 +25,7 @@ function validateSelectors(root: Root, native: boolean) { // Ensure the selector doesn't use an unsupported selector. if (!native && UNSUPPORTED_SELECTORS.has(value)) { - throw root.error(`Invalid usage of unsupported selector "${value}".`, { + throw root.error(`Invalid usage of unsupported selector "${value}". This selector is only supported in non-scoped CSS where the \`disableSyntheticShadowSupport\` flag is set to true.`, { index: sourceIndex, word: value, }); From 66362178aa2b8e0f1bee6560ca1ecfa77a59e5d3 Mon Sep 17 00:00:00 2001 From: Matheus Cardoso Date: Tue, 12 Nov 2024 18:15:44 -0300 Subject: [PATCH 5/6] chore(style-compiler): update fixtures --- .../error.json | 2 +- .../error.json | 2 +- .../fixtures/unsupported-host-context-selector/error.json | 2 +- .../src/__tests__/fixtures/unsupported-root-selector/error.json | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/error.json b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/error.json index f5131d5bdf..61ba9a9f3f 100644 --- a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/error.json +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector-scoped/error.json @@ -1,6 +1,6 @@ { "name": "CssSyntaxError", - "reason": "Invalid usage of unsupported selector \":host-context\".", + "reason": "Invalid usage of unsupported selector \":host-context\". This selector is only supported in non-scoped CSS where the `disableSyntheticShadowSupport` flag is set to true.", "column": 1, "line": 1 } \ No newline at end of file diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/error.json b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/error.json index ba796fd202..297146009e 100644 --- a/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/error.json +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector-scoped/error.json @@ -1,6 +1,6 @@ { "name": "CssSyntaxError", - "reason": "Invalid usage of unsupported selector \":root\".", + "reason": "Invalid usage of unsupported selector \":root\". This selector is only supported in non-scoped CSS where the `disableSyntheticShadowSupport` flag is set to true.", "column": 1, "line": 1 } \ No newline at end of file diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/unsupported-host-context-selector/error.json b/packages/@lwc/style-compiler/src/__tests__/fixtures/unsupported-host-context-selector/error.json index f5131d5bdf..61ba9a9f3f 100644 --- a/packages/@lwc/style-compiler/src/__tests__/fixtures/unsupported-host-context-selector/error.json +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/unsupported-host-context-selector/error.json @@ -1,6 +1,6 @@ { "name": "CssSyntaxError", - "reason": "Invalid usage of unsupported selector \":host-context\".", + "reason": "Invalid usage of unsupported selector \":host-context\". This selector is only supported in non-scoped CSS where the `disableSyntheticShadowSupport` flag is set to true.", "column": 1, "line": 1 } \ No newline at end of file diff --git a/packages/@lwc/style-compiler/src/__tests__/fixtures/unsupported-root-selector/error.json b/packages/@lwc/style-compiler/src/__tests__/fixtures/unsupported-root-selector/error.json index ba796fd202..297146009e 100644 --- a/packages/@lwc/style-compiler/src/__tests__/fixtures/unsupported-root-selector/error.json +++ b/packages/@lwc/style-compiler/src/__tests__/fixtures/unsupported-root-selector/error.json @@ -1,6 +1,6 @@ { "name": "CssSyntaxError", - "reason": "Invalid usage of unsupported selector \":root\".", + "reason": "Invalid usage of unsupported selector \":root\". This selector is only supported in non-scoped CSS where the `disableSyntheticShadowSupport` flag is set to true.", "column": 1, "line": 1 } \ No newline at end of file From a3cbc7b123644e779ff5e7b4c16a22a02681834a Mon Sep 17 00:00:00 2001 From: Matheus Cardoso Date: Tue, 12 Nov 2024 18:17:45 -0300 Subject: [PATCH 6/6] chore(style-compiler): formatting --- .../style-compiler/src/selector-scoping/validate.ts | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/packages/@lwc/style-compiler/src/selector-scoping/validate.ts b/packages/@lwc/style-compiler/src/selector-scoping/validate.ts index 2ced059589..d0f2a9b14f 100644 --- a/packages/@lwc/style-compiler/src/selector-scoping/validate.ts +++ b/packages/@lwc/style-compiler/src/selector-scoping/validate.ts @@ -25,10 +25,13 @@ function validateSelectors(root: Root, native: boolean) { // Ensure the selector doesn't use an unsupported selector. if (!native && UNSUPPORTED_SELECTORS.has(value)) { - throw root.error(`Invalid usage of unsupported selector "${value}". This selector is only supported in non-scoped CSS where the \`disableSyntheticShadowSupport\` flag is set to true.`, { - index: sourceIndex, - word: value, - }); + throw root.error( + `Invalid usage of unsupported selector "${value}". This selector is only supported in non-scoped CSS where the \`disableSyntheticShadowSupport\` flag is set to true.`, + { + index: sourceIndex, + word: value, + } + ); } } });