![](\"http://morishitter.github.io/stylefmt-logo.svg\"){kind=logo}
\n \n\n\nModern CSS Formatter
\n
\n \n\n\n
\n\n\n \n ![](\"https://travis-ci.org/morishitter/stylefmt.svg\")
\n
\n ![](\"https://badges.gitter.im/Join%20Chat.svg\")
\n \n
stylefmt is a tool that automatically formats CSS according to stylelint rules.
\nstylefmt'd code is:
\nIf you are using stylefmt with stylelint configuration to format according to its rules, you can now use stylelint's --fix option (from v7.11.0) to autofix.
\nAnother on the other hand, prettier supports to format not only JavaScript but also CSS, SCSS and Less code.
\n![](\"https://img.shields.io/npm/v/stylefmt.svg?style=flat-square\")
\n ![](\"https://img.shields.io/npm/dm/stylefmt.svg?style=flat-square\")
\n ![](\"https://david-dm.org/morishitter/stylefmt.svg\")
\n ![](\"https://img.shields.io/badge/license-MIT-444444.svg?style=flat-square\"){kind=icon}
\n calc() and nesting..stylelintrc).Input (input.css):
\n/* custom properties */\n:root{--fontSize: 1rem;\n --mainColor :#12345678;\n--highlightColor:hwb(190, 35%, 20%);\n}\n\n/* custom media queries */\n@custom-media\n\n--viewport-medium(width<=50rem);\n\n/* some var() & calc() */\nbody{color:var(--mainColor);\n font-size:var(--fontSize);\n line-height: calc(var(--fontSize) * 1.5);\npadding: calc((var(--fontSize) / 2) + 1px)}\n\n/* custom media query usage */\n@media (--viewport-medium) {\nbody {font-size: calc(var(--fontSize) * 1.2); }\n}\n\n/* custom selectors */\n@custom-selector :--heading h1,h2,h3, h4,h5,h6;\n:--heading { margin-top:0 }\n\n/* colors stuff */\na{\ncolor:var(--highlightColor);\n transition:color 1s;\n}\na:hover{color :gray(255,50%) }\na:active{color : rebeccapurple }\na:any-link { color:color(var(--highlightColor) blackness(+20%)) }\n\n/* font stuff */\nh2 {font-variant-caps:small-caps;\n}table{font-variant-numeric: lining-nums;\n}\n\n/* filters */\n.blur{filter:blur(4px)}.sepia{\nfilter: sepia(.8);}
Yield:
\n/* custom properties */\n:root {\n --fontSize: 1rem;\n --mainColor: #12345678;\n --highlightColor: hwb(190, 35%, 20%);\n}\n\n/* custom media queries */\n@custom-media --viewport-medium (width <= 50rem);\n\n/* some var() & calc() */\nbody {\n color: var(--mainColor);\n font-size: var(--fontSize);\n line-height: calc(var(--fontSize) * 1.5);\n padding: calc((var(--fontSize) / 2) + 1px);\n}\n\n/* custom media query usage */\n@media (--viewport-medium) {\n body {\n font-size: calc(var(--fontSize) * 1.2);\n }\n}\n\n/* custom selectors */\n@custom-selector :--heading h1, h2, h3, h4, h5, h6;\n\n:--heading {\n margin-top: 0;\n}\n\n/* colors stuff */\na {\n color: var(--highlightColor);\n transition: color 1s;\n}\n\na:hover {\n color: gray(255, 50%);\n}\n\na:active {\n color: rebeccapurple;\n}\n\na:any-link {\n color: color(var(--highlightColor) blackness(+20%));\n}\n\n/* font stuff */\nh2 {\n font-variant-caps: small-caps;\n}\n\ntable {\n font-variant-numeric: lining-nums;\n}\n\n/* filters */\n.blur {\n filter: blur(4px);\n}\n\n.sepia {\n filter: sepia(.8);\n}
Input (input.scss):
\n// mixin for clearfix\n\n\n @mixin clearfix () { &:before,\n &:after {\n content:" ";\n display : table; }\n\n &:after {clear: both;}\n }.class\n{\n padding:10px;@include clearfix();}\n .base { color: red; }\n\n// placeholder\n%base\n{\n\n\npadding: 12px\n}\n\n.foo{\n@extend .base;}\n\n.bar\n { @extend %base;\n\n}
Yield:
\n// mixin for clearfix\n@mixin clearfix () {\n &:before,\n &:after {\n content: " ";\n display: table;\n }\n\n &:after {\n clear: both;\n }\n}\n\n.class {\n padding: 10px;\n @include clearfix();\n}\n\n.base {\n color: red;\n}\n\n// placeholder\n%base {\n padding: 12px;\n}\n\n.foo {\n @extend .base;\n}\n\n.bar {\n @extend %base;\n}
$ npm install stylefmt
CLI Help:
\n$ stylefmt --helpUsage: stylefmt [options] input-name [output-name]\n\nOptions:\n\n -b, --config-basedir Path to the directory that relative paths defining "extends"\n -c, --config Path to a specific configuration file (JSON, YAML, or CommonJS)\n -d, --diff Output diff against original file\n -r, --recursive Format list of space seperated files(globs) in place\n -v, --version Output the version number\n -h, --help Output usage information\n -i, --ignore-path Path to a file containing patterns that describe files to ignore.\n --stdin-filename A filename to assign stdin input.
stylefmt can also read a file from stdin if there are no input-file as argument in CLI.
\n$ cat input.css | stylefmt --stdin-filename input.css
var fs = require('fs');\nvar postcss = require('postcss');\nvar scss = require('postcss-scss'); // when you use scss syntax\nvar stylefmt = require('stylefmt');\n\nvar css = fs.readFileSync('input.css', 'utf-8');\n\npostcss([\n stylefmt\n]).process(css, {\n from: 'input.css',\n syntax: scss\n })\n .then(function (result) {\n result.css; // formatted code\n });
We can use stylefmt in Grunt, gulp, and Fly.
\nstylefmt :heart: stylelint
\nstylefmt supports the following stylelint rules:
\nand we can also format from the other stylelint's configration files or packages (e.g. stylelint-config-standard, stylelint-config-suitcss and so on) using extends property.
{{:: and values; in last declaration!important! and important@import@mixin and mixin name(@extend and base rules@include and mixin name$variable and :: and name of variableThe MIT License (MIT)
\nCopyright (c) 2015 Masaaki Morishita
\n" }, { "component": "footer", "links": [ { "href": "https://github.com/morishitter/stylefmt", "text": "GitHub" }, { "href": "https://github.com/morishitter", "text": "morishitter" } ] } ] }