-
Notifications
You must be signed in to change notification settings - Fork 89
/
compositor.json
90 lines (90 loc) · 24.8 KB
/
compositor.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
{
"name": "morishitter/stylefmt",
"version": "0.1.4",
"libraries": {
"xv": "^1.1.25"
},
"title": "",
"branch": "master",
"style": {
"name": "Material",
"componentSet": {
"nav": "nav/DarkAbsoluteNav",
"header": "header/GradientHeader",
"article": "article/BasicArticle",
"footer": "footer/BasicFooter"
},
"fontFamily": "Roboto, sans-serif",
"heading": {
"fontWeight": 500,
"letterSpacing": "-0.01em"
},
"colors": {
"text": "#212121",
"background": "#fff",
"primary": "#2196f3",
"secondary": "#1565c0",
"highlight": "#ff4081",
"border": "#e0e0e0",
"muted": "#f5f5f5"
},
"layout": {
"centered": true,
"bannerHeight": "80vh",
"maxWidth": 896
}
},
"content": [
{
"component": "nav",
"links": [
{
"href": "https://github.com/morishitter/stylefmt",
"text": "GitHub"
},
{
"href": "https://npmjs.com/package/stylefmt",
"text": "npm"
}
]
},
{
"component": "header",
"heading": "stylefmt",
"subhead": "stylefmt is a tool that automatically formats stylesheets.",
"children": [
{
"component": "ui/TweetButton",
"text": "stylefmt: stylefmt is a tool that automatically formats stylesheets.",
"url": ""
},
{
"component": "ui/GithubButton",
"user": "morishitter",
"repo": "stylefmt"
}
],
"text": "v5.3.2"
},
{
"component": "article",
"metadata": {
"source": "github.readme"
},
"html": "<blockquote>\n<p>Modern CSS Formatter</p>\n</blockquote>\n<p><div>\n <a href=\"https://github.com/morishitter/stylefmt\">\n <img src=\"http://morishitter.github.io/stylefmt-logo.svg\">\n </a>\n</div>\n<br></p>\n<p>\n\n</p>\n\n<p></p><p>\n <a href=\"https://travis-ci.org/morishitter/stylefmt\">\n <img src=\"https://travis-ci.org/morishitter/stylefmt.svg\">\n </a></p>\n<p> <a href=\"https://www.npmjs.com/package/stylefmt\">\n <img src=\"https://img.shields.io/npm/v/stylefmt.svg?style=flat-square\">\n </a></p>\n<p> <a href=\"https://www.npmjs.org/package/stylefmt\">\n <img src=\"https://img.shields.io/npm/dm/stylefmt.svg?style=flat-square\">\n </a></p>\n<p> <a href=\"https://david-dm.org/morishitter/stylefmt\">\n <img src=\"https://david-dm.org/morishitter/stylefmt.svg\">\n </a></p>\n<p> <a href=\"https://opensource.org/licenses/MIT\">\n <img src=\"https://img.shields.io/badge/license-MIT-444444.svg?style=flat-square\">\n </a></p>\n<p> <a href=\"https://gitter.im/morishitter/stylefmt\">\n <img src=\"https://badges.gitter.im/Join%20Chat.svg\">\n </a>\n</p>\n<br><p></p>\n<p>stylefmt is a tool that automatically formats CSS according to <a href=\"http://stylelint.io/\">stylelint</a> rules.</p>\n<p>stylefmt'd code is:</p>\n<ul>\n<li>easier to <strong>write</strong> : never worry about minor formatting concerns while hacking away.</li>\n<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>\n<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>\n<li><strong>uncontroversial</strong> : never have a debate about spacing or brace position ever again!</li>\n</ul>\n<h2>NOTICE: Consider other tools before adopting stylefmt</h2>\n<p>If you are using stylefmt with stylelint configuration to format according to its rules, you can now use stylelint's <a href=\"https://github.com/stylelint/stylelint/releases/tag/7.11.0\">--fix</a> option (from v7.11.0) to autofix.</p>\n<p>Another on the other hand, <a href=\"https://github.com/prettier/prettier\">prettier</a> supports to format not only JavaScript but also CSS, SCSS and Less code.</p>\n<h2>Features</h2>\n<ul>\n<li><strong>Supports the latest CSS syntax:</strong> Including custom properties, range context for media features, <code>calc()</code> and nesting.</li>\n<li><strong>Understands CSS-like syntaxes:</strong> stylefmt is powered by <a href=\"https://github.com/postcss/postcss\">PostCSS</a>, so it understands any syntax that PostCSS can parse, including SCSS.</li>\n<li><strong>Works well with stylelint:</strong> <a 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>\n</ul>\n<h2>Examples</h2>\n<h3>Future CSS syntax (cssnext)</h3>\n<p>Input (input.css):</p>\n<pre><span class=\"hljs-comment\">/* custom properties */</span>\n<span class=\"hljs-selector-pseudo\">:root</span>{<span class=\"hljs-attribute\">--fontSize</span>: <span class=\"hljs-number\">1rem</span>;\n <span class=\"hljs-attribute\">--mainColor </span>:<span class=\"hljs-number\">#12345678</span>;\n<span class=\"hljs-attribute\">--highlightColor</span>:<span class=\"hljs-built_in\">hwb</span>(190, 35%, 20%);\n}\n\n<span class=\"hljs-comment\">/* custom media queries */</span>\n@<span class=\"hljs-keyword\">custom</span>-<span class=\"hljs-keyword\">media</span>\n\n--viewport-medium(width<=<span class=\"hljs-number\">50rem</span>);\n\n<span class=\"hljs-comment\">/* some var() & calc() */</span>\n<span class=\"hljs-selector-tag\">body</span>{<span class=\"hljs-attribute\">color</span>:<span class=\"hljs-built_in\">var</span>(--mainColor);\n <span class=\"hljs-attribute\">font-size</span>:<span class=\"hljs-built_in\">var</span>(--fontSize);\n <span class=\"hljs-attribute\">line-height</span>: <span class=\"hljs-built_in\">calc</span>(var(--fontSize) * <span class=\"hljs-number\">1.5</span>);\n<span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-built_in\">calc</span>((var(--fontSize) / <span class=\"hljs-number\">2</span>) + <span class=\"hljs-number\">1px</span>)}\n\n<span class=\"hljs-comment\">/* custom media query usage */</span>\n@<span class=\"hljs-keyword\">media</span> (--viewport-medium) {\n<span class=\"hljs-selector-tag\">body</span> {<span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-built_in\">calc</span>(var(--fontSize) * <span class=\"hljs-number\">1.2</span>); }\n}\n\n<span class=\"hljs-comment\">/* custom selectors */</span>\n@<span class=\"hljs-keyword\">custom</span>-<span class=\"hljs-keyword\">selector</span> :--heading h1,h2,h3, h4,h5,h6;\n<span class=\"hljs-selector-pseudo\">:--heading</span> { <span class=\"hljs-attribute\">margin-top</span>:<span class=\"hljs-number\">0</span> }\n\n<span class=\"hljs-comment\">/* colors stuff */</span>\n<span class=\"hljs-selector-tag\">a</span>{\n<span class=\"hljs-attribute\">color</span>:<span class=\"hljs-built_in\">var</span>(--highlightColor);\n <span class=\"hljs-attribute\">transition</span>:color <span class=\"hljs-number\">1s</span>;\n}\n<span class=\"hljs-selector-tag\">a</span><span class=\"hljs-selector-pseudo\">:hover</span>{<span class=\"hljs-attribute\">color </span>:<span class=\"hljs-built_in\">gray</span>(255,50%) }\n<span class=\"hljs-selector-tag\">a</span><span class=\"hljs-selector-pseudo\">:active</span>{<span class=\"hljs-attribute\">color </span>: rebeccapurple }\n<span class=\"hljs-selector-tag\">a</span><span class=\"hljs-selector-pseudo\">:any-link</span> { <span class=\"hljs-attribute\">color</span>:<span class=\"hljs-built_in\">color</span>(var(--highlightColor) <span class=\"hljs-built_in\">blackness</span>(+20%)) }\n\n<span class=\"hljs-comment\">/* font stuff */</span>\n<span class=\"hljs-selector-tag\">h2</span> {<span class=\"hljs-attribute\">font-variant-caps</span>:small-caps;\n}<span class=\"hljs-selector-tag\">table</span>{<span class=\"hljs-attribute\">font-variant-numeric</span>: lining-nums;\n}\n\n<span class=\"hljs-comment\">/* filters */</span>\n<span class=\"hljs-selector-class\">.blur</span>{<span class=\"hljs-attribute\">filter</span>:<span class=\"hljs-built_in\">blur</span>(4px)}<span class=\"hljs-selector-class\">.sepia</span>{\n<span class=\"hljs-attribute\">filter</span>: <span class=\"hljs-built_in\">sepia</span>(.8);}</pre><p>Yield:</p>\n<pre><span class=\"hljs-comment\">/* custom properties */</span>\n<span class=\"hljs-selector-pseudo\">:root</span> {\n <span class=\"hljs-attribute\">--fontSize</span>: <span class=\"hljs-number\">1rem</span>;\n <span class=\"hljs-attribute\">--mainColor</span>: <span class=\"hljs-number\">#12345678</span>;\n <span class=\"hljs-attribute\">--highlightColor</span>: <span class=\"hljs-built_in\">hwb</span>(190, 35%, 20%);\n}\n\n<span class=\"hljs-comment\">/* custom media queries */</span>\n@<span class=\"hljs-keyword\">custom</span>-<span class=\"hljs-keyword\">media</span> --viewport-medium (width <= <span class=\"hljs-number\">50rem</span>);\n\n<span class=\"hljs-comment\">/* some var() & calc() */</span>\n<span class=\"hljs-selector-tag\">body</span> {\n <span class=\"hljs-attribute\">color</span>: <span class=\"hljs-built_in\">var</span>(--mainColor);\n <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-built_in\">var</span>(--fontSize);\n <span class=\"hljs-attribute\">line-height</span>: <span class=\"hljs-built_in\">calc</span>(var(--fontSize) * <span class=\"hljs-number\">1.5</span>);\n <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-built_in\">calc</span>((var(--fontSize) / <span class=\"hljs-number\">2</span>) + <span class=\"hljs-number\">1px</span>);\n}\n\n<span class=\"hljs-comment\">/* custom media query usage */</span>\n@<span class=\"hljs-keyword\">media</span> (--viewport-medium) {\n <span class=\"hljs-selector-tag\">body</span> {\n <span class=\"hljs-attribute\">font-size</span>: <span class=\"hljs-built_in\">calc</span>(var(--fontSize) * <span class=\"hljs-number\">1.2</span>);\n }\n}\n\n<span class=\"hljs-comment\">/* custom selectors */</span>\n@<span class=\"hljs-keyword\">custom</span>-<span class=\"hljs-keyword\">selector</span> :--heading h1, h2, h3, h4, h5, h6;\n\n<span class=\"hljs-selector-pseudo\">:--heading</span> {\n <span class=\"hljs-attribute\">margin-top</span>: <span class=\"hljs-number\">0</span>;\n}\n\n<span class=\"hljs-comment\">/* colors stuff */</span>\n<span class=\"hljs-selector-tag\">a</span> {\n <span class=\"hljs-attribute\">color</span>: <span class=\"hljs-built_in\">var</span>(--highlightColor);\n <span class=\"hljs-attribute\">transition</span>: color <span class=\"hljs-number\">1s</span>;\n}\n\n<span class=\"hljs-selector-tag\">a</span><span class=\"hljs-selector-pseudo\">:hover</span> {\n <span class=\"hljs-attribute\">color</span>: <span class=\"hljs-built_in\">gray</span>(255, 50%);\n}\n\n<span class=\"hljs-selector-tag\">a</span><span class=\"hljs-selector-pseudo\">:active</span> {\n <span class=\"hljs-attribute\">color</span>: rebeccapurple;\n}\n\n<span class=\"hljs-selector-tag\">a</span><span class=\"hljs-selector-pseudo\">:any-link</span> {\n <span class=\"hljs-attribute\">color</span>: <span class=\"hljs-built_in\">color</span>(var(--highlightColor) <span class=\"hljs-built_in\">blackness</span>(+20%));\n}\n\n<span class=\"hljs-comment\">/* font stuff */</span>\n<span class=\"hljs-selector-tag\">h2</span> {\n <span class=\"hljs-attribute\">font-variant-caps</span>: small-caps;\n}\n\n<span class=\"hljs-selector-tag\">table</span> {\n <span class=\"hljs-attribute\">font-variant-numeric</span>: lining-nums;\n}\n\n<span class=\"hljs-comment\">/* filters */</span>\n<span class=\"hljs-selector-class\">.blur</span> {\n <span class=\"hljs-attribute\">filter</span>: <span class=\"hljs-built_in\">blur</span>(4px);\n}\n\n<span class=\"hljs-selector-class\">.sepia</span> {\n <span class=\"hljs-attribute\">filter</span>: <span class=\"hljs-built_in\">sepia</span>(.8);\n}</pre><h3>SCSS syntax</h3>\n<p>Input (input.scss):</p>\n<pre><span class=\"hljs-comment\">// mixin for clearfix</span>\n\n\n @<span class=\"hljs-keyword\">mixin</span> clearfix () { &:before,\n &:after {\n <span class=\"hljs-attribute\">content</span>:<span class=\"hljs-string\">" "</span>;\n <span class=\"hljs-attribute\">display</span> : table; }\n\n &:after {<span class=\"hljs-attribute\">clear</span>: both;}\n }<span class=\"hljs-selector-class\">.class</span>\n{\n <span class=\"hljs-attribute\">padding</span>:<span class=\"hljs-number\">10px</span>;@<span class=\"hljs-keyword\">include</span> clearfix();}\n <span class=\"hljs-selector-class\">.base</span> { <span class=\"hljs-attribute\">color</span>: red; }\n\n<span class=\"hljs-comment\">// placeholder</span>\n%<span class=\"hljs-selector-tag\">base</span>\n{\n\n\n<span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">12px</span>\n}\n\n.foo{\n@extend .base;}\n\n<span class=\"hljs-selector-class\">.bar</span>\n { @<span class=\"hljs-keyword\">extend</span> %base;\n\n}</pre><p>Yield:</p>\n<pre><span class=\"hljs-comment\">// mixin for clearfix</span>\n@<span class=\"hljs-keyword\">mixin</span> clearfix () {\n &:before,\n &:after {\n <span class=\"hljs-attribute\">content</span>: <span class=\"hljs-string\">" "</span>;\n <span class=\"hljs-attribute\">display</span>: table;\n }\n\n &:after {\n <span class=\"hljs-attribute\">clear</span>: both;\n }\n}\n\n<span class=\"hljs-selector-class\">.class</span> {\n <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">10px</span>;\n @<span class=\"hljs-keyword\">include</span> clearfix();\n}\n\n<span class=\"hljs-selector-class\">.base</span> {\n <span class=\"hljs-attribute\">color</span>: red;\n}\n\n<span class=\"hljs-comment\">// placeholder</span>\n%<span class=\"hljs-selector-tag\">base</span> {\n <span class=\"hljs-attribute\">padding</span>: <span class=\"hljs-number\">12px</span>;\n}\n\n<span class=\"hljs-selector-class\">.foo</span> {\n @<span class=\"hljs-keyword\">extend</span> .base;\n}\n\n<span class=\"hljs-selector-class\">.bar</span> {\n @<span class=\"hljs-keyword\">extend</span> %base;\n}</pre><h2>Installation</h2>\n<pre>$ npm install stylefmt</pre><h2>Usage</h2>\n<h3>in Command Line</h3>\n<p>CLI Help:</p>\n<pre>$ stylefmt <span class=\"hljs-comment\">--help</span></pre><pre><span class=\"hljs-attribute\">Usage</span>: stylefmt [options] input-name [output-name]\n\n<span class=\"vim\">Option<span class=\"hljs-variable\">s:</span>\n\n -<span class=\"hljs-keyword\">b</span>, --config-basedir Path <span class=\"hljs-keyword\">to</span> the directory that relative paths defining <span class=\"hljs-string\">"extends"</span>\n -<span class=\"hljs-keyword\">c</span>, --config Path <span class=\"hljs-keyword\">to</span> <span class=\"hljs-keyword\">a</span> specific configuration <span class=\"hljs-keyword\">file</span> (JSON, YAML, <span class=\"hljs-built_in\">or</span> CommonJS)\n -d, --diff Output diff against original <span class=\"hljs-keyword\">file</span>\n -r, --recursive Format <span class=\"hljs-keyword\">list</span> of space seperated <span class=\"hljs-keyword\">files</span>(globs) in place\n -v, --<span class=\"hljs-keyword\">version</span> Output the <span class=\"hljs-keyword\">version</span> <span class=\"hljs-keyword\">number</span>\n -h, --<span class=\"hljs-keyword\">help</span> Output usage information\n -i, --ignore-path Path <span class=\"hljs-keyword\">to</span> <span class=\"hljs-keyword\">a</span> <span class=\"hljs-keyword\">file</span> containing patterns that describe <span class=\"hljs-keyword\">files</span> <span class=\"hljs-keyword\">to</span> ignore.\n --stdin-filename A filename <span class=\"hljs-keyword\">to</span> assign stdin <span class=\"hljs-built_in\">input</span>.</span></pre><p>stylefmt can also read a file from stdin if there are no input-file as argument in CLI.</p>\n<pre>$ <span class=\"hljs-keyword\">cat</span> <span class=\"hljs-keyword\">input</span>.css | stylefmt --stdin-filename <span class=\"hljs-keyword\">input</span>.css</pre><h3>in Node.js</h3>\n<pre><span class=\"hljs-keyword\">var</span> fs = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'fs'</span>);\n<span class=\"hljs-keyword\">var</span> postcss = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'postcss'</span>);\n<span class=\"hljs-keyword\">var</span> scss = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'postcss-scss'</span>); <span class=\"hljs-comment\">// when you use scss syntax</span>\n<span class=\"hljs-keyword\">var</span> stylefmt = <span class=\"hljs-built_in\">require</span>(<span class=\"hljs-string\">'stylefmt'</span>);\n\n<span class=\"hljs-keyword\">var</span> css = fs.readFileSync(<span class=\"hljs-string\">'input.css'</span>, <span class=\"hljs-string\">'utf-8'</span>);\n\npostcss([\n stylefmt\n]).process(css, {\n <span class=\"hljs-attr\">from</span>: <span class=\"hljs-string\">'input.css'</span>,\n <span class=\"hljs-attr\">syntax</span>: scss\n })\n .then(<span class=\"hljs-function\"><span class=\"hljs-keyword\">function</span> (<span class=\"hljs-params\">result</span>) </span>{\n result.css; <span class=\"hljs-comment\">// formatted code</span>\n });</pre><h3>in Task Runners</h3>\n<p>We can use stylefmt in <a href=\"https://github.com/morishitter/grunt-stylefmt\">Grunt</a>, <a href=\"https://github.com/morishitter/gulp-stylefmt\">gulp</a>, and <a href=\"https://github.com/morishitter/fly-cssfmt\">Fly</a>.</p>\n<h2>stylelint rules that stylefmt can handle</h2>\n<p>stylefmt :heart: stylelint</p>\n<p>stylefmt supports the following stylelint rules:</p>\n<ul>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/at-rule-empty-line-before\">at-rule-empty-line-before</a> ("always"|"never" and except "blockless-group" only)</li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/at-rule-semicolon-newline-after\">at-rule-semicolon-newline-after</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/block-closing-brace-newline-after\">block-closing-brace-newline-after</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/block-closing-brace-newline-before\">block-closing-brace-newline-before</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/block-opening-brace-newline-after\">block-opening-brace-newline-after</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/block-opening-brace-newline-before\">block-opening-brace-newline-before</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/block-opening-brace-space-after\">block-opening-brace-space-after</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/block-opening-brace-space-before\">block-opening-brace-space-before</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/color-hex-case\">color-hex-case</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/color-hex-length\">color-hex-length</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/declaration-block-properties-order\">declaration-block-properties-order</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/declaration-colon-space-after\">declaration-colon-space-after</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/declaration-colon-space-before\">declaration-colon-space-before</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/declaration-empty-line-before\">declaration-empty-line-before</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/indentation\">indentation</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/length-zero-no-unit\">length-zero-no-unit</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/number-leading-zero\">number-leading-zero</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/number-no-trailing-zeros\">number-no-trailing-zeros</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/selector-combinator-space-after\">selector-combinator-space-after</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/selector-combinator-space-before\">selector-combinator-space-before</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/selector-list-comma-newline-after\">selector-list-comma-newline-after</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/selector-list-comma-newline-before\">selector-list-comma-newline-before</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/selector-list-comma-space-after\">selector-list-comma-space-after</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/selector-list-comma-space-before\">selector-list-comma-space-before</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/shorthand-property-no-redundant-values\">shorthand-property-no-redundant-values</a></li>\n<li><a href=\"https://github.com/stylelint/stylelint/tree/master/lib/rules/string-quotes\">string-quotes</a></li>\n</ul>\n<p>and we can also format from the other stylelint's configration files or packages (e.g. <a href=\"https://github.com/stylelint/stylelint-config-standard\">stylelint-config-standard</a>, <a href=\"https://github.com/suitcss/stylelint-config-suitcss\">stylelint-config-suitcss</a> and so on) using <code>extends</code> property.</p>\n<h2>Default formatting rules (without stylelint config file)</h2>\n<h3>Basic</h3>\n<ul>\n<li>2 spaces indentation</li>\n<li>require 1 space between a simple selector and combinator</li>\n<li>require 1 space between selectors and <code>{</code></li>\n<li>require new line after <code>{</code></li>\n<li>disallow any spaces between property and <code>:</code></li>\n<li>require 1 space between <code>:</code> and values</li>\n<li>require new line after declarations</li>\n<li>require <code>;</code> in last declaration</li>\n<li>require 1 space between values and <code>!important</code></li>\n<li>disallow any spaces between <code>!</code> and <code>important</code></li>\n<li>leave 1 blank line between rules</li>\n<li>leave 1 blank line between rules in atrules</li>\n<li>disallow any blank lines between <code>@import</code></li>\n</ul>\n<h3>for nested selector syntax</h3>\n<ul>\n<li>leave 1 line between declarations and nested rules</li>\n</ul>\n<h3>SCSS</h3>\n<ul>\n<li>require 1 space between <code>@mixin</code> and mixin name</li>\n<li>require 1 space between mixin name and <code>(</code></li>\n<li>require 1 space between <code>@extend</code> and base rules</li>\n<li>require 1 space between <code>@include</code> and mixin name</li>\n<li>disallow any spaces between <code>$variable</code> and <code>:</code></li>\n<li>require 1 space between <code>:</code> and name of variable</li>\n</ul>\n<h2>Option projects</h2>\n<h3>Editor plugins</h3>\n<ul>\n<li><a href=\"https://github.com/dmnsgn/sublime-stylefmt\">sublime-stylefmt</a> by <a href=\"https://github.com/dmnsgn\">@dmnsgn</a></li>\n<li><a href=\"https://github.com/1000ch/atom-stylefmt\">atom-stylefmt</a> by <a href=\"https://github.com/1000ch\">@1000ch</a></li>\n<li><a href=\"https://github.com/kewah/vim-stylefmt\">vim-stylefmt</a> by <a href=\"https://github.com/kewah\">@kewah</a></li>\n<li><a href=\"https://github.com/KeenS/stylefmt.el\">stylefmt.el</a> by <a href=\"https://github.com/KeenS\">@KeenS</a></li>\n<li><a href=\"https://github.com/mrmlnc/vscode-stylefmt\">vscode-stylefmt</a> by <a href=\"https://github.com/mrmlnc\">@mrmlnc</a></li>\n</ul>\n<h3>for Task Runners</h3>\n<ul>\n<li><a href=\"https://github.com/morishitter/gulp-stylefmt\">gulp-stylefmt</a></li>\n<li><a href=\"https://github.com/morishitter/grunt-stylefmt\">grunt-stylefmt</a></li>\n<li><a href=\"https://github.com/morishitter/fly-cssfmt\">fly-stylefmt</a></li>\n<li><a href=\"https://github.com/appleboy/laravel-elixir-cssfmt\">laravel-elixir-stylefmt</a> by <a href=\"https://github.com/appleboy\">@appleboy</a></li>\n<li><a href=\"https://github.com/tomasAlabes/stylefmt-loader\">stylefmt-loader</a> by <a href=\"https://github.com/tomasAlabes\">@tomasAlabes</a></li>\n</ul>\n<h2>License</h2>\n<p>The MIT License (MIT)</p>\n<p>Copyright (c) 2015 Masaaki Morishita</p>\n"
},
{
"component": "footer",
"links": [
{
"href": "https://github.com/morishitter/stylefmt",
"text": "GitHub"
},
{
"href": "https://github.com/morishitter",
"text": "morishitter"
}
]
}
]
}