feat(compiler): add disableSyntheticShadowSupport option

.circleci/config.yml

@@ -60,6 +60,9 @@ commands:
       node_env_production:
         type: boolean
         default: false
+      disable_synthetic_shadow_support_in_compiler:
+        type: boolean
+        default: false
     steps:
       - run:
           name: << parameters.command_name >>
@@ -85,6 +88,7 @@ commands:
             <<# parameters.enable_scoped_custom_element_registry >> ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY=1 <</ parameters.enable_scoped_custom_element_registry >> \
             <<# parameters.disable_aria_reflection_polyfill >> DISABLE_ARIA_REFLECTION_POLYFILL=1 <</ parameters.disable_aria_reflection_polyfill >> \
             <<# parameters.node_env_production >> NODE_ENV_FOR_TEST=production <</ parameters.node_env_production >> \
+            <<# parameters.disable_synthetic_shadow_support_in_compiler >> DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER=1 <</ parameters.disable_synthetic_shadow_support_in_compiler >> \
             <<# parameters.compat >> COMPAT=1 <</ parameters.compat >> \
             <<# parameters.coverage >> COVERAGE=1 <</ parameters.coverage >> \
             retry << parameters.command >>
@@ -181,6 +185,9 @@ commands:
       node_env_production:
         type: boolean
         default: false
+      disable_synthetic_shadow_support_in_compiler:
+        type: boolean
+        default: false
       compat:
         type: boolean
         default: false
@@ -197,6 +204,7 @@ commands:
           enable_scoped_custom_element_registry: << parameters.enable_scoped_custom_element_registry >>
           disable_aria_reflection_polyfill: << parameters.disable_aria_reflection_polyfill >>
           node_env_production: << parameters.node_env_production >>
+          disable_synthetic_shadow_support_in_compiler: << parameters.disable_synthetic_shadow_support_in_compiler >>
           compat: << parameters.compat >>
           coverage: << parameters.coverage >>
           command: yarn sauce
@@ -273,6 +281,9 @@ jobs:
       - run_karma:
           disable_synthetic: true
           disable_aria_reflection_polyfill: true
+      - run_karma:
+          disable_synthetic: true
+          disable_synthetic_shadow_support_in_compiler: true
       - run_karma:
           node_env_production: true
       - run_karma:

packages/@lwc/compiler/src/options.ts

@@ -16,6 +16,7 @@ const DEFAULT_OPTIONS = {
     isExplicitImport: false,
     preserveHtmlComments: false,
     enableStaticContentOptimization: true,
+    disableSyntheticShadowSupport: false,
 };
 
 const DEFAULT_DYNAMIC_CMP_CONFIG: Required<DynamicComponentConfig> = {
@@ -73,6 +74,7 @@ export interface TransformOptions {
     customRendererConfig?: CustomRendererConfig;
     enableLwcSpread?: boolean;
     enableScopedSlots?: boolean;
+    disableSyntheticShadowSupport?: boolean;
 }
 
 type RequiredTransformOptions = Omit<

packages/@lwc/compiler/src/transformers/style.ts

@@ -25,6 +25,7 @@ export default function styleTransform(
                     : undefined,
         },
         scoped: config.scopedStyles,
+        disableSyntheticShadowSupport: config.disableSyntheticShadowSupport,
     };
 
     let res;

packages/@lwc/integration-karma/scripts/karma-configs/test/tags.js

@@ -14,6 +14,7 @@ const {
     ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE,
     ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY,
     DISABLE_ARIA_REFLECTION_POLYFILL,
+    DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER,
     NODE_ENV_FOR_TEST,
 } = require('../../shared/options');
 
@@ -25,6 +26,7 @@ const TAGS = [
     ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE && 'native-lifecycle',
     ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY && 'scoped-registry',
     DISABLE_ARIA_REFLECTION_POLYFILL && 'disable-aria-polyfill',
+    DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER && 'disable-synthetic-in-compiler',
     `NODE_ENV-${NODE_ENV_FOR_TEST}`,
 ].filter(Boolean);
 

packages/@lwc/integration-karma/scripts/karma-plugins/lwc.js

@@ -17,7 +17,7 @@ const { rollup } = require('rollup');
 const lwcRollupPlugin = require('@lwc/rollup-plugin');
 const compatRollupPlugin = require('rollup-plugin-compat');
 
