issue: #1478; single-chunk and in-head css;

Betarena · Aug 4, 2023 · 4e2767e · 4e2767e
1 parent d23a4e8
commit 4e2767e
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 79 deletions.
diff --git a/src/app.html b/src/app.html
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,7 +1,8 @@
 import { sveltekit } from '@sveltejs/kit/vite';
 import viteCompression from 'vite-plugin-compression';
-// import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 import { defineConfig } from 'vitest/config';
+import fs from 'fs';
 
 export default defineConfig
 (
@@ -35,83 +36,81 @@ export default defineConfig
 
       // ### IMPORTANT
       sveltekit(),
-      viteCompression(),
+      // viteCompression(),
       // ### IMPORTANT
 
       // ### NOTE:
       // ### comes from 'vite-plugin-css-injected-by-js'
       // ### WARNING:
       // ### overrides 'CSS' imported by 'svelte/+kit'
       // ### requires to be imported a '<link ... >' in the 'src/app.html'
-      /*
-        cssInjectedByJsPlugin
-        (
-          {
-
-            // relativeCSSInjection: true,
-
-            // topExecutionPriority: true,
-
-            // jsAssetsFilterFunction: function customJsAssetsfilterFunction
-            // (
-            //   outputChunk
-            // )
-            // {
+      cssInjectedByJsPlugin
+      (
+        {
 
-            //   // [🐞]
-            //   // ### NOTE:
-            //   // ### It appears, the 'outputChunk.filename' is of type:
-            //   // ### - _app/immutable/chunks/index.088b98a6.js
-            //   // ### - _app/immutable/chunks/index.8e8ca4ce.js
-            //   // ### etc.
-            //   // console.log(outputChunk.fileName);
+          // relativeCSSInjection: true,
+
+          // topExecutionPriority: true,
+
+          // jsAssetsFilterFunction: function customJsAssetsfilterFunction
+          // (
+          //   outputChunk
+          // )
+          // {
+
+          //   // [🐞]
+          //   // ### NOTE:
+          //   // ### It appears, the 'outputChunk.filename' is of type:
+          //   // ### - _app/immutable/chunks/index.088b98a6.js
+          //   // ### - _app/immutable/chunks/index.8e8ca4ce.js
+          //   // ### etc.
+          //   // console.log(outputChunk.fileName);
+
+          //   return outputChunk.fileName == 'index.js';
+          // }
+
+          // ### NOTE:
+          // ### definitive 'hack' solution for 'single CSS file' output chunk.
+          injectCode:
+          (
+            cssCode,
+            options
+          ): string =>
+          {
 
-            //   return outputChunk.fileName == 'index.js';
-            // }
+            const generateOneCssFile: boolean = false;
 
-            // ### NOTE:
-            // ### definitive 'hack' solution for 'single CSS file' output chunk.
-            injectCode:
-            (
-              cssCode,
-              options
-            ): string =>
+            if (generateOneCssFile)
             {
-
-              const generateOneCssFile: boolean = false;
-
-              if (generateOneCssFile)
-              {
-                // ### NOTE:
-                // ### the 'cssCode' generated contains some 'formatting' issues.
-                // ### remove 1st and last speech marks.
-                // ### remove cases of `\n` chars.
-                // ### correct custom case of 'ids'/'classes' using the 'forward-slash' in the declaration.
-                let cssCodeMod: string = cssCode.slice(1, -1);
-                cssCodeMod = cssCodeMod.replace(/\\n/g, "");
-                cssCodeMod = cssCodeMod.replace(/\\\\/g,"\\")
-
-                // ### WARNING:
-                // ### 'all-css-chunk.css' must exist inside '/static'
-                fs.writeFile
-                (
-                  './static/all-css-chunk.css',
-                  cssCodeMod,
-                  err =>
-                  {
-                    if (err) console.error(err);
-                  }
-                );
-              }
-
-              return '';
-
-              // return `try{if(typeof document != 'undefined'){var elementStyle = document.createElement('style');elementStyle.appendChild(document.createTextNode(${cssCode}));document.head.appendChild(elementStyle);}}catch(e){console.error('vite-plugin-css-injected-by-js', e);}`
+              // ### NOTE:
+              // ### the 'cssCode' generated contains some 'formatting' issues.
+              // ### remove 1st and last speech marks.
+              // ### remove cases of `\n` chars.
+              // ### correct custom case of 'ids'/'classes' using the 'forward-slash' in the declaration.
+              let cssCodeMod: string = cssCode.slice(1, -1);
+              cssCodeMod = cssCodeMod.replace(/\\n/g, "");
+              cssCodeMod = cssCodeMod.replace(/\\\\/g,"\\")
+
+              // ### WARNING:
+              // ### 'all-css-chunk.css' must exist inside '/static'
+              fs.writeFile
+              (
+                './static/all-css-chunk.css',
+                cssCodeMod,
+                err =>
+                {
+                  if (err) console.error(err);
+                }
+              );
             }
 
+            return '';
+
+            // return `try{if(typeof document != 'undefined'){var elementStyle = document.createElement('style');elementStyle.appendChild(document.createTextNode(${cssCode}));document.head.appendChild(elementStyle);}}catch(e){console.error('vite-plugin-css-injected-by-js', e);}`
           }
-        ),
-      */
+
+        }
+      ),
 
     ],
 
@@ -132,12 +131,11 @@ export default defineConfig
       {
         output:
         {
-          manualChunks: undefined
+          // manualChunks: undefined
 
           // ### SEE:
           // ### https://github.com/vitejs/vite/discussions/9440#discussioncomment-5913798
           // ### https://stackoverflow.com/questions/68643743/separating-material-ui-in-vite-rollup-as-a-manual-chunk-to-reduce-chunk-size
-          /*
             manualChunks
             (
               id,
@@ -167,7 +165,7 @@ export default defineConfig
                     if (err) console.error(err);
                   }
                 );
-              * /
+              */
 
               // ### NOTE:
               // ### testing for 'per-page' component build split.
@@ -176,9 +174,9 @@ export default defineConfig
               // if (id.includes('src/lib/components/_main_'))
               //   return 'M-main-single-chunk';
               // ;
-              // if (id.includes('src/lib/components/page/home'))
-              //   return 'M-homepage-single-chunk';
-              // ;
+              if (id.includes('src/'))
+                return 'M-homepage-single-chunk';
+              ;
               // if (id.includes('src/lib/store/'))
               //   return 'M-stores-single-chunk';
               // ;
@@ -211,7 +209,6 @@ export default defineConfig
               // if (id.includes('node_modules'))
               //   return id.toString().split('node_modules/')[1].split('/')[0].toString();
             }
-          */
         }
       }
     },