diff --git a/packages/@lwc/compiler/README.md b/packages/@lwc/compiler/README.md
index 851161c1aa..71d7ca8a28 100644
--- a/packages/@lwc/compiler/README.md
+++ b/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)
diff --git a/packages/@lwc/compiler/src/transformers/__tests__/transform-html.spec.ts b/packages/@lwc/compiler/src/transformers/__tests__/transform-html.spec.ts
index 67e93b8740..ae5358fd08 100644
--- a/packages/@lwc/compiler/src/transformers/__tests__/transform-html.spec.ts
+++ b/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 = `
+
+ Hello
+
+ `;
+ 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 = `
diff --git a/packages/@lwc/compiler/src/transformers/template.ts b/packages/@lwc/compiler/src/transformers/template.ts
index f205269db0..2b3d14bb6a 100755
--- a/packages/@lwc/compiler/src/transformers/template.ts
+++ b/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`;
diff --git a/packages/@lwc/compiler/src/transformers/transformer.ts b/packages/@lwc/compiler/src/transformers/transformer.ts
index 2a95e290d9..f03598f7e2 100755
--- a/packages/@lwc/compiler/src/transformers/transformer.ts
+++ b/packages/@lwc/compiler/src/transformers/transformer.ts
@@ -23,6 +23,7 @@ export interface TransformResult {
code: string;
map: unknown;
warnings?: CompilerDiagnostic[];
+ cssScopeTokens?: string[];
}
/**
diff --git a/packages/@lwc/engine-core/src/framework/stylesheet.ts b/packages/@lwc/engine-core/src/framework/stylesheet.ts
index b6850d7b72..f5fe91fa56 100644
--- a/packages/@lwc/engine-core/src/framework/stylesheet.ts
+++ b/packages/@lwc/engine-core/src/framework/stylesheet.ts
@@ -34,6 +34,7 @@ export type StylesheetFactory = (
export type TemplateStylesheetFactories = Array;
function makeHostToken(token: string) {
+ // Note: if this ever changes, update the `cssScopeTokens` returned by `@lwc/compiler`
return `${token}-host`;
}