Giter Club home page Giter Club logo

min.css's Introduction

npm npm

What is the min.css?

min.css is a tiny, ultrafast and efficient JavaScript library for minifying CSS files that really makes your website faster - Online service.

Installation

What are the requirements?

Any version of Node.js and nothing more. min.css is a JavaScript library and has not any dependencies. So it can be used anywhere, in any platform that JavaScript supports.

How to install min.css?

npm install -g min.css

Usage

How to use min.css via CLI?

min.css [input-file1] [input-file2] [input-fileN] > [output-file]

Also min.css accepts the following command line arguments:

-h, --help     output usage information
-v, --version  output the version number

For example, to minify a main.css, icons.css and theme.css files into style.min.css do:

min.css main.css icons.css theme.css > style.min.css

How to use min.css via Node.js?

var mincss = require('min.css');
var input = 'html, body {  }';
var output = mincss(input);

What min.css do?

  • Removes all comments
  • Removes all empty declarations
  • Removes all rules that was redeclared (excluding background, background-image).
  • Removes all whitespaces that are unnecessary (including around the meta characters, such as { } ( ) : ; > ~ + etc.)
  • Removes the last ";" in a rule declaration
  • Removes leading zero in float value. For example: 0.5 > .5
  • Convert RGB|RGBA-1 color to HEX and RGBA-0 to transparent
  • Convert HSL|HSLA-1 color to HEX and HSLA-0 to transparent
  • Convert HEX color to short value when it's possible. For example: #CCCCCC > #CCC
  • Removes for all zero values units (such as %,px,pt,pc,rem,em,ex,cm,mm,in) that are unnecessary (excluding CSS keyframes). For example: border: 1px 0px > border:1px 0
  • Reduces values for margin,padding,border-width,border-color,border-style. For example: 1px 2px 1px 2px => 1px 2px

min.css's People

Contributors

w3core avatar

Stargazers

Dmitrii Vasilev avatar Jaron Wanderley avatar funlang.org avatar Philipp Dormann avatar PDZ avatar Divine avatar kallers avatar jacobking avatar Folger fan avatar Bernhard Döbler avatar Ruben Robles avatar  avatar Gabriel S. Martins avatar Vladimir Gorea avatar  avatar

Watchers

 avatar James Cloos avatar  avatar

min.css's Issues

Issue with :not() selector followed by other selector

Hi there,

First of all thanks for package, it comes really handy if need to minify css on the fly in the browser.

I noticed a minor issue with :not() selectors. If it is followed by another selector, the whitespace between the closing ')' and the next selector will get removed which changes the selector.

Example

Source:

div:not(empty) .main {
   display: block;
}

Result

div:not(empty).main{display:block}

Expected:

div:not(empty) .main{display:block}

excess whitespace

    @media (min-width: 600px) {
        slot {
            max-width:700px;
        }
        ::slotted(a) {
            flex: calc(50% - var(--margin) * 2);
        }
    }

result

@media (min-width:600px){slot{max-width:700px}::slotted(a){flex:calc(50% - var( -- margin) * 2)}}

whitespace between "--" and "margin" broke the style

Unclear on how to use it in Node.js

Thanks for the work done with the script. However, for someone new to Node.js and npm scripts, I can't make use of your documentation for working with Node.js. What the output of mincss(input) is just the name of the files.

node example doesn't work

var mincss = require('min.css');
var input = 'html, body { }';
var output = mincss(input);

won't print anything

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.