feat(style-compiler): enable :root & :host-context() for native-shadow-only CSS

packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/actual.css

@@ -0,0 +1 @@
+:host-context(.foo) {}

packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-host-context-selector/config.json

@@ -0,0 +1,3 @@
+{
+  "disableSyntheticShadowSupport": true
+}

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];

packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/actual.css

@@ -0,0 +1 @@
+:root {}

packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-root-selector/config.json

@@ -0,0 +1,3 @@
+{
+  "disableSyntheticShadowSupport": true
+}

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];

packages/@lwc/style-compiler/src/postcss-lwc-plugin.ts

@@ -20,28 +20,38 @@ 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);
     });
 }
 
 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);

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);
 

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);
 }

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();