feat(compiler): return cssScopeTokens

packages/@lwc/compiler/README.md

@@ -63,6 +63,7 @@ const { code } = transformSync(source, filename, options);
 -   `code` (string) - the compiled source code.
 -   `map` (object) - the generated source map.
 -   `warnings` (array, optional) - the array of diagnostic warnings, if any.
+-   `cssScopeTokens` (array, optional) - String tokens used for style scoping in synthetic shadow DOM and `*.scoped.css` (as either attributes or classes), if any.
 
 ### `transform` (deprecated)
 

packages/@lwc/compiler/src/transformers/__tests__/transform-html.spec.ts

@@ -125,6 +125,17 @@ describe('transformSync', () => {
         expect(code).not.toMatch('renderer: renderer');
     });
 
+    it('should return scope tokens', () => {
+        const template = `
+            <template>
+                <div>Hello</div>
+            </template>
+        `;
+        const { cssScopeTokens } = transformSync(template, 'foo.html', TRANSFORMATION_OPTIONS);
+
+        expect(cssScopeTokens).toEqual(['x-foo_foo', 'x-foo_foo-host']);
+    });
+
     describe('dynamic components', () => {
         it('should allow dynamic components when enableDynamicComponents is set to true', () => {
             const template = `

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

@@ -38,6 +38,8 @@ export default function templateTransform(
         enableDynamicComponents,
         experimentalDynamicDirective: deprecatedDynamicDirective,
         instrumentation,
+        namespace,
+        name,
     } = options;
     const experimentalDynamicDirective =
         deprecatedDynamicDirective ?? Boolean(experimentalDynamicComponent);
@@ -68,12 +70,20 @@ export default function templateTransform(
     // thrown above. As for "Log" and "Fatal", they are currently unused.
     const warnings = result.warnings.filter((_) => _.level === DiagnosticLevel.Warning);
 
+    const scopeToken = escapeScopeToken(
+        `${namespace}-${name}_${path.basename(filename, path.extname(filename))}`
+    );
+
     // Rollup only cares about the mappings property on the map. Since producing a source map for
     // the template doesn't make sense, the transform returns an empty mappings.
     return {
-        code: serialize(result.code, filename, options),
+        code: serialize(result.code, filename, scopeToken),
         map: { mappings: '' },
         warnings,
+        cssScopeTokens: [
+            scopeToken,
+            `${scopeToken}-host`, // implicit scope token created by `makeHostToken()` in `@lwc/engine-core`
+        ],
     };
 }
 
@@ -83,16 +93,10 @@ function escapeScopeToken(input: string) {
     return input.replace(/@/g, '___at___').replace(/#/g, '___hash___');
 }
 
-function serialize(
-    code: string,
-    filename: string,
-    { namespace, name }: NormalizedTransformOptions
-): string {
+function serialize(code: string, filename: string, scopeToken: string): string {
     const cssRelPath = `./${path.basename(filename, path.extname(filename))}.css`;
     const scopedCssRelPath = `./${path.basename(filename, path.extname(filename))}.scoped.css`;
-    const scopeToken = escapeScopeToken(
-        `${namespace}-${name}_${path.basename(filename, path.extname(filename))}`
-    );
+
     let buffer = '';
     buffer += `import { freezeTemplate } from "lwc";\n\n`;
     buffer += `import _implicitStylesheets from "${cssRelPath}";\n\n`;

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

@@ -23,6 +23,7 @@ export interface TransformResult {
     code: string;
     map: unknown;
     warnings?: CompilerDiagnostic[];
+    cssScopeTokens?: string[];
 }
 
 /**

packages/@lwc/engine-core/src/framework/stylesheet.ts

@@ -34,6 +34,7 @@ export type StylesheetFactory = (
 export type TemplateStylesheetFactories = Array<StylesheetFactory | TemplateStylesheetFactories>;
 
 function makeHostToken(token: string) {
+    // Note: if this ever changes, update the `cssScopeTokens` returned by `@lwc/compiler`
     return `${token}-host`;
 }