fix: reconfigure CSS bundling (#2853)

* fix: reconfigure CSS bundling I've also added an E2E test group that gives us some basic monitoring for regressions in the CSS inclusion behavior. Closes #2847 * build: only distribute one copy of the css bundle We still generate all three copies, we just delete the extra ones at the end of the build process. * Reduce the number of builds --------- Co-authored-by: Robbie Wagner <rwwagner90@gmail.com>
shepherd-pro · Jun 7, 2024 · cd50bb5 · cd50bb5
1 parent 53ef038
commit cd50bb5
Show file tree

Hide file tree

Showing 6 changed files with 92 additions and 66 deletions.
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/shepherd.js/package.json b/shepherd.js/package.json
@@ -31,10 +31,7 @@
         "default": "./dist/cjs/shepherd.cjs"
       }
     },
-    "./dist/css/shepherd.css": {
-      "import": "./dist/css/shepherd.css",
-      "require": "./dist/css/shepherd.css"
-    },
+    "./dist/css/shepherd.css": "./dist/css/shepherd.css",
     "./*": {
       "import": {
         "types": "./dist/esm/*.d.ts",
@@ -80,7 +77,6 @@
     "@rollup/plugin-replace": "^5.0.5",
     "autoprefixer": "^10.4.19",
     "cssnano": "^7.0.1",
-    "del": "^7.1.0",
     "eslint-plugin-svelte": "^2.39.0",
     "execa": "^9.1.0",
     "postcss": "^8.4.38",

diff --git a/shepherd.js/rollup.config.mjs b/shepherd.js/rollup.config.mjs
@@ -30,7 +30,7 @@ const plugins = [
     preprocess: sveltePreprocess({
       typescript: true
     }),
-    emitCss: false
+    emitCss: true
   }),
   nodeResolve({
     browser: true,
@@ -44,6 +44,10 @@ const plugins = [
   babel({
     extensions: ['.cjs', '.js', '.ts', '.mjs', '.html', '.svelte']
   }),
+  postcss({
+    plugins: [autoprefixer, cssnanoPlugin],
+    extract: 'css/shepherd.css'
+  }),
   license({
     banner
   }),
@@ -60,41 +64,6 @@ if (process.env.DEVELOPMENT) {
 }
 
 export default [
-  // This first build is just to generate the CSS
-  {
-    input: 'src/shepherd.ts',
-
-    output: {
-      dir: 'dist',
-      entryFileNames: '[name].mjs',
-      format: 'es',
-      sourcemap: true
-    },
-    plugins: [
-      svelte({
-        preprocess: sveltePreprocess({
-          typescript: true
-        }),
-        emitCss: true
-      }),
-      nodeResolve({
-        browser: true,
-        exportConditions: ['svelte'],
-        extensions: ['.js', '.json', '.mjs', '.svelte', '.ts'],
-        modulesOnly: true
-      }),
-      replace({
-        'process.env.NODE_ENV': JSON.stringify(env)
-      }),
-      babel({
-        extensions: ['.cjs', '.js', '.ts', '.mjs', '.html', '.svelte']
-      }),
-      postcss({
-        plugins: [autoprefixer, cssnanoPlugin],
-        extract: 'css/shepherd.css'
-      })
-    ]
-  },
   {
     input: 'src/shepherd.ts',
 
@@ -173,7 +142,7 @@ export default [
       }),
       ...plugins,
       {
-        name: 'Build Declarations',
+        name: 'Fix CJS exports',
         closeBundle: async () => {
           console.log('Fix CJS export default -> export =');
 
@@ -189,6 +158,29 @@ export default [
           );
           fs.writeFileSync(declarationFile, content);
         }
+      },
+      {
+        name: 'Fix CSS',
+        closeBundle: async () => {
+          console.log('Copying CSS to the root');
+
+          await execaCommand(`mkdir ./dist/css`, {
+            stdio: 'inherit'
+          });
+
+          await execaCommand(
+            `cp ./dist/esm/css/shepherd.css ./dist/css/shepherd.css`,
+            {
+              stdio: 'inherit'
+            }
+          );
+
+          console.log('Deleting extra CSS files');
+
+          await execaCommand(`rimraf ./dist/esm/css ./dist/cjs/css`, {
+            stdio: 'inherit'
+          });
+        }
       }
     ]
   }

diff --git a/test/cypress/examples/css/no-css-import.html b/test/cypress/examples/css/no-css-import.html
@@ -0,0 +1,16 @@
+<html>
+  <head>
+    <script type="module">
+      import Shepherd from '../../node_modules/shepherd.js/dist/esm/shepherd.mjs';
+      window.Shepherd = Shepherd;
+    </script>
+  </head>
+
+  <body>
+    <div
+      data-test-id="fake-modal-overlay"
+      class="shepherd-modal-overlay-container"
+    >
+    </div>
+  </body>
+</html>
diff --git a/test/cypress/examples/css/with-css-import.html b/test/cypress/examples/css/with-css-import.html
@@ -0,0 +1,20 @@
+<html>
+  <head>
+    <link
+      rel="stylesheet"
+      href="../../node_modules/shepherd.js/dist/css/shepherd.css"
+    />
+    <script type="module">
+      import Shepherd from '../../node_modules/shepherd.js/dist/esm/shepherd.mjs';
+      window.Shepherd = Shepherd;
+    </script>
+  </head>
+
+  <body>
+    <div
+      data-test-id="fake-modal-overlay"
+      class="shepherd-modal-overlay-container"
+    >
+    </div>
+  </body>
+</html>
diff --git a/test/cypress/integration/css.cy.js b/test/cypress/integration/css.cy.js
@@ -0,0 +1,20 @@
+/*
+ * The `.shepherd-modal-overlay-container` class is chosen for inspection
+ * because the Svelte styles for the modal are added to the import graph as
+ * soon as Shepherd's JS is imported at all:
+ *
+ * shepherd.ts -> tour.ts -> components/shepherd-modal.svelte
+ */
+describe('CSS Import Behavior', () => {
+  it('includes project styles when explicitly imported', () => {
+    cy.visit('/examples/css/with-css-import');
+    cy.window().should('have.property', 'Shepherd');
+    cy.get('[data-test-id="fake-modal-overlay"]').should('have.css', 'pointer-events', 'none');
+  });
+
+  it('DOES NOT include project styles without explicit import', () => {
+    cy.visit('/examples/css/no-css-import');
+    cy.window().should('have.property', 'Shepherd');
+    cy.get('[data-test-id="fake-modal-overlay"]').should('not.have.css', 'pointer-events', 'none');
+  });
+});