duplicated-css-lines

Duplicated CSS & SASS Lines it's JavaScript package to print in console what's duplicated lines in your file

Usage no npm install needed!

<script type="module">
  import duplicatedCssLines from 'https://cdn.skypack.dev/duplicated-css-lines';
</script>

README

Catch duplicated CSS & SCSS lines

Duplicated CSS & SCSS Lines it's JavaScript package to print in console what's duplicated lines in your file.

How it works?

duplicate-css-lines.js will skip .selectors & {} & $variables & < > & var(--variable) & @extends and will start to searching in scopes of your file, So you can use it with CSS & SCSS, Or any nested stylesheet with {}, Mission is make your stylesheet healthy without duplicates, Support:

CSS logo       SASS logo     Vue logo

Install Package

npm i duplicated-css-lines

Start using it

CSS / SCSS

dup <CSS file directory> //dummy example

dup app.scss //real example

Vue Single file component

dup <Vue file directory> //dummy example

dup app.vue //real example

Will check style duplicate lines in app.scss / app.vue and back it to you in the console with number of duplicated lines.

//result
margin: 2px;
color: black;
margin: 5px;

3 Duplicated Lines

Features plan, Start contribute and join us :) :-

  • Make Package working on CSS in JS.
  • Number of duplicated line in file.
  • Make Package working on Vue.js (Single File Components) and catch inner <style></style>.
  • skip css $variables duplicated.
  • skip spaces between target and value.
  • Add Colors for console with every duplicate line.
  • Count how much line duplicate in file.
  • Convert multiplie .replace to be one function and working dynamic without duplicate.
  • Make function working just in scopes without take .className or { } as a objects value.
  • Convert this script to library to be installed and used.