fix: stylesheetToken being validated too late (#5672)

* fix: stylesheetToken being validated too late

* test(wtr): use correct stylesheet token

---------

Co-authored-by: Will Harney <wharney@salesforce.com>

Author: abdulsattar

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

@@ -265,6 +265,10 @@ export function getStylesheetsContent(vm: VM, template: Template): ReadonlyArray
     const { stylesheets, stylesheetToken } = template;
     const { stylesheets: vmStylesheets } = vm;
 
+    if (!isUndefined(stylesheetToken) && !isValidScopeToken(stylesheetToken)) {
+        throw new Error('stylesheet token must be a valid string');
+    }
+
     const hasTemplateStyles = hasStyles(stylesheets);
     const hasVmStyles = hasStyles(vmStylesheets);
 

packages/@lwc/integration-wtr/test/rendering/invalid-stylesheet/index.spec.js

@@ -0,0 +1,38 @@
+import { createElement, setFeatureFlagForTest } from 'lwc';
+import HelloWorld from 'x/component';
+import { catchUnhandledRejectionsAndErrors } from '../../../helpers/utils.js';
+
+describe('stylesheet validation', () => {
+    let caughtError;
+
+    catchUnhandledRejectionsAndErrors((error) => {
+        caughtError = error;
+    });
+
+    beforeEach(() => {
+        setFeatureFlagForTest('DISABLE_SCOPE_TOKEN_VALIDATION', false);
+    });
+
+    afterEach(() => {
+        caughtError = undefined;
+    });
+
+    it('should not permit invalid stylesheets', async () => {
+        const elm = createElement('x-component', { is: HelloWorld });
+
+        try {
+            document.body.appendChild(elm);
+        } catch (err) {
+            // In synthetic custom element lifecycle, the error is thrown synchronously on `appendChild`
+            caughtError = err;
+        }
+
+        await Promise.resolve();
+
+        expect(caughtError).not.toBeUndefined();
+        expect(caughtError.message).toMatch(
+            /stylesheet token must be a valid string|Failed to execute 'setAttribute'|Invalid qualified name|String contains an invalid character|The string contains invalid characters/
+        );
+        expect(elm.stylesheet).not.toHaveBeenCalled();
+    });
+});

packages/@lwc/integration-wtr/test/rendering/invalid-stylesheet/x/component/component.js

@@ -0,0 +1,12 @@
+import { api, LightningElement } from 'lwc';
+import { fn } from '@vitest/spy';
+import tmpl from './template.html';
+
+export default class extends LightningElement {
+    @api stylesheet = fn();
+    render() {
+        tmpl.stylesheets = [this.stylesheet];
+        tmpl.stylesheetToken = 'stylesheet.token';
+        return tmpl;
+    }
+}

packages/@lwc/integration-wtr/test/rendering/invalid-stylesheet/x/component/template.html

@@ -0,0 +1,3 @@
+<template>
+    <p>Remuneration is an odd word.</p>
+</template>

packages/@lwc/integration-wtr/test/rendering/sanitize-stylesheet-token/index.spec.js

@@ -1,6 +1,7 @@
 import { createElement, setFeatureFlagForTest } from 'lwc';
 import Component from 'x/component';
 import Scoping from 'x/scoping';
+import Indirect from 'x/indirect';
 import { spyOn } from '@vitest/spy';
 import { catchUnhandledRejectionsAndErrors } from '../../../helpers/utils.js';
 import { resetAlreadyLoggedMessages, resetFragmentCache } from '../../../helpers/reset.js';
@@ -38,6 +39,11 @@ const components = [
         Ctor: Scoping,
         name: 'scoped styles',
     },
+    {
+        tagName: 'x-indirect',
+        Ctor: Indirect,
+        name: 'indirect styles',
+    },
 ];
 
 props.forEach((prop) => {

packages/@lwc/integration-wtr/test/rendering/sanitize-stylesheet-token/x/indirect/indirect.html

@@ -0,0 +1,9 @@
+<template>
+    <p>Lillian: Harold.</p>
+    <p>Fiona: Shrek.</p>
+    <p>Shrek: Fiona...</p>
+    <p>Harold: Fiona!</p>
+    <p>Fiona: Mommm!</p>
+    <p>Lillian: Harold!</p>
+    <p>Donkey: DONKEY!</p>
+</template>

packages/@lwc/integration-wtr/test/rendering/sanitize-stylesheet-token/x/indirect/indirect.js

@@ -0,0 +1,32 @@
+import { LightningElement, api } from 'lwc';
+import template from './indirect.html';
+
+export default class Indirect extends LightningElement {
+    @api propToUse;
+
+    render() {
+        const token = 'stylesheet.token';
+
+        const { propToUse } = this;
+        if (propToUse === 'stylesheetTokens') {
+            template[propToUse] = {
+                hostAttribute: token,
+                shadowAttribute: token,
+            };
+        } else {
+            template[propToUse] = token;
+        }
+
+        return template;
+    }
+}
+
+const { stylesheetToken, stylesheetTokens, legacyStylesheetToken } = template;
+
+Indirect.resetTemplate = () => {
+    Object.assign(template, {
+        stylesheetToken,
+        stylesheetTokens,
+        legacyStylesheetToken,
+    });
+};

packages/@lwc/integration-wtr/test/rendering/sanitize-stylesheet-token/x/indirect/indirect.scoped.css

@@ -0,0 +1,3 @@
+:host {
+    color: red;
+}