fixes #571

docs/resources/changelog.md

@@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Fixed a bug that caused `<sl-progress-ring>` to render the wrong size when `--track-width` was increased [#656](https://github.com/shoelace-style/shoelace/issues/656)
 - Implemented stricter linting to improve consistency and reduce errors, which resulted in many small refactors throughout the codebase [#647](https://github.com/shoelace-style/shoelace/pull/647)
 - Improved accessibility of `<sl-dialog>` and `<sl-drawer>` by making the title an `<h2>` and adding a label to the close button
+- Refactored themes so utility styles are no longer injected as `<style>` elements to support stricter CSP rules [#571](https://github.com/shoelace-style/shoelace/issues/571)
 - Restored the nicer animation on `<sl-spinner>` and verified it works in Safari
 - Updated minimum Node version to 14.17
 

scripts/build.js

@@ -29,7 +29,7 @@ fs.mkdirSync(outdir, { recursive: true });
     execSync(`node scripts/make-search.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-react.js`, { stdio: 'inherit' });
     execSync(`node scripts/make-vscode-data.js --outdir "${outdir}"`, { stdio: 'inherit' });
-    execSync(`node scripts/make-css.js --outdir "${outdir}"`, { stdio: 'inherit' });
+    execSync(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
     execSync(`node scripts/make-icons.js --outdir "${outdir}"`, { stdio: 'inherit' });
     if (types) execSync(`tsc --project ./tsconfig.prod.json --outdir "${outdir}"`, { stdio: 'inherit' });
   } catch (err) {
@@ -155,7 +155,7 @@ fs.mkdirSync(outdir, { recursive: true });
         .then(() => {
           // Rebuild stylesheets when a theme file changes
           if (/^src\/themes/.test(filename)) {
-            execSync(`node scripts/make-css.js --outdir "${outdir}"`, { stdio: 'inherit' });
+            execSync(`node scripts/make-themes.js --outdir "${outdir}"`, { stdio: 'inherit' });
           }
         })
         .then(() => {

scripts/make-themes.js

@@ -0,0 +1,62 @@
+//
+// This script bakes and copies themes, then generates a corresponding Lit stylesheet in dist/themes
+//
+import chalk from 'chalk';
+import commandLineArgs from 'command-line-args';
+import fs from 'fs';
+import { mkdirSync } from 'fs';
+import { globbySync } from 'globby';
+import path from 'path';
+import prettier from 'prettier';
+import stripComments from 'strip-css-comments';
+
+const { outdir } = commandLineArgs({ name: 'outdir', type: String });
+const files = globbySync('./src/themes/**/[!_]*.css');
+const filesToEmbed = globbySync('./src/themes/**/_*.css');
+const themesDir = path.join(outdir, 'themes');
+const embeds = {};
+
+console.log('Generating stylesheets');
+
+mkdirSync(themesDir, { recursive: true });
+
+try {
+  // Gather an object containing the source of all files named "_filename.css" so we can embed them later
+  filesToEmbed.forEach(file => {
+    embeds[path.basename(file)] = fs.readFileSync(file, 'utf8');
+  });
+
+  // Loop through each theme file, copying the .css and generating a .js version for Lit users
+  files.forEach(file => {
+    let source = fs.readFileSync(file, 'utf8');
+
+    // If the source has "/* _filename.css */" in it, replace it with the embedded styles
+    Object.keys(embeds).forEach(key => {
+      source = source.replace(`/* ${key} */`, embeds[key]);
+    });
+
+    const css = prettier.format(stripComments(source), {
+      parser: 'css'
+    });
+
+    let js = prettier.format(
+      `
+      import { css } from 'lit';
+
+      export default css\`
+        ${css}
+      \`;
+    `,
+      { parser: 'babel-ts' }
+    );
+
+    const cssFile = path.join(themesDir, path.basename(file));
+    const jsFile = path.join(themesDir, path.basename(file).replace('.css', '.styles.js'));
+
+    fs.writeFileSync(cssFile, css, 'utf8');
+    fs.writeFileSync(jsFile, js, 'utf8');
+  });
+} catch (err) {
+  console.error(chalk.red('Error generating stylesheets!'));
+  console.error(err);
+}

src/styles/component.styles.ts

@@ -1,5 +1,4 @@
 import { css } from 'lit';
-import utilityStyles from '~/styles/utility.styles';
 
 export default css`
   :host {
@@ -16,8 +15,3 @@ export default css`
     display: none !important;
   }
 `;
-
-// All components import this file, so it's a good place to ensure utility styles are applied to the light DOM
-const style = document.createElement('style');
-style.textContent = utilityStyles.toString();
-document.head.append(style);

src/themes/_utility.css

@@ -0,0 +1,25 @@
+/*
+ * This file contains utility classes that can't be contained in a component and must be applied to the light DOM. None
+ * of the rules in this stylesheet should target component tags or HTML tags, and all classes *must* start with ".sl-"
+ * to reduce the possibility of collisions.
+ */
+
+.sl-scroll-lock {
+  overflow: hidden !important;
+}
+
+.sl-toast-stack {
+  position: fixed;
+  top: 0;
+  right: 0;
+  z-index: var(--sl-z-index-toast);
+  width: 28rem;
+  max-width: 100%;
+  max-height: 100%;
+  overflow: auto;
+}
+
+.sl-toast-stack sl-alert {
+  --box-shadow: var(--sl-shadow-large);
+  margin: var(--sl-spacing-medium);
+}