-const { COMPAT } = require('../shared/options');
+const { COMPAT, DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER } = require('../shared/options');
 const Watcher = require('./Watcher');
 
 function createPreprocessor(config, emitter, logger) {
@@ -50,6 +50,7 @@ function createPreprocessor(config, emitter, logger) {
                 },
                 enableLwcSpread: true,
                 enableScopedSlots: true,
+                disableSyntheticShadowSupport: DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER,
             }),
         ];
 

packages/@lwc/integration-karma/scripts/shared/options.js

@@ -22,6 +22,9 @@ const ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY = Boolean(
     process.env.ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY
 );
 const DISABLE_ARIA_REFLECTION_POLYFILL = Boolean(process.env.DISABLE_ARIA_REFLECTION_POLYFILL);
+const DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER = Boolean(
+    process.env.DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER
+);
 const NODE_ENV_FOR_TEST = process.env.NODE_ENV_FOR_TEST;
 
 module.exports = {
@@ -32,6 +35,7 @@ module.exports = {
     DISABLE_ARIA_REFLECTION_POLYFILL,
     NODE_ENV_FOR_TEST,
     FORCE_NATIVE_SHADOW_MODE_FOR_TEST,
+    DISABLE_SYNTHETIC_SHADOW_SUPPORT_IN_COMPILER,
     SYNTHETIC_SHADOW_ENABLED: !DISABLE_SYNTHETIC,
     GREP: process.env.GREP,
     COVERAGE: Boolean(process.env.COVERAGE),

packages/@lwc/rollup-plugin/README.md

@@ -32,3 +32,4 @@ export default {
 -   `experimentalDynamicComponent` (type: `DynamicComponentConfig`, default: `null`) - The configuration to pass to `@lwc/compiler`.
 -   `enableLwcSpread` (type: `boolean`, default: `false`) - The configuration to pass to the `@lwc/template-compiler`.
 -   `enableScopedSlots` (type: `boolean`, default: `false`) - The configuration to pass to `@lwc/template-compiler` to enable scoped slots feature.
+-   `disableSyntheticShadowSupport` (type: `boolean`, default: `false`) - Set to true if synthetic shadow DOM support is not needed, which can result in smaller output.

packages/@lwc/rollup-plugin/src/__tests__/compilerConfig/compilerConfig.spec.ts

@@ -55,4 +55,23 @@ describe('templateConfig', () => {
 
         expect(output[0].code).toContain('Application container');
     });
+
+    it('should accept disableSyntheticShadowSupport config flag', async () => {
+        const bundle = await rollup({
+            input: path.resolve(__dirname, 'fixtures/test/test.js'),
+            plugins: [
+                lwc({
+                    disableSyntheticShadowSupport: true,
+                }),
+            ],
+        });
+
+        const { output } = await bundle.generate({
+            format: 'esm',
+        });
+
+        // This function takes no arguments, corresponding to the optimization used
+        // for `disableSyntheticShadowSupport: true` by serialize.ts in @lwc/style-compiler
+        expect(output[0].code).toContain('function stylesheet()');
+    });
 });

packages/@lwc/rollup-plugin/src/index.ts

@@ -35,6 +35,8 @@ export interface RollupLwcOptions {
     enableLwcSpread?: boolean;
     /** The configuration to pass to `@lwc/template-compiler` to enable scoped slots feature.*/
     enableScopedSlots?: boolean;
+    /** The configuration to pass to `@lwc/compiler` to disable synthetic shadow support */
+    disableSyntheticShadowSupport?: boolean;
 }
 
 const PLUGIN_NAME = 'rollup-plugin-lwc-compiler';
@@ -131,6 +133,7 @@ export default function lwc(pluginOptions: RollupLwcOptions = {}): Plugin {
         experimentalDynamicComponent,
         enableLwcSpread,
         enableScopedSlots,
+        disableSyntheticShadowSupport,
     } = pluginOptions;
 
     return {
@@ -253,6 +256,7 @@ export default function lwc(pluginOptions: RollupLwcOptions = {}): Plugin {
                 scopedStyles: scoped,
                 enableLwcSpread,
                 enableScopedSlots,
+                disableSyntheticShadowSupport,
             });
 
             if (warnings) {

packages/@lwc/style-compiler/README.md

@@ -47,6 +47,7 @@ const { code } = compile(source, 'example.css');
     -   `customProperties` (object, optional)
         -   `resolverModule` (boolean, optional) - module name for the custom properties resolve
     -   `scoped` (boolean, optional) - true if the styles are scoped (via Light DOM style scoping)
+    -   `disableSyntheticShadowSupport` (boolean, optional) - true if synthetic shadow DOM support is not needed, which can result in smaller output
 
 **Return:**
 

packages/@lwc/style-compiler/src/__tests__/fixtures/aria-attributes/expected.js

@@ -1,6 +1,7 @@
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
   return "[aria-labelledby]" + shadowSelector + " {}[aria-labelledby=\"bar\"]" + shadowSelector + " {}";
   /*LWC compiler vX.X.X*/
 }

packages/@lwc/style-compiler/src/__tests__/fixtures/back-slash/expected.js

@@ -1,6 +1,7 @@
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
   return ".foo" + shadowSelector + " {content: \"\\\\\";}";
   /*LWC compiler vX.X.X*/
 }

