feat: 🎸 detect elderjs css

Elderjs · Nov 25, 2020 · 8f36452 · 8f36452
1 parent e7623a9
commit 8f36452
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 23 deletions.
diff --git a/packages/critical-path-css/README.md b/packages/critical-path-css/README.md
@@ -4,13 +4,12 @@ Easily generate critical path css for your Elder.js websites using [critical](ht
 
 While Svelte does a great job of scoping CSS usually you'll have a site wide css file to hold common styles.
 
-If you're using a common css file and are optimizing for load speed, you'll want to defer the common css file and include critical path css. 
+If you're using a common css file and are optimizing for load speed, you'll want to defer the common css file and include critical path css.
 
 This plugin generates the critical path css for each of your templates and automatically includes it in the head when generating the page.
 
 Further Reading: (If you're unfamiliar with why you'd want to use critical path css, we suggest you do some googling on "Critical Path CSS", "FOUC", "Cumulative Layout Shift", and "Lighthouse Audit.")
 
-
 ## Install
 
 ```bash
@@ -19,14 +18,12 @@ npm install --save @elderjs/plugin-critical-path-css
 
 ## Config
 
-
 Once installed, open your `elder.config.js` and configure the plugin by adding `@elderjs/plugin-critical-path-css` to your plugin object.
 
 ```javascript
 plugins: {
 
   '@elderjs/plugin-critical-path-css': {
-    cssFile: './src/assets/style.css', // location of your website's css file. also accepts an array of files.
     rebuild: false, // set to true to rebuild the critical path css on next build. NOTE: completely overwrites allRequests.
     folder: `./src/assets/critical/`, // relative to root of the project.
     requests: false, // used to specify the specific requests you want used for critical path css generation.
@@ -67,8 +64,8 @@ plugins: {
     requests: { // used to specify the specific requests you want used for critical path css generation.
       home: [{slug:'/'}],
       blog: [{slug: 'my-first-blog'}, {slug: 'elderjs-rocks'}]
-    }, 
-    cssFile: './src/assets/style.css', // location of your website's css file. also accepts an array of files.
+    },
+    cssFile: ['./src/assets/style.css'], // location of your website's css file. also accepts an array of files.
     rebuild: false, // set to true to rebuild the critical path css on next build. NOTE: completely overwrites allRequests.
     folder: `./src/assets/critical/`, // relative to root of the project.
     disable: false, // if for some reason you don't want the critical path css added when the file exists. Also disables building.
@@ -92,14 +89,14 @@ plugins: {
 }
 ```
 
-## Recommended NPM Script: 
+## Recommended NPM Script:
 
-You probably don't want to tinker with your `elder.config.js` file each time you want to rebuild so this plugin accepts the `ELDER_REBUILD_CRITICAL_PATH` env variable. 
+You probably don't want to tinker with your `elder.config.js` file each time you want to rebuild so this plugin accepts the `ELDER_REBUILD_CRITICAL_PATH` env variable.
 
 If that is the case, update your `package.json` file to include the following script:
 
 `"build:critical": "ELDER_REBUILD_CRITICAL_PATH=true node ./src/build",`
 
 Then you can run it using `npm run build:critical`.
 
-Note: this assumes your build file is at `./src/build` so update the script accordingly.
+Note: this assumes your build file is at `./src/build` so update the script accordingly.
diff --git a/packages/critical-path-css/index.js b/packages/critical-path-css/index.js
@@ -61,23 +61,24 @@ const plugin = {
             }
           }
         } else {
-          plugin.config.rebuild = false;
-          console.log(
-            `elder-plugin-critical-path-css.config.cssFile in your elder.config.js should be a path to all of the css on your site relative to the root of your project.`,
-          );
-        }
-      } else {
-        const cssLocation = path.resolve(plugin.settings.rootDir, plugin.config.cssFile);
-        if (fs.existsSync(cssLocation)) {
-          plugin.internal.cssLocations.push(cssLocation);
-        } else {
-          console.log(`elder-plugin-critical-path-css could not find your css at ${cssLocation}.`);
-          plugin.config.rebuilding = false;
+          const cssLocation = path.resolve(plugin.settings.rootDir, plugin.config.cssFile);
+          if (fs.existsSync(cssLocation)) {
+            plugin.internal.cssLocations.push(cssLocation);
+          } else {
+            console.log(`elder-plugin-critical-path-css could not find your css at ${cssLocation}.`);
+            plugin.config.rebuilding = false;
+          }
         }
       }
 
       if (plugin.config.rebuild === true && plugin.settings.build) {
         plugin.config.rebuilding = true;
+        if (plugin.settings && plugin.settings.$$internal && plugin.settings.$$internal.publicCssFile) {
+          const elderJsCss = path.resolve(plugin.settings.distDir, `.${plugin.settings.$$internal.publicCssFile}`);
+          if (fs.existsSync(elderJsCss)) {
+            plugin.internal.cssLocations.push(elderJsCss);
+          }
+        }
       }
 
       if (plugin.config.rebuilding) {
@@ -244,7 +245,7 @@ const plugin = {
       priority: 100, // we want it to be last so we don't kill early.
       run: async ({ plugin }) => {
         if (plugin.config.rebuilding === true && !plugin.internal.disable) {
-          process.exit(0);
+          // process.exit(0);
         }
       },
     },
@@ -270,7 +271,7 @@ const plugin = {
         },
       ],
     },
-    cssFile: './src/assets/style.css',
+    cssFile: undefined,
   },
 };