changes

.prettierrc.json

@@ -1 +1,3 @@
-{}
+{
+    "printWidth": 120
+}

src/component.ts

@@ -10,13 +10,12 @@ const project = new Project({
   tsConfigFilePath: "tsconfig.json",
 });
 
-
 const stylesAccess = (rule: string) => {
-  if (rule.includes('-')) {
+  if (rule.includes("-")) {
     return `styles["${rule}"]`;
   }
   return `styles.${rule}`;
-}
+};
 
 export const handleComponent = (
   filePath: string,
@@ -68,3 +67,34 @@ export const handleComponent = (
   });
   sourceFile.save();
 };
+
+export const getAllJSXAttrString = (filePath: string) => {
+  const sourceFile = project.addSourceFileAtPath(filePath);
+  const allJSXAttrString: string[] = [];
+  sourceFile.forEachDescendant((node) => {
+    if (Node.isStringLiteral(node)) {
+      const parent = node.getParent();
+      const text = trimQuotes(node.getText());
+
+      if (Node.isJsxAttribute(parent)) {
+        parent.forEachChild(node => {
+          if(Node.isIdentifier(node)) {
+            console.log(node.getText());
+          }
+        })
+        const rules = text.split(" ");
+
+        if (rules.length === 1) {
+          allJSXAttrString.push(text);
+        } else {
+          allJSXAttrString.push(...rules);
+        }
+      }
+
+      if (Node.isArrayLiteralExpression(parent)) {
+        allJSXAttrString.push(text);
+      }
+    }
+  });
+  return allJSXAttrString;
+};

src/css.ts

@@ -1,3 +1,5 @@
+import fs from "fs";
+
 import sass from "sass";
 import cssTree from "css-tree";
 
@@ -12,8 +14,46 @@ export const getCssSelectors = (fileName: string) => {
   cssTree.walk(ast, function (node) {
     if (node.type === "Rule") {
       // @ts-ignore
-      classes.push(node.prelude?.value.replace(".", "").replace('#', ''));
+      classes.push(node.prelude?.value.replace(".", "").replace("#", ""));
     }
   });
   return classes;
 };
+
+export const removeUnusedCssSelector = (
+  fileName: string,
+  usedSelectorInComponent: string[]
+) => {
+  const cssFile = fs.readFileSync(fileName, "utf-8");
+  const ast = cssTree.parse(cssFile, {
+    parseAtrulePrelude: false,
+    parseRulePrelude: false,
+    parseValue: false,
+  });
+  const unusedNodes: cssTree.Rule[] = [];
+  cssTree.walk(ast, function (node, item, list) {
+    if (node.type === "Rule") {
+      // @ts-ignore
+      // @ts-ignore
+      const selector = node.prelude?.value.replace(".", "").replace("#", "");
+      if (!usedSelectorInComponent.includes(selector)) {
+        unusedNodes.push(node);
+        // console.log(cssTree.generate(node));
+        // @ts-ignore
+        console.log(node.prelude?.value);
+        list.remove(item);
+      }
+    }
+  });
+  console.log(cssTree.generate(ast));
+  const css = cssTree.generate(ast);
+  const unusedCssWithComment = [`// from ${fileName}`];
+  const unusedCss = unusedNodes.map((node) => cssTree.generate(node));
+  unusedCssWithComment.push(...unusedCss);
+  const unusedCssInFile = unusedCssWithComment.join(`\n\n`);
+
+  console.log("unusedCss");
+  console.log(unusedCss);
+  fs.writeFileSync(fileName, css);
+  fs.appendFileSync("kek.scss", unusedCssInFile);
+};

src/index.ts

@@ -2,8 +2,8 @@ import fs from "fs";
 
 import { getDirectoriesFiles, getDirectoriesRecursive } from "./files";
 import { addDotModule } from "./strings";
-import { getCssSelectors } from "./css";
-import { handleComponent } from "./component";
+import { getCssSelectors, removeUnusedCssSelector } from "./css";
+import { handleComponent, getAllJSXAttrString } from "./component";
 
 const argv = require("yargs-parser")(process.argv.slice(2));
 
@@ -25,10 +25,13 @@ for (const dirMeta of dirsMeta) {
       dirMeta.pairs[reKey].hasOwnProperty("scss") &&
       dirMeta.pairs[reKey].hasOwnProperty("tsx")
     ) {
-      const cssFilePath = dirMeta.pairs[reKey].scss;
-      const cssSelectors = getCssSelectors(cssFilePath);
-      handleComponent(dirMeta.pairs[reKey].tsx, cssSelectors, reKey);
-      fs.renameSync(cssFilePath, addDotModule(cssFilePath));
+      const allJSXAttrString = getAllJSXAttrString(dirMeta.pairs[reKey].tsx);
+      console.log(allJSXAttrString);
+      removeUnusedCssSelector(dirMeta.pairs[reKey].scss, allJSXAttrString)
+      // const cssFilePath = dirMeta.pairs[reKey].scss;
+      // const cssSelectors = getCssSelectors(cssFilePath);
+      // handleComponent(dirMeta.pairs[reKey].tsx, cssSelectors, reKey);
+      // fs.renameSync(cssFilePath, addDotModule(cssFilePath));
     }
   }
 }