feat(compiler): add disableSyntheticShadowSupport option

.circleci/config.yml

@@ -57,6 +57,9 @@ commands:
       disable_aria_reflection_polyfill:
         type: boolean
         default: false
+      disable_synthetic_shadow_support_in_compiler:
+        type: boolean
+        default: false
     steps:
       - run:
           name: << parameters.command_name >>
@@ -81,6 +84,7 @@ commands:
             <<# parameters.enable_native_custom_element_lifecycle >> ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE=1 <</ parameters.enable_native_custom_element_lifecycle >> \
             <<# 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.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 >>
@@ -174,6 +178,9 @@ commands:
       disable_aria_reflection_polyfill:
         type: boolean
         default: false
+      disable_synthetic_shadow_support_in_compiler:
+        type: boolean
+        default: false
       compat:
         type: boolean
         default: false
@@ -189,6 +196,7 @@ commands:
           enable_native_custom_element_lifecycle: << parameters.enable_native_custom_element_lifecycle >>
           enable_scoped_custom_element_registry: << parameters.enable_scoped_custom_element_registry >>
           disable_aria_reflection_polyfill: << parameters.disable_aria_reflection_polyfill >>
+          disable_synthetic_shadow_support_in_compiler: << parameters.disable_synthetic_shadow_support_in_compiler >>
           compat: << parameters.compat >>
           coverage: << parameters.coverage >>
           command: yarn sauce
@@ -265,6 +273,9 @@ jobs:
       - run_karma:
           disable_synthetic: true
           disable_aria_reflection_polyfill: true
