diff --git a/.prettierrc.json b/.prettierrc.json index 0967ef4..9fcfde7 100644 --- a/.prettierrc.json +++ b/.prettierrc.json @@ -1 +1,3 @@ -{} +{ + "printWidth": 120 +} diff --git a/src/component.ts b/src/component.ts index 56f4d48..75b8dbb 100644 --- a/src/component.ts +++ b/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; +}; diff --git a/src/css.ts b/src/css.ts index 0faad41..b772204 100644 --- a/src/css.ts +++ b/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); +}; diff --git a/src/index.ts b/src/index.ts index 0b3bde6..408e05b 100644 --- a/src/index.ts +++ b/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)); } } }