Code Monkey home page Code Monkey logo

csss's Introduction

NPM version
Build Status Dependency Status

CSS Shampoo

CSS Shampoo results example

CSSS is a tool that detects multiple CSS selectors from your stylesheets and it works across multiple files. You can also merge the duplicate selectors and as a result you will get a new clean CSS file.

##Introduction - why use shampoo?

"Shampoo /ʃæmˈpuː/ is a hair care product that is used for cleaning hair. The goal of using shampoo is to remove the unwanted build-up without stripping out so much sebum as to make hair unmanageable." - Wikipedia

"CSS Shampoo is a CSS care product that is used for cleaning CSS. The goal of using CSS Shampoo is to remove unwanted build-up of messy CSS without stripping out so much developer's hair as to make CSS unmanageable." - CSS Shampoo

Installation

npm install -g csss

Usage

Usage: csss [options] <file, ...>
    e.g. csss -f /path/to/dirty.css,/messy/css/dir/,http://not-clean.com/css/style.css

Options:

  -h, --help                            output usage information
  -V, --version                         output the version number
  -f, --files <files>                   Specify stylesheets to process
  -m, --merge <newFileName>             merge all duplicate selectors and save to new file

You can pass local CSS files, a folder which contains CSS files or URLs.

##Detect duplicate selectors: results example CSS Shampoo results example

You will get a list with all selectors which appear multiple times in your CSS file(s). The exact lines of the selector is shown and if you were searching through multiple files, you will also get the file name printed. You can also see the amount of shared properties of each same selector, which means some selectors have exactly the same properties or are overwriting already existing ones in the file.

Merge duplicate CSS selectors

Usage: e.g. csss -f /path/to/dirty.css -m newClean.css

Pass your CSS file(s) with the -f option and define the name of the new file which will contain the merged duplicate selectors. If it goes through successfully, it will create your newClean.css file with your cleaned up CSS.

Here is a simple merging example, both .text selectors will be combined into one CSS Shampoo results example

Many different scenarios of possible duplicate selectors are being considered in order to keep your CSS working and not break any layout, some examples will be published soon.

csss's People

Contributors

webycel avatar

Stargazers

Rob avatar  avatar Paul Thompson avatar Richard Scoop avatar Oleksii Levchenko avatar Katyusha avatar  avatar JB avatar Alireza avatar Dulsara avatar leonel avatar kenn22 avatar TAKAI Tomonari avatar Ardalan Amini avatar Mozahidur Rahman avatar Charles-Antoine Fournel avatar Michal Ševčík avatar Fabricio Konell avatar

Watchers

James Cloos avatar  avatar

csss's Issues

Duplicate count higher than total selector count

I added support to count the total selectors read in and it shows as lower that the total duplicates.

Total selectors: 2387
Duplicate selectors: 5414

I am wondering if it finds 3 duplicate style definitions does it count (1,2)(1,3)(2,3) rather than (1,2,3) which is essentially bloating the duplicate count.

grunt support

Recently I have used csss for a project, recommended by a friend. It seems to work smoothly and is of great help, makes life easier. One issue is I can't find any grunt plugin for it. As I am using lots of file and using grunt to merge JS files it would be great if I can use grunt for the css as well. With your npm module I am able to achieve the results but would be great to have a grunt plugin so that I can make this process automated.

Thanks

Merge is not working.

Hey, Merge is not working. I am using node 16 but I also tested that on Node 14 and Node 12 same error.
image

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.