New PR for Unused CSS

catalog/f970dc8a-137e-49cc-a53e-362a924bf726/0.0.4/design.yml

@@ -3,4 +3,4 @@ id: f970dc8a-137e-49cc-a53e-362a924bf726
 name: aws-k8s-cni.yaml
 relationships: []
 schemaVersion: designs.meshery.io/v1beta1
-version: 0.0.47
+version: 0.0.47

check-unused-css.js

@@ -0,0 +1,31 @@
+// Script for the checking of unused css
+
+const { exec } = require('child_process');
+const path = require('path');
+
+// Get the CSS file name from the command line arguments
+const cssFileName = process.argv[2];
+
+if (!cssFileName) {
+    console.error('Error: Please provide a CSS file name as an argument.');
+    process.exit(1);
+}
+
+// Construct the command to run PostCSS with PurgeCSS
+const postcssCommand = `npx postcss ${path.join('_sass', cssFileName)} -o ./output/${cssFileName} --config ./postcss.config.js`;
+
+exec(postcssCommand, (error, stdout, stderr) => {
+    if (error) {
+        console.error(`Error: ${error.message}`);
+        return;
+    }
+    if (stderr) {
+        console.error(`Error: ${stderr}`);
+        return;
+    }
+
+    // If no errors, print a success message with more details
+    console.log(`Success: The file '${cssFileName}' was processed successfully.`);
+    console.log(`The output has been saved to './output/${cssFileName}'`);
+    console.log(`NOTE: ALL THE UNUSED CSS IS REMOVED FROM THE UPDATED FILE`);
+});

postcss.config.js

@@ -0,0 +1,27 @@
+const purgecss = require('@fullhuman/postcss-purgecss');
+
+module.exports = {
+    syntax: require('postcss-scss'),
+    plugins: [
+        purgecss({
+            content: [
+                // Change the path to match your HTML files in which you want to check unused css i'm checking all files at once
+                './**/*.html',
+                // same for the js, i am checking all js files at once
+                './**/*.js',
+            ],
+            // First change the below code and then add the file name you want. 
+            // For e.g. i checked it using variables.scss
+            css: ['./_sass/testimonials.scss'],
+            // and run this in terminal -> 
+
+            // npx postcss _sass/variables.scss -o ./output/variables.css --config ./postcss.config.js
+
+            // change the variables to the file you want to check
+            safelist: [], // Add any CSS selectors you want to keep
+            keyframes: true,
+            fontFace: true,
+            // adding this line to for commiting with sign off
+        }),
+    ],
+};