packages/@lwc/style-compiler/src/__tests__/fixtures/complex-selectors/expected.js

@@ -1,6 +1,7 @@
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
   return "h1" + shadowSelector + " > a" + shadowSelector + " {}h1" + shadowSelector + " + a" + shadowSelector + " {}div.active" + shadowSelector + " > p" + shadowSelector + " {}";
   /*LWC compiler vX.X.X*/
 }

packages/@lwc/style-compiler/src/__tests__/fixtures/data-attributes/expected.js

@@ -1,6 +1,7 @@
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
   return "[data-foo]" + shadowSelector + " {}[data-foo=\"bar\"]" + shadowSelector + " {}";
   /*LWC compiler vX.X.X*/
 }

packages/@lwc/style-compiler/src/__tests__/fixtures/dir-attribute/expected.js

@@ -1,6 +1,7 @@
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
   return "[dir=\"rtl\"]" + shadowSelector + " test" + shadowSelector + " {order: 0;}";
   /*LWC compiler vX.X.X*/
 }

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

@@ -0,0 +1,13 @@
+.foo {
+    animation-name: fadeIn;
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+    }
+
+    100% {
+        opacity: 1;
+    }
+}

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

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

packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support-keyframes/expected.js

@@ -0,0 +1,11 @@
+function stylesheet() {
+  var token;
+  var useActualHostSelector = true;
+  var useNativeDirPseudoclass = true;
+  var shadowSelector = token ? ("[" + token + "]") : "";
+  var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
+  return ".foo" + shadowSelector + " {animation-name: fadeIn" + suffixToken + ";}@keyframes fadeIn" + suffixToken + " {0% {opacity: 0;}100% {opacity: 1;}}";
+  /*LWC compiler vX.X.X*/
+}
+export default [stylesheet];

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

@@ -0,0 +1,2 @@
+:host(.foo) :dir(rtl) {
+}

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

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

packages/@lwc/style-compiler/src/__tests__/fixtures/disable-synthetic-shadow-support/expected.js

@@ -0,0 +1,11 @@
+function stylesheet() {
+  var token;
+  var useActualHostSelector = true;
+  var useNativeDirPseudoclass = true;
+  var shadowSelector = token ? ("[" + token + "]") : "";
+  var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
+  return ((useActualHostSelector ? (useNativeDirPseudoclass ? '' : '[dir="rtl"]') + " :host(.foo) " : (useNativeDirPseudoclass ? '' : '[dir="rtl"]') + " " + hostSelector + ".foo ")) + (useNativeDirPseudoclass ? ':dir(rtl)' : '') + " {}";
+  /*LWC compiler vX.X.X*/
+}
+export default [stylesheet];

packages/@lwc/style-compiler/src/__tests__/fixtures/escape-string-characters/expected.js

@@ -1,6 +1,7 @@
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
   return "h1" + shadowSelector + ":before {content: '$test\"escaping quote(\\')'}h1" + shadowSelector + ":after {content: \"$my test'escaping quote(\\\")\"}h2" + shadowSelector + ":before {content: \"\\\\\\\\\"}h2" + shadowSelector + ":after {content: \"`\"}";
   /*LWC compiler vX.X.X*/
 }

