Recommend this page to a friend! |
Download |
Info | Files | Install with Composer | Download | Reputation | Support forum | Blog | Links |
Last Updated | Ratings | Unique User Downloads | Download Rankings | |||||
2024-09-29 (1 month ago) | Not enough user ratings | Total: 42 | All time: 10,862 This week: 22 |
Version | License | PHP version | Categories | |||
unused-css-finder 1.0.0 | MIT/X Consortium ... | 7.4 | Tools, Templates, Console, Performanc..., P..., P... |
Description | Author | |||||||||||||||||||||||
This package can find unused styles from CSS and SASS files. Innovation Award |
|
Authors: ChatGPT by OpenAI & Engin Ypsilon by classic::Parents()
UnusedCssFinder
is a lightweight PHP-based tool designed to help developers clean up unused CSS classes in projects that use Vue.js, Twig, or similar templating systems. By scanning both the CSS and component files, this tool identifies CSS selectors that are defined but not used, making it easier to reduce file size, optimize performance, and maintain clean code.
It's an efficient, no-frills solution that doesn't require additional dependencies or frameworks, ideal for quickly assessing unused CSS without heavy setup.
git clone https://github.com/eypsilon/unused-css-finder.git
cd unused-css-finder
chmod +x find-unused-css.php
__Usage__
To use the script, run the following command in your terminal:
# The more precise the directories are set,
# the more accurate results you will get.
./find-unused-css.php <path/to/css> <path/to/components>
__Example:__
./find-unused-css.php ./src/assets ./src/components
The tool will output a list of unused CSS classes or a message indicating that no unused classes were found.
You can specify additional configurations by passing parameters such as ignored selectors or files:
# available
$config = [
'extendedMode' => (string) 'false', // if 'true' returns the lists of scanned files and a list with all found selectors
'outputMode' => null, // set to "json" to get the resulting response as JSON Object, `unusedOnly` for a valid JSON response
'ignoreSelectors' => ['mt-button', 'some-box-class'], // example of ignored selectors
'ignoreFiles' => ['/path/to/ignore/file.vue'], // example of ignored files
];
For convenience, you can create an alias to run the tool easily:
sudo nano ~/.bash_aliases
alias GetUnusedCss='~/unused-css-finder/find-unused-css.php'
source ~/.bash_aliases
Now you can use the alias to run the script:
GetUnusedCss <path/to/css> <path/to/components>
To use with optional configurations:
GetUnusedCss <path/to/css> <path/to/components> extendedMode='true' outputMode='json' ignoreSelectors='mt-button,some-box-class' ignoreFiles='/path/to/ignore/file.vue'
Instead of passing the configuration options via arguments in the terminal, you can also create a JSON configuration file with all the necessary data for your project. This makes it easy to manage and reuse different configurations for multiple projects or environments. The filename needs to end with 'unused_css.json'
.
__Example Configuration__
{
"cssDir": "/path/to/css", // The directory where your CSS files are located
"srcDir": "/path/to/components", // The directory where your Vue components are located
"extendedMode": "true", // If true, provides additional details on searched files and CSS files
"outputMode": "json", // ['json','unusedOnly'] Specify output format ('json' or plain text)
"ignoreSelectors": [], // A list of CSS selectors to ignore during the search (e.g., framework-specific classes)
"ignoreFiles": [], // A list of specific files to exclude from the search
"extensions": {
"css": [
"css",
"scss"
], // Supported file extensions for CSS; .sass files are not fully supported due to differences in syntax.
"source": [
"vue",
"js",
"twig"
] // Supported file extensions for source files (Vue, JS, Twig, etc.)
}
}
__Using the Configuration File__
Once you've created the configuration file, you can pass it as an argument when running the script. The script will use the settings defined in the JSON file instead of arguments passed directly in the terminal.
__Example Command:__
# Using an alias
GetUnusedCss /path/to/config/unused_css.json
# Without an alias, using the script directly
./find-unused-css.php /path/to/config/unused_css.json
__Configuration Options Explained__
__Examples__
Example 1: Basic Usage with Arguments
./find-unused-css.php ./src/assets ./src/components
Example 2: Advanced Usage with Configuration File
GetUnusedCss ./src/unused_css.json
Example 3: Ignoring Selectors and Files
{
"cssDir": "/path/to/css",
"srcDir": "/path/to/components",
"extendedMode": "false",
"outputMode": "plain",
"ignoreSelectors": ["mt-button", "hidden"],
"ignoreFiles": ["/path/to/components/temp.vue"],
"extensions": {
"css": [
"css",
"scss"
],
"source": [
"vue",
"js",
"twig"
]
}
}
You can then run this configuration with:
./find-unused-css.php /path/to/config/unused_css.json
Please note that this tool is a lightweight, approximately 200-line script designed to give a general overview of potentially unused CSS selectors in your projects. While it does a good job of finding most unused classes, it may miss certain scenarios, such as:
This tool is not a replacement for more comprehensive code quality solutions, but rather a fast and simple utility to help developers clean up unused CSS. It should be used in combination with manual review or other tools for more complex use cases.
Feel free to submit issues or pull requests if you'd like to improve or extend this tool. Contributions are always welcome!
This project is licensed under the MIT License.
Files (5) |
File | Role | Description |
---|---|---|
config.unused_css.json | Data | Auxiliary data |
find-unused-css.php | Class | Class source |
LICENSE | Lic. | License text |
README.md | Doc. | Documentation |
test.example.scss | Data | Auxiliary data |
The PHP Classes site has supported package installation using the Composer tool since 2013, as you may verify by reading this instructions page. |
Install with Composer |
Version Control | Unique User Downloads | Download Rankings | |||||||||||||||
100% |
|
|
Applications that use this package |
If you know an application of this package, send a message to the author to add a link here.