JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 11351
  • Score
    100M100P100Q126185F

Tool for beautify CSS

Package Exports

  • csscomb
  • csscomb/lib/csscomb

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (csscomb) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

CSSCOMB Build Status

CSSComb is a coding style formatter for CSS. You can easily write your own configuration to make your style sheets beautiful and consistent.

The main feature is the sorting properties in specific order. It was inspired by the same-named @miripiruni's PHP-based tool. This is the new JavaScript version, based on powerful CSS parser Gonzales.

Installation

npm install csscomb

To run csscomb, you can use the following command from the project root:

./node_modules/.bin/csscomb path[ path[...]]
./node_modules/.bin/csscomb --help

  Usage: csscomb [options] <file ...>

  Options:

    -h, --help           output usage information
    -V, --version        output the version number
    -c, --config [path]  configuration file path

Configuration

csscomb is configured using .csscomb.json file, located in the project root.

Example configuration:

{
    "exclude": ["node_modules/**"],
    "always-semicolon": true,
    "block-indent": true,
    "colon-space": true,
    "color-case": "lower",
    "color-shorthand": true,
    "leading-zero": false,
    "rule-indent": true,
    "stick-brace": true,
    "strip-spaces": true,
    "unitless-zero": true
}

Options

always-semicolon

Available value: {Boolean} true

Example: { "always-semicolon": true }

/* before */
a { color: red }

/* after */
a { color: red; }

block-indent

Note: better to use with rule-indent

Available values:

  • {Boolean} true (means 4 spaces)
  • {Number} of spaces
  • {String} of whitespace characters (/[ \t]*/)

Example: { "block-indent": 2 }

/* before */
  a { color: red }
  @media all { a { color: green } }

/* after */
a { color: red
}
@media all {
  a { color: green
  }
}

colon-space

Available values:

  • {Boolean} true (means after)
  • {String}: before, after, both or any combination of whitespaces and/or a colon ( , : , \t:\n\t etc.)

Example: { "colon-space": true }

/* before */
a { color:red }

/* after */
a { color: red }

Example: { "colon-space": ":\n\t\t" }

/* before */
a {
  color: red;
}

/* after */
a {
  color:
    red;
}

Example: { "colon-space": ":" }

/* before */
a { color: red }

/* after */
a { color:red }

color-case

Available values: {String} lower or upper

Example: { "color-case": "lower" }

/* before */
a { color: #FFF }

/* after */
a { color: #fff }

color-shorthand

Available values: {Boolean} true or false

Example: { "color-shorthand": true }

/* before */
b { color: #ffcc00 }

/* after */
b { color: #fc0 }

leading-zero

Available values: {Boolean} true or false

Example: { "leading-zero": false }

/* before */
p { padding: 0.5em }

/* after */
p { padding: .5em }

rule-indent

Note: better to use with block-indent

Available values:

  • {Boolean} true (means 4 spaces)
  • {Number} of spaces
  • {String} of whitespace characters (/[ \t]*/)

Example: { "rule-indent": 2 }

/* before */
a { color:red; margin:0 }

/* after */
a {
  color:red;
  margin:0 }

sort-order

Note: you can use an example of .csscomb.json to set your own sort order

Available values:

  • {Array} of rules
  • {Array} of arrays of rules for groups separation

Example: { "sort-order": [ "margin", "padding" ] }

/* before */
p {
    padding: 0;
    margin: 0;
}

/* after */
p {
    margin: 0;
    padding: 0;
}

Example: { "sort-order": [ [ "margin", "padding" ], [ "border", "background" ] ] }

/* before */
p {
    background: none;
    border: 0;
    margin: 0;
    padding: 0;
}

/* after */
p {
    margin: 0;
    padding: 0;

    border: 0;
    background: none;
}

stick-brace

Available values:

  • {Boolean} true (means 1 spaces)
  • {String} of whitespace characters (/[ \t\n]*/)

Example: { "stick-brace": "\n" }

/* before */
a { color:red }

/* after */
a
{ color:red }

strip-spaces

Available value: {Boolean} true

Example: { "strip-spaces": true }

Before: a { color: red } \nb { font-weight: normal } After: a { color: red }\nb { font-weight: normal }\n

unitless-zero

Available value: {Boolean} true

Example: { "unitless-zero": true }

/* before */
img { border: 0px }

/* after */
img { border: 0 }

Tests

Run npm test for tests.

Contributing

Anyone and everyone is welcome to contribute. Please take a moment to review the guidelines for contributing.

Authors

@mishanga

Thanks for assistance and contributions:

@miripiruni, @puzankov, @L0stSoul, @ignovak, @kizu

License

This software is released under the terms of the MIT license.

Other projects