fix: swap internal stylesheets from CSSResult to CSSStyleSheet

We're making this change to better support providing component-less styles as an API for features like typography. This isn't a breaking change because our stylesheets are internal and can still be used in LitElement's static styles.

If you were using `CSSResult`-specific features from the internal styles:

- If using `styles.styleSheet`, use `styles` directly
- If using `styles.cssText` or `styles.toString()`, use `Array.from(styles.cssRules).map(rule => rule.cssText).join('')`

PiperOrigin-RevId: 606758555

.gitignore

@@ -1,7 +1,6 @@
 node_modules
 *.js
 !web-test-runner.config.js
-!css-to-ts.js
 !commitlint.config.js
 *.css
 *-styles.ts

package.json

@@ -39,13 +39,12 @@
     "**/*.js.map",
     "**/*.d.ts",
     "**/*.scss",
-    "!css-to-ts.js",
     "!web-test-runner.config.js",
     "!commitlint.config.js",
     "!**/test/**",
     "!**/*_test.*",
     "!.wireit/**",
-    "!catalog",
+    "!catalog/",
     "!scripts/",
     "!**/testing/**",
     "testing/harness.{js,js.map,d.ts}",
@@ -87,20 +86,18 @@
         "**/*.ts",
         "!**/*.d.ts",
         "!**/*-styles.ts",
-        "!catalog",
-        "!scripts/",
-        "!node_modules"
+        "!catalog/",
+        "!scripts/"
       ],
       "output": [
         ".tsbuildinfo",
         "**/*.js",
         "**/*.js.map",
         "**/*.d.ts",
-        "!css-to-ts.js",
         "!web-test-runner.config.js",
         "!commitlint.config.js",
         "!types/",
-        "!catalog",
+        "!catalog/",
         "!scripts/"
       ],
       "clean": "if-file-deleted",
@@ -109,34 +106,30 @@
       ]
     },
     "build:css-to-ts": {
-      "command": "find . \\( -path ./.wireit -o -path ./node_modules -o -path ./catalog \\) -prune -o -name '*-styles.css' -print | xargs node css-to-ts.js",
+      "command": "find . \\( -path ./.wireit -o -path ./node_modules -o -path ./catalog \\) -prune -o -name '*-styles.css' -print | xargs -L1 node scripts/css-to-ts.js",
       "files": [
-        "css-to-ts.js",
-        "!scripts/",
-        "!node_modules"
+        "**/*-styles.css",
+        "!catalog/"
       ],
       "output": [
         "**/*-styles.ts",
-        "!catalog",
-        "!scripts/"
+        "!catalog/"
       ],
       "dependencies": [
+        "build:scripts",
         "build:sass"
       ]
     },
     "build:sass": {
       "command": "sass --style=compressed --load-path=node_modules --load-path=node_modules/sass-true/sass $(ls -d */ | grep -vE 'node_modules|catalog')",
       "files": [
         "**/*.scss",
-        "!catalog",
-        "!scripts/",
-        "!node_modules"
+        "!catalog/"
       ],
       "output": [
         "**/*.css",
         "**/*.css.map",
-        "!catalog",
-        "!scripts/"
+        "!catalog/"
       ]
     },
     "test": {
@@ -177,10 +170,9 @@
         "**/*.ts",
         "!**/*.d.ts",
         "!**/*-styles.ts",
-        "!catalog",
+        "!catalog/",
         "!scripts/",
-        "scripts/analyzer/update-docs.js",
-        "!node_modules"
+        "scripts/analyzer/update-docs.js"
       ],
       "output": [],
       "dependencies": [

scripts/css-to-ts.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ * Copyright 2022 Google LLC
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import * as fs from 'fs';
+
+const cssFilePath = process.argv[2];
+if (!cssFilePath) {
+  throw new Error('Usage: css-to-ts.js input.css');
+}
+
+const tsFilePath = process.argv[3] || cssFilePath.replace('.css', '.ts');
+const cssContent = fs
+  .readFileSync(cssFilePath, {encoding: 'utf8'})
+  // Remove source map comments since the css is embedded.
+  // "/*# sourceMappingURL=checkbox-styles.css.map */"
+  .replace(/\/\*#\ sourceMappingURL=[^\*]+ \*\//, '');
+
+const tsContent = `/**
+* @license
+* Copyright 2024 Google LLC
+* SPDX-License-Identifier: Apache-2.0
+*/
+/** Generated CSSStyleSheet for ${cssFilePath}. */
+export const styles = new CSSStyleSheet();
+styles.replaceSync(\`${cssContent}\`);
+`;
+
+fs.writeFileSync(tsFilePath, tsContent);