packages/@lwc/style-compiler/src/__tests__/fixtures/global-html-attributes/expected.js

@@ -1,6 +1,7 @@
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
   return "[hidden]" + shadowSelector + " {}[lang=\"fr\"]" + shadowSelector + " {}";
   /*LWC compiler vX.X.X*/
 }

packages/@lwc/style-compiler/src/__tests__/fixtures/host-functional-complex/expected.js

@@ -1,6 +1,7 @@
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
   return ((useActualHostSelector ? ":host(.foo, .bar) .baz" : hostSelector + ".foo .baz" + shadowSelector + " .quux" + shadowSelector + "," + hostSelector + ".bar .baz")) + shadowSelector + " .quux" + shadowSelector + " {color: black;}";
   /*LWC compiler vX.X.X*/
 }

packages/@lwc/style-compiler/src/__tests__/fixtures/host-functional/expected.js

@@ -1,6 +1,7 @@
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
   return ((useActualHostSelector ? ":host(.foo) {" : hostSelector + ".foo {")) + "}" + ((useActualHostSelector ? ":host(.foo) span" : hostSelector + ".foo span")) + shadowSelector + " {}" + ((useActualHostSelector ? ":host(:hover) {" : hostSelector + ":hover {")) + "}" + ((useActualHostSelector ? ":host(.foo, .bar) {" : hostSelector + ".foo," + hostSelector + ".bar {")) + "}";
   /*LWC compiler vX.X.X*/
 }

packages/@lwc/style-compiler/src/__tests__/fixtures/host-with-other-rule/expected.js

@@ -1,6 +1,7 @@
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
   return ".red" + shadowSelector + " {color: red;}" + ((useActualHostSelector ? ":host {" : hostSelector + " {")) + "margin-left: 5px;}";
   /*LWC compiler vX.X.X*/
 }

packages/@lwc/style-compiler/src/__tests__/fixtures/host/expected.js

@@ -1,6 +1,7 @@
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
+  var suffixToken = token ? ("-" + token) : "";
   return ((useActualHostSelector ? ":host {" : hostSelector + " {")) + "}";
   /*LWC compiler vX.X.X*/
 }

packages/@lwc/style-compiler/src/__tests__/fixtures/keyframes-with-custom-properties/expected.js

@@ -2,7 +2,8 @@ import varResolver from "custom-properties-resolver";
 function stylesheet(token, useActualHostSelector, useNativeDirPseudoclass) {
   var shadowSelector = token ? ("[" + token + "]") : "";
   var hostSelector = token ? ("[" + token + "-host]") : "";
-  return "@keyframes slidein" + (shadowSelector ? ('-' + shadowSelector.substring(1, shadowSelector.length - 1)) : '') + " {from {margin-left: 100%;}to {margin-left: 0%;}}div" + shadowSelector + " {color: " + (varResolver("--my-var")) + ";animation: 200ms slidein" + (shadowSelector ? ('-' + shadowSelector.substring(1, shadowSelector.length - 1)) : '') + ";}span" + shadowSelector + " {animation: " + (varResolver("--another-var")) + " slidein" + (shadowSelector ? ('-' + shadowSelector.substring(1, shadowSelector.length - 1)) : '') + ";}p" + shadowSelector + " {animation-name: slidein" + (shadowSelector ? ('-' + shadowSelector.substring(1, shadowSelector.length - 1)) : '') + ";animation-delay: 1s;}input" + shadowSelector + " {animation-name: spin;}";
+  var suffixToken = token ? ("-" + token) : "";
+  return "@keyframes slidein" + suffixToken + " {from {margin-left: 100%;}to {margin-left: 0%;}}div" + shadowSelector + " {color: " + (varResolver("--my-var")) + ";animation: 200ms slidein" + suffixToken + ";}span" + shadowSelector + " {animation: " + (varResolver("--another-var")) + " slidein" + suffixToken + ";}p" + shadowSelector + " {animation-name: slidein" + suffixToken + ";animation-delay: 1s;}input" + shadowSelector + " {animation-name: spin;}";
   /*LWC compiler vX.X.X*/
 }
 export default [stylesheet];