feat: ✨ optimize css sizes

package-lock.json

@@ -14,6 +14,7 @@
             "devDependencies": {
                 "browser-sync": "^2.29.3",
                 "chokidar": "^3.5.3",
+                "css-tree": "^2.3.1",
                 "eslint": "^8.43.0",
                 "fabric": "5.3",
                 "imagemin-zopfli": "^7.0.0",
@@ -1629,7 +1630,7 @@
         },
         "node_modules/css-tree": {
             "version": "2.3.1",
-            "resolved": "http://localhost:4873/css-tree/-/css-tree-2.3.1.tgz",
+            "resolved": "http://verdaccio.local/css-tree/-/css-tree-2.3.1.tgz",
             "integrity": "sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==",
             "dev": true,
             "license": "MIT",
@@ -6029,9 +6030,9 @@
             }
         },
         "node_modules/source-map-js": {
-            "version": "1.0.2",
+            "version": "1.2.0",
-            "resolved": "http://localhost:4873/source-map-js/-/source-map-js-1.0.2.tgz",
+            "resolved": "http://verdaccio.local/source-map-js/-/source-map-js-1.2.0.tgz",
-            "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+            "integrity": "sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==",
             "dev": true,
             "license": "BSD-3-Clause",
             "engines": {

package.json

@@ -16,6 +16,7 @@
     "devDependencies": {
         "browser-sync": "^2.29.3",
         "chokidar": "^3.5.3",
+        "css-tree": "^2.3.1",
         "eslint": "^8.43.0",
         "fabric": "5.3",
         "imagemin-zopfli": "^7.0.0",

tools/build.js

@@ -6,6 +6,7 @@ import { buildImg } from './tasks/img.js';
 import { buildTemplates } from './tasks/templates.js';
 import { Logger } from './utils/logger.js';
 import { buildFonts } from './tasks/fonts.js';
+import { optimizeCss } from './tasks/optimize-css.js';
 const srcPath = join(cwd(), 'src');
 const distPath = join(cwd(), 'dist');
 
@@ -33,7 +34,7 @@ async function build() {
 
     // start building tasks
     await Promise.all([
-        buildScss(srcPath, distPath),
+        buildScss(srcPath, distPath).then(() => optimizeCss(distPath)),
         buildImg(srcPath, distPath),
         buildFonts(srcPath, distPath),
         buildTemplates(srcPath, distPath),

tools/minimize-css.js

@@ -0,0 +1,16 @@
+import { optimizeCss } from "./tasks/optimize-css.js";
+import { cwd } from 'process';
+import { join } from 'path';
+
+const distPath = join(cwd(), 'dist');
+
+// run the optimization creating a .min.css file for each .css file in the dist folder
+// useful to check issues with the css files optimization
+// (in order to use this script, you need to first build the project removing the
+// optimization step from the build.js file)
+optimizeCss(distPath, false).then(() => {
+    console.log('Optimization completed');
+}).catch((err) => {
+    console.error(err);
+});
+

tools/tasks/deploy.js

@@ -6,6 +6,7 @@ import { copyTo } from './copy-to.js';
 import { restartService } from './restart-service.js';
 import { extname  } from 'path';
 import browsersync from 'browser-sync';
+import { optimizeCss } from './optimize-css.js';
 
 const logger = new Logger('deploy', 'info', 'brightMagenta');
 
@@ -29,7 +30,7 @@ export async function deploy(srcPath, distPath, serverPath, serviceName, file =
     }
 
     try {
-        await buildScss(srcPath, distPath);
+        await buildScss(srcPath, distPath).then(() => optimizeCss(distPath));
         await buildFonts(srcPath, distPath);
         // await buildImg(srcPath, distPath);
         await buildTemplates(srcPath, distPath);

tools/tasks/optimize-css.js

@@ -0,0 +1,111 @@
+import { join } from 'path';
+import { Logger } from '../utils/logger.js';
+import { readFileSync, readdirSync } from 'fs';
+import * as csstree from 'css-tree';
+import { writeFile } from 'fs/promises';
+
+const logger = new Logger('build', 'info', 'brightMagenta');
+
+function getcCssFiles(distPath, path) {
+    try {
+        return readdirSync(join(distPath, path))
+            .filter((fn) => fn.endsWith('.css') && !fn.endsWith('.min.css'))
+            .map((file) => ({
+                name: file.replace('.css', ''),
+                path: join(distPath, path, file),
+            }));
+    } catch (err) {
+        return [];
+    }
+}
+
+export async function optimizeCss(distPath, replace = true) {
+    // get the css files in the dist folder
+    const cssFiles = getcCssFiles(distPath, 'public/assets/css');
+
+    for (const file of cssFiles) {
+        logger.info(`Sanitizing ${file.name} css file`);
+        let usedCssVariables = [];        
+
+        // read the css file
+        const cssContent = readFileSync(file.path, { encoding: 'utf-8' });
+        const ast = csstree.parse(cssContent, {});
+
+        // get the css variables used in the css file
+        csstree.walk(ast, (node) => {
+            if (node.type === 'Function' && node.name === 'var') {
+                // get the variable name
+                for (const child of node.children) {
+                    if (child.type === 'Identifier') {
+                        usedCssVariables.push(child.name);
+                    }
+                }
+            }
+
+            // could also be that the variable is assigned to another variable
+            if (node.type === 'Declaration' && node.property.startsWith('--')) {
+                // check if its assigned to another variable
+                if(node.property.startsWith('--')) {
+                    if (node.value && node.value.type === 'Function' && node.value.name === 'var') {
+                        for (const child of node.value.children) {
+                            if (child.type === 'Identifier') {
+                                if (!usedCssVariables.includes(child.name)) {
+                                    usedCssVariables.push(child.name);
+                                }
+                            }
+                        }
+                    } else if (node.value && node.value.type === 'Raw' && node.value.value) {
+                        const val = node.value.value.trimStart(); // var(--v-primary)
+
+                        // if starts with var(, then its assigned to another variable or many variables, get everything that's inside
+                        // var(...) using regex capturing 
+
+                        // get all varname groups
+                        const matches = val.matchAll(/var\((?<varname>[^),\s]+)/g);
+
+                        for (const match of matches) {
+                            // get the varname group
+                            const varname = match.groups?.varname;
+
+                            if (varname) {
+                                if (!usedCssVariables.includes(varname)) {
+                                    usedCssVariables.push(varname);
+                                }
+                            }
+                        }                        
+                    }
+                }
+
+                if (node.value.children) {
+                    for (const child of node.value.children) {
+                        if (child.type === 'Function' && child.name === 'var') {
+                            for (const varChild of child.children) {
+                                if (varChild.type === 'Identifier') {
+                                    usedCssVariables.push(varChild.name);
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+        });
+
+        // walk to find all variable declarations and remove the unused ones
+        csstree.walk(ast, (node, item, list) => {
+            if (
+                node.type === 'Declaration' &&
+                (node.property.startsWith('--v-') || node.property.startsWith('--c-'))
+            ) {
+                const variable = node.property;
+
+                if (!usedCssVariables.includes(variable)) {
+                    list.remove(item);
+                }
+            }
+        });
+
+        const finalPath = replace ? file.path : file.path.replace('.css', '.min.css');
+
+        await writeFile(finalPath, csstree.generate(ast, { mode: 'safe' }));
+    }
+}

tools/tasks/scss.js

@@ -5,7 +5,6 @@ import { compile } from 'sass';
 
 const logger = new Logger(buildScss.name, 'debug', 'pink');
 const themesSrc = 'themes/scss';
-const baseStylesSrc = 'styles';
 const cssDistPath = '/public/assets/css';
 
 async function buildThemes(srcPath, distPath) {
@@ -34,40 +33,12 @@ async function buildThemes(srcPath, distPath) {
     }
 }
 
-async function buildBaseStyle(srcPath, distPath) {
-    const scssFiles = getScssFiles(srcPath, baseStylesSrc);
-
-    for (const file of scssFiles) {
-        logger.debug(`Building ${scssFiles.name} file`);
-
-        const result = compile(file.path, {
-            loadPaths: [join(srcPath, '../node_modules')],
-            quietDeps: true,
-            logger: {
-                debug: logger.simpleDebug.bind(logger),
-                info:  logger.simpleInfo.bind(logger),
-                warn:  logger.simpleWarn.bind(logger),
-                error: logger.simpleError.bind(logger),
-            }
-        });
-        
-        logger.debug(`Writing ${file.name} css file to disk`);
-
-        writeFileSync(
-            join(distPath, cssDistPath, `${file.name}.css`),
-            result.css
-        );
-    }
-}
-
 export async function buildScss(srcPath, distPath) {
     logger.info('SCSS build has started');
     
     mkdirSync(join(distPath, cssDistPath), { recursive: true });
 
-    await buildBaseStyle(srcPath, distPath);
     await buildThemes(srcPath, distPath);
-
     logger.info('SCSS build has finished');
 }