+      - run_karma:
+          disable_synthetic: true
+          disable_synthetic_shadow_support_in_compiler: true
       - retry_command:
           command_name: Run karma hydration tests
           command: yarn hydration:sauce

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-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) {
@@ -49,6 +49,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
+);
 
 module.exports = {
     // Test configuration
@@ -30,6 +33,7 @@ module.exports = {
     ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY,
     DISABLE_ARIA_REFLECTION_POLYFILL,
     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';
@@ -120,6 +122,7 @@ export default function lwc(pluginOptions: RollupLwcOptions = {}): Plugin {
         experimentalDynamicComponent,
         enableLwcSpread,
         enableScopedSlots,
+        disableSyntheticShadowSupport,
     } = pluginOptions;
 
     return {
@@ -224,6 +227,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/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,10 @@
+function stylesheet() {
+  var token;
+  var useActualHostSelector = true;
+  var useNativeDirPseudoclass = true;
+  var shadowSelector = token ? ("[" + token + "]") : "";
+  var hostSelector = token ? ("[" + token + "-host]") : "";
+  return ((useActualHostSelector ? (useNativeDirPseudoclass ? '' : '[dir="rtl"]') + " :host(.foo) " + (useNativeDirPseudoclass ? ':dir(rtl)' : '') + " {}" : (useNativeDirPseudoclass ? '' : '[dir="rtl"]') + " " + hostSelector + ".foo " + (useNativeDirPseudoclass ? ':dir(rtl)' : '') + " {}"));
+  /*LWC compiler vX.X.X*/
+}
+export default [stylesheet];

packages/@lwc/style-compiler/src/serialize.ts

@@ -40,6 +40,7 @@ const HOST_SELECTOR_IDENTIFIER = 'hostSelector';
 const SHADOW_SELECTOR_IDENTIFIER = 'shadowSelector';
 const USE_ACTUAL_HOST_SELECTOR = 'useActualHostSelector';
 const USE_NATIVE_DIR_PSEUDOCLASS = 'useNativeDirPseudoclass';
+const TOKEN = 'token';
 const STYLESHEET_IDENTIFIER = 'stylesheet';
 const VAR_RESOLVER_IDENTIFIER = 'varResolver';
 
@@ -50,6 +51,8 @@ export default function serialize(result: Result, config: Config): string {
     );
     const useVarResolver = messages.some(isVarFunctionMessage);
     const importedStylesheets = messages.filter(isImportMessage).map((message) => message.id);
+    const disableSyntheticShadow = Boolean(config.disableSyntheticShadowSupport);
+    const scoped = Boolean(config.scoped);
 
     let buffer = '';
 
@@ -71,21 +74,33 @@ export default function serialize(result: Result, config: Config): string {
 
     if (serializedStyle) {
         // inline function
-        buffer += `function stylesheet(token, ${USE_ACTUAL_HOST_SELECTOR}, ${USE_NATIVE_DIR_PSEUDOCLASS}) {\n`;
+        if (disableSyntheticShadow && !scoped) {
+            // If synthetic shadow DOM support is disabled and this is not a scoped stylesheet, then the
+            // function signature will always be:
+            //   stylesheet(token = undefined, useActualHostSelector = true, useNativeDirPseudoclass = true)
+            // This means that we can just have a function that takes no arguments and returns a string,
+            // reducing the bundle size when minified.
+            buffer += `function ${STYLESHEET_IDENTIFIER}() {\n`;
+            buffer += `  var ${TOKEN};\n`; // undefined
+            buffer += `  var ${USE_ACTUAL_HOST_SELECTOR} = true;\n`;
+            buffer += `  var ${USE_NATIVE_DIR_PSEUDOCLASS} = true;\n`;
+        } else {
+            buffer += `function ${STYLESHEET_IDENTIFIER}(${TOKEN}, ${USE_ACTUAL_HOST_SELECTOR}, ${USE_NATIVE_DIR_PSEUDOCLASS}) {\n`;
+        }
         // For scoped stylesheets, we use classes, but for synthetic shadow DOM, we use attributes
-        if (config.scoped) {
-            buffer += `  var ${SHADOW_SELECTOR_IDENTIFIER} = token ? ("." + token) : "";\n`;
-            buffer += `  var ${HOST_SELECTOR_IDENTIFIER} = token ? ("." + token + "-host") : "";\n`;
+        if (scoped) {
+            buffer += `  var ${SHADOW_SELECTOR_IDENTIFIER} = ${TOKEN} ? ("." + ${TOKEN}) : "";\n`;
+            buffer += `  var ${HOST_SELECTOR_IDENTIFIER} = ${TOKEN} ? ("." + ${TOKEN} + "-host") : "";\n`;
         } else {
-            buffer += `  var ${SHADOW_SELECTOR_IDENTIFIER} = token ? ("[" + token + "]") : "";\n`;
-            buffer += `  var ${HOST_SELECTOR_IDENTIFIER} = token ? ("[" + token + "-host]") : "";\n`;
+            buffer += `  var ${SHADOW_SELECTOR_IDENTIFIER} = ${TOKEN} ? ("[" + ${TOKEN} + "]") : "";\n`;
+            buffer += `  var ${HOST_SELECTOR_IDENTIFIER} = ${TOKEN} ? ("[" + ${TOKEN} + "-host]") : "";\n`;
         }
         buffer += `  return ${serializedStyle};\n`;
         buffer += `  /*${LWC_VERSION_COMMENT}*/\n`;
         buffer += `}\n`;
-        if (config.scoped) {
+        if (scoped) {
             // Mark the stylesheet as scoped so that we can distinguish it later at runtime
-            buffer += `stylesheet.${KEY__SCOPED_CSS} = true;\n`;
+            buffer += `${STYLESHEET_IDENTIFIER}.${KEY__SCOPED_CSS} = true;\n`;
         }
 
         // add import at the end

packages/@lwc/style-compiler/src/transform.ts

@@ -17,6 +17,8 @@ export interface Config {
     };
     /** Token that is used for scoping in light DOM scoped styles */
     scoped?: boolean;
+    /** When set to true, synthetic shadow DOM support is removed from the output JavaScript */
+    disableSyntheticShadowSupport?: boolean;
 }
 
 export function transform(src: string, id: string, config: Config = {}): { code: string } {