cssfmt v2.1.5
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 */
:root{--fontSize: 1rem;
--mainColor :#12345678;
--highlightColor:hwb(190, 35%, 20%);
}
/* custom media queries */
@custom-media
--viewport-medium(width<=50rem);
/* some var() & calc() */
body{color:var(--mainColor);
font-size:var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px)}
/* custom media query usage */
@media (--viewport-medium) {
body {font-size: calc(var(--fontSize) * 1.2); }
}
/* custom selectors */
@custom-selector :--heading h1,h2,h3, h4,h5,h6;
:--heading { margin-top:0 }
/* colors stuff */
a{
color:var(--highlightColor);
transition:color 1s;
}
a:hover{color :gray(255,50%) }
a:active{color : rebeccapurple }
a:any-link { color:color(var(--highlightColor) blackness(+20%)) }
/* font stuff */
h2 {font-variant-caps:small-caps;
}table{font-variant-numeric: lining-nums;
}
/* filters */
.blur{filter:blur(4px)}.sepia{
filter: sepia(.8);}
Yield:
/* custom properties */
:root {
--fontSize: 1rem;
--mainColor: #12345678;
--highlightColor: hwb(190, 35%, 20%);
}
/* custom media queries */
@custom-media --viewport-medium (width <= 50rem);
/* some var() & calc() */
body {
color: var(--mainColor);
font-size: var(--fontSize);
line-height: calc(var(--fontSize) * 1.5);
padding: calc((var(--fontSize) / 2) + 1px);
}
/* custom media query usage */
@media (--viewport-medium) {
body {
font-size: calc(var(--fontSize) * 1.2);
}
}
/* custom selectors */
@custom-selector :--heading h1, h2, h3, h4, h5, h6;
:--heading {
margin-top: 0;
}
/* colors stuff */
a {
color: var(--highlightColor);
transition: color 1s;
}
a:hover {
color: gray(255, 50%);
}
a:active {
color: rebeccapurple;
}
a:any-link {
color: color(var(--highlightColor) blackness(+20%));
}
/* font stuff */
h2 {
font-variant-caps: small-caps;
}
table {
font-variant-numeric: lining-nums;
}
/* filters */
.blur {
filter: blur(4px);
}
.sepia {
filter: sepia(.8);
}
SCSS syntax
Input (input.scss):
// mixin for clearfix
@mixin clearfix () { &:before,
&:after {
content:" ";
display : table; }
&:after {clear: both;}
}.class
{
padding:10px;@include clearfix();}
.base { color: red; } // placeholder
%base
{
padding: 12px
}
.foo{
@extend .base;}
.bar
{ @extend %base;
}
Yield:
// mixin for clearfix
@mixin clearfix () {
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
.class {
padding: 10px;
@include clearfix();
}
.base {
color: red;
}
// placeholder
%base {
padding: 12px;
}
.foo {
@extend .base;
}
.bar {
@extend %base;
}
Nested selectors
Input (input.css):
@media screen and ( min-width :699px)
{.foo + .bar,.hoge{
font-size :12px ! important ; ~ .fuga {
padding : 10px 5px;
color:green;
>p
{
line-height : 1.5 ;
}}}
} /* comment for .class, #id */
.class, #id
{ color : blue;
border :solid #ddd 1px}
Yield:
@media screen and (min-width: 699px) {
.foo + .bar,
.hoge {
font-size: 12px !important;
~ .fuga {
padding: 10px 5px;
color: green;
> p {
line-height: 1.5;
}
}
}
}
/* comment for .class, #id */
.class,
#id {
color: blue;
border: 1px solid #ddd;
}
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 = require('fs');
var postcss = require('postcss');
var fmt = require('cssfmt');
var css = fs.readFileSync('input.css', 'utf-8');
var output = postcss()
.use(fmt())
.process(css)
.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
for Task Runners
License
The MIT License (MIT)
Copyright (c) 2015 Masaaki Morishita
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago