css-checker tests your css kinds for duplications and fetch the diff among
css courses with excessive similarity in seconds. It is designed to lead clear of redundant or identical css between data and to work effectively for every native style, and for automation esteem CI.
Colors take a look at, long scripts, unused CSS courses warning of css are additionally supported by default. This project is equipped by Xiemala Team, it helps in resolve away many of of identical css courses for developers in this project.
lunge install github.com/ruilisi/css-checker@most modern
(With lunge model before 1.17, employ
lunge glean github.com/ruilisi/css-checker). Or secure from releases
npm install -g css-checker-bundle
cd PROJECT_WITH_CSS_FILESand staunch bustle:
(Alpha Feature: Accumulate courses that no longer referred by your js/jsx/ts/tsx/html code):
css-checker -direction=[YOUR_PROJECT_PATH] -unused
(To Region your project direction and ignore paths):
css-checker -direction=[YOUR_PROJECT_PATH] -ignores=node_modules,functions,others*
(Test and showcase the diff among simullar courses (>=80%). Colors, long scripts that inclined extra then once will additionally be identified by default. Test
css-checker -motivate for personalized alternate ideas.)
rgb/rgba/hsl/hsla/hex will doubtless be remodeled to rbga and when compared together.
Drag with direction and ignores
css-checker -direction=YOUR_PROJECT_PATH -ignores=node_modules,functions
-motivate: prints motivate and exits
-colors: whether or no longer to identify colors (default appropriate)
-ignores: string paths and data to be neglected (e.g. node_modules,*.instance.css)
-size-threshold: int Min size of a single vogue fee (no at the side of the necessary) that to be regarded as long script line (default 20)
-long-line: whether or no longer to identify duplicated long script traces (default appropriate)
-direction: string location direction to data, default to be most modern folder (default “.”)
-sections: whether or no longer to identify sections duplications (default appropriate)
-sim: whether or no longer to identify identical css courses (>=80% &&
-version: prints current version and exits
How we get similarities between classes?:
- Hash each line of class (aka.
sectionin our code), Generate map:
LineHash -> Half.
- Convert blueprint
LineHash -> Half=>
[SectionIndex1][SectionIndex2] -> Duplicated Hashes, n for the same hash, portion stands for css class.
- In blueprint:
Duplicated Hashes, alternative of the duplicated hashes stands for duplicated traces between courses.
Test the similarity (>=80% &&
Lengthy Script Line Test:
Lengthy scripts would per chance even be saved as varirables to glean your lifestyles easiler. This might per chance finest alert when long scriptes are inclined for extra then once.
Test colors in HEX/RGB/RGBA/HSL/HSLA that inclined extra then once in your code. As for supporting of diffrent themes and conceivable future updates of you color location, you’d bear in mind to position them as css variables.
Duplicated CSS Lessons:
Similarity Test however establish those courses which shall be complete the same to every assorted.
Construct & Liberate
glean take a look at-gadgets