Project Name

This is a project for processing CSS data about a project. It provides suggestions for refactoring and finding duplicate CSS classes. It works by scanning the front-end files and CSS/SCSS files to find the occurrences of CSS classes and then provides log messages with refactoring suggestions.

Installation

To use this project, you need to have Node.js installed on your machine. You can download it here.

Navigate to the project directory and install the module using the following command:

npm install css-tracker

Usage

Run the command on the project folder

npm run track-css

You can modify the functions that will run by using

npm run track-css --mode dpfel

This will scan the front-end files and CSS/SCSS files in the project directory and generate a json log file with refactoring suggestions in the logs folder. If no option is passed all functions will be executed

Configuration

Default configuration after installation

"cssTracker": {
    "blacklist": {
        "cssPaths": [],
        "notUsedCss": [
            "./node_modules",
            ".public",
            "./.cache",
            "./build"
        ],
        "moveCssPaths": [
            "./node_modules",
            ".public",
            "./.cache",
            "./build"
        ],
        "frontPaths": [
            "./node_modules",
            ".public",
            "./.cache",
            "./build"
        ],
        "cssClasses": []
    },
    "frontFiles": [
        ".tsx",
        ".jsx",
        ".html"
    ],
    "cssFiles": [
        ".css",
        ".scss"
    ],
    "outputLog": "./logs.txt"
}

Result

This is an example of result

{
  "notUsedClasses": [
    {
      "class": "pop-down-left",
      "paths": [{ "path": "src/components/popup/style.scss", "lines": [21] }]
    }
  ],
  "moveClass": [
    {
      "class": "card",
      "moveFrom": "src/components/popup",
      "moveTo": "src/components",
      "occurrences": [
        "src/components/popup/popup.tsx",
        "src/components/account/account.tsx"
      ]
    }
  ],
  "noDefinitions": [
    {
      "class": "squared",
      "paths": [{ "path": "src/components/index.tsx", "lines": [355] }]
    }
  ],
  "expressions": [
    {
      "expression": "checkPosition() ? position : ",
      "paths": [{ "path": "src/components/popup/popup.tsx", "lines": [84] }]
    }
  ],
  "duplicateDefs": [
    {
      "class": "card",
      "paths": [
        {
          "path": "src/components/account/style.scss",
          "lines": [58, 63]
        },
        { "path": "src/components/style.scss", "lines": [78, 93] }
      ]
    }
  ]
}

GitHub

Github Link

License

This project is licensed under the MIT License.