Style Sheets Formatter
CSSfmt is a tool that automatically formats CSS source code, inspired by Gofmt, and built on top of the PostCSS ecosystem.
CSSfmt can format following code:
- Vanilla CSS
- Future CSS syntax using cssnext
- SCSS syntax of Sass
- Nested selectors syntax like SCSS, Less, Stylus and processor using postcss-nested.
CSSfmt'd code is:
- easier to write : never worry about minor formatting concerns while hacking away.
- easier to read : when all code looks the same you need not mentally convert others' formatting style into something you can understand.
- easier to maintain : mechanical changes to the source don't cause unrelated changes to the file's formatting; diffs show only the real changes.
- uncontroversial : never have a debate about spacing or brace position ever again!
Example
Future CSS syntax (cssnext)
Input (input.css):
/* custom properties *//* custom media queries */@); /* some var() & calc() */ /* custom media query usage */{}/* custom selectors */@ /* colors stuff */ /* font stuff *//* filters */
Yield:
/* custom properties */ /* custom media queries */@); /* some var() & calc() */ /* custom media query usage */{} /* custom selectors */@ /* colors stuff */ /* font stuff */ /* filters */
SCSS syntax
Input (input.scss):
// mixin for clearfix @mixin clearfix () .class .base // placeholder %base .foo .bar
Yield:
// mixin for clearfix .class .base // placeholder %base .foo .bar
Nested selectors
Input (input.css):
{}} } /* comment for .class, #id */
Yield:
{ } }} /* comment for .class, #id */
Installation
$ npm install cssfmt
Usage
in Command Line
CLI Help:
$ cssfmt --help
Usage: cssfmt [options] input-file [output-file]
Options:
-d, --diff output diff against original file
-R, --recursive format files recursively
-V, --versions output the version number
-h, --help output usage information
CSSfmt can also read a file from stdin if there are no input-fle as argument in CLI.
$ cat input.css | cssfmt
in Node.js
var fs = ;var postcss = ;var fmt = ; var css = fs; var output = css;
in Task Runners
We can use CSSfmt in Grunt, gulp, and Fly.
Rules
Basic
- 2 spaces indentation
- require 1 space between a simple selector and combinator
- require 1 space between selectors and
{
- require new line after
{
- disallow any spaces between property and
:
- require 1 space between
:
and values - require new line after declarations
- require
;
in last declaration - require 1 space between values and
!important
- disallow any spaces between
!
andimportant
- open 1 brank line between rules
- open 1 brank line between rules in atrules
- open 1 brank lines before comments
- require new line between a comment and rules
- disallow any brank lines between
@import
for nested selector syntax
- open 1 line between declarations and nested rules
SCSS
- require 1 space between
@mixin
and mixin name - require 1 space between mixin name and
(
- require 1 space between
@extend
and base rules - require 1 space between
@include
and mixin name - disallow any spaces between
$variable
and:
- require 1 space between
:
and name of variable
Option projects
Editor plugins
- atom-cssfmt by @1000ch
- cssfmt.el by @KeenS
- vim-cssfmt by @kewah
- sublime-cssfmt by @dmnsgn
for Task Runners
License
The MIT License (MIT)
Copyright (c) 2015 Masaaki Morishita