stylefmt
Modern CSS Formatter
<p>
</a><br /> <a rel="nofollow noopener" target="_blank" href="https://david-dm.org/morishitter/stylefmt"></p>
<p>
</a><br /> <a rel="nofollow noopener" target="_blank" href="https://opensource.org/licenses/MIT"></p>
<p>
</a><br /> <a rel="nofollow noopener" target="_blank" href="https://gitter.im/morishitter/stylefmt"></p>
<p>
</a>
</p>
<p>
stylefmt is a tool that automatically formats CSS according to <a rel="nofollow noopener" target="_blank" href="http://stylelint.io/">stylelint</a> rules.<br /> stylefmt’d code is:
</p>
<ul dir="auto">
<li>
easier to <strong>write</strong> : never worry about minor formatting concerns while hacking away.
</li>
<li>
easier to <strong>read</strong> : when all code looks the same you need not mentally convert others’ formatting style into something you can understand.
</li>
<li>
easier to <strong>maintain</strong> : mechanical changes to the source don’t cause unrelated changes to the file’s formatting; diffs show only the real changes.
</li>
<li>
<strong>uncontroversial</strong> : never have a debate about spacing or brace position ever again!
</li>
</ul>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-notice-consider-other-tools-before-adopting-stylefmt" class="anchor" aria-hidden="true" href="#notice-consider-other-tools-before-adopting-stylefmt"></a>NOTICE: Consider other tools before adopting stylefmt
</h2>
<p>
If 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.<br /> Another on the other hand, prettier supports to format not only JavaScript but also CSS, SCSS and Less code.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-features" class="anchor" aria-hidden="true" href="#features"></a>Features
</h2>
<ul dir="auto">
<li>
<strong>Supports the latest CSS syntax:</strong> Including custom properties, range context for media features, <code>calc()</code> and nesting.
</li>
<li>
<strong>Understands CSS-like syntaxes:</strong> stylefmt is powered by PostCSS, so it understands any syntax that PostCSS can parse, including SCSS.
</li>
<li>
<strong>Works well with stylelint:</strong> <a rel="nofollow noopener" target="_blank" href="http://stylelint.io/">stylelint</a> is a mighty, modern CSS linter. stylefmt can understand the formatting rules specified in your stylelint configuration file (<code>.stylelintrc</code>).
</li>
</ul>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-examples" class="anchor" aria-hidden="true" href="#examples"></a>Examples
</h2>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-future-css-syntax-cssnext" class="anchor" aria-hidden="true" href="#future-css-syntax-cssnext"></a>Future CSS syntax (cssnext)
</h3>
<p>
Input (input.css):
</p>
<pre>/* 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);}
<p>
Yield:
</p>
<pre>/* 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); }
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-scss-syntax" class="anchor" aria-hidden="true" href="#scss-syntax"></a>SCSS syntax
</h3>
<p>
Input (input.scss):
</p>
<pre>// 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;
}
<p>
Yield:
</p>
<pre>// 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; }
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-installation" class="anchor" aria-hidden="true" href="#installation"></a>Installation
</h2>
<pre>$ npm install stylefmt</pre>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-usage" class="anchor" aria-hidden="true" href="#usage"></a>Usage
</h2>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-in-command-line" class="anchor" aria-hidden="true" href="#in-command-line"></a>in Command Line
</h3>
<p>
CLI Help:
</p>
<pre class="notranslate"><code>$ stylefmt --help
<pre class="notranslate"><code>Usage: stylefmt [options] input-name [output-name]
Options:
-b, –config-basedir Path to the directory that relative paths defining “extends” -c, –config Path to a specific configuration file (JSON, YAML, or CommonJS) -d, –diff Output diff against original file -r, –recursive Format list of space seperated files(globs) in place -v, –version Output the version number -h, –help Output usage information -i, –ignore-path Path to a file containing patterns that describe files to ignore. –stdin-filename A filename to assign stdin input.
<p>
stylefmt can also read a file from stdin if there are no input-file as argument in CLI.
</p>
<pre class="notranslate"><code>$ cat input.css | stylefmt --stdin-filename input.css
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-in-nodejs" class="anchor" aria-hidden="true" href="#in-nodejs"></a>in Node.js
</h3>
<pre>var fs = require('fs');
var postcss = require(‘postcss’); var scss = require(‘postcss-scss’); // when you use scss syntax var stylefmt = require(‘stylefmt’);
var css = fs.readFileSync(‘input.css’, ‘utf-8’);
postcss([ stylefmt ]).process(css, { from: ‘input.css’, syntax: scss }) .then(function (result) { result.css; // formatted code });
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-in-task-runners" class="anchor" aria-hidden="true" href="#in-task-runners"></a>in Task Runners
</h3>
<p>
We can use stylefmt in Grunt, gulp, and Fly.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-stylelint-rules-that-stylefmt-can-handle" class="anchor" aria-hidden="true" href="#stylelint-rules-that-stylefmt-can-handle"></a>stylelint rules that stylefmt can handle
</h2>
<p>
stylefmt ❤️ stylelint<br /> stylefmt supports the following stylelint rules:
</p>
<ul dir="auto">
<li>
at-rule-empty-line-before (“always”|”never” and except “blockless-group” only)
</li>
<li>
at-rule-semicolon-newline-after
</li>
<li>
block-closing-brace-newline-after
</li>
<li>
block-closing-brace-newline-before
</li>
<li>
block-opening-brace-newline-after
</li>
<li>
block-opening-brace-newline-before
</li>
<li>
block-opening-brace-space-after
</li>
<li>
block-opening-brace-space-before
</li>
<li>
color-hex-case
</li>
<li>
color-hex-length
</li>
<li>
declaration-block-properties-order
</li>
<li>
declaration-colon-space-after
</li>
<li>
declaration-colon-space-before
</li>
<li>
declaration-empty-line-before
</li>
<li>
indentation
</li>
<li>
length-zero-no-unit
</li>
<li>
number-leading-zero
</li>
<li>
number-no-trailing-zeros
</li>
<li>
selector-combinator-space-after
</li>
<li>
selector-combinator-space-before
</li>
<li>
selector-list-comma-newline-after
</li>
<li>
selector-list-comma-newline-before
</li>
<li>
selector-list-comma-space-after
</li>
<li>
selector-list-comma-space-before
</li>
<li>
shorthand-property-no-redundant-values
</li>
<li>
string-quotes
</li>
</ul>
<p>
and 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 <code>extends</code> property.
</p>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-default-formatting-rules-without-stylelint-config-file" class="anchor" aria-hidden="true" href="#default-formatting-rules-without-stylelint-config-file"></a>Default formatting rules (without stylelint config file)
</h2>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-basic" class="anchor" aria-hidden="true" href="#basic"></a>Basic
</h3>
<ul dir="auto">
<li>
2 spaces indentation
</li>
<li>
require 1 space between a simple selector and combinator
</li>
<li>
require 1 space between selectors and <code>{</code>
</li>
<li>
require new line after <code>{</code>
</li>
<li>
disallow any spaces between property and <code>:</code>
</li>
<li>
require 1 space between <code>:</code> and values
</li>
<li>
require new line after declarations
</li>
<li>
require <code>;</code> in last declaration
</li>
<li>
require 1 space between values and <code>!important</code>
</li>
<li>
disallow any spaces between <code>!</code> and <code>important</code>
</li>
<li>
leave 1 blank line between rules
</li>
<li>
leave 1 blank line between rules in atrules
</li>
<li>
disallow any blank lines between <code>@import</code>
</li>
</ul>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-for-nested-selector-syntax" class="anchor" aria-hidden="true" href="#for-nested-selector-syntax"></a>for nested selector syntax
</h3>
<ul dir="auto">
<li>
leave 1 line between declarations and nested rules
</li>
</ul>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-scss" class="anchor" aria-hidden="true" href="#scss"></a>SCSS
</h3>
<ul dir="auto">
<li>
require 1 space between <code>@mixin</code> and mixin name
</li>
<li>
require 1 space between mixin name and <code>(</code>
</li>
<li>
require 1 space between <code>@extend</code> and base rules
</li>
<li>
require 1 space between <code>@include</code> and mixin name
</li>
<li>
disallow any spaces between <code>$variable</code> and <code>:</code>
</li>
<li>
require 1 space between <code>:</code> and name of variable
</li>
</ul>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-option-projects" class="anchor" aria-hidden="true" href="#option-projects"></a>Option projects
</h2>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-editor-plugins" class="anchor" aria-hidden="true" href="#editor-plugins"></a>Editor plugins
</h3>
<ul dir="auto">
<li>
sublime-stylefmt by @dmnsgn
</li>
<li>
atom-stylefmt by @1000ch
</li>
<li>
vim-stylefmt by @kewah
</li>
<li>
stylefmt.el by @KeenS
</li>
<li>
vscode-stylefmt by @mrmlnc
</li>
</ul>
<h3 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-for-task-runners" class="anchor" aria-hidden="true" href="#for-task-runners"></a>for Task Runners
</h3>
<ul dir="auto">
<li>
gulp-stylefmt
</li>
<li>
grunt-stylefmt
</li>
<li>
fly-stylefmt
</li>
<li>
laravel-elixir-stylefmt by @appleboy
</li>
<li>
stylefmt-loader by @tomasAlabes
</li>
</ul>
<h2 dir="auto">
<a rel="nofollow noopener" target="_blank" id="user-content-license" class="anchor" aria-hidden="true" href="#license"></a>License
</h2>
<p>
The MIT License (MIT)<br /> Copyright (c) 2015 Masaaki Morishita
</p>