Some formatting options are not showing above because they are not available in this mode. For full details about the formatting options, please click here.
+ Some formatting options are not showing above because they are not available in this mode. Please see formatting options section for full details.
Command-line usage
@@ -104,15 +104,15 @@ Formatting options
The below is a JSON containing default formatting options.
- {
"insertColons": true,
"insertSemicolons": true,
"insertBraces": true,
"insertNewLineBetweenGroups": 1,
"insertNewLineBetweenSelectors": false,
"insertSpaceBeforeComment": true,
"insertSpaceAfterComment": true,
"insertSpaceAfterComma": true,
"insertSpaceInsideParenthesis": false,
"insertParenthesisAroundIfCondition": true,
"insertNewLineBeforeElse": false,
"insertLeadingZeroBeforeFraction": true,
"tabStopChar": "\t",
"newLineChar": "\n",
"quoteChar": "'",
"sortProperties": false,
"alwaysUseImport": false,
"alwaysUseNot": false,
"alwaysUseAtBlock": false,
"alwaysUseExtends": false,
"alwaysUseZeroWithoutUnit": false,
"reduceMarginAndPaddingValues": false
}insertColons= true: boolean
Insert or remove a colon between a property name and its value.
| true | false |
|---|
.class1 {
background: red;
}
| .class1 {
background red;
}
|
insertSemicolons= true: boolean
Insert or remove a semi-colon after a property value, a variable declaration, a variable assignment and a mixin/function call.
| true | false |
|---|
.class1 {
background: red;
}
| .class1 {
background: red
}
|
insertBraces= true: boolean
Insert or remove a pair of curly braces where they are supposed to be. Note that this option does not affect @block construction, see alwaysUseAtBlock.
| true | false |
|---|
.class1 {
background: red;
}
| .class1
background: red;
|
insertNewLineBetweenGroups= 1: integer
Represent a number of new-line between different type of groups.
| 0 | 1 |
|---|
.class1 {
$gray = #EEE;
background: red;
color: $gray;
mixin1();
mixin2();
}
.class2 {
background: blue;
}
| .class1 {
$gray = #EEE;
background: red;
color: $gray;
mixin1();
mixin2();
}
.class2 {
background: blue;
}
|
insertNewLineBetweenSelectors= false: boolean
Insert or remove a new-line between selectors.
| true | false |
|---|
.class1,
.class2 {
background: red;
}
| .class1, .class2 {
background: red;
}
|
Insert or remove a white-space before a comment.
| true | false |
|---|
.class1 {
background: red; // comment
}
| .class1 {
background: red;// comment
}
|
Insert or remove a white-space after a comment.
| true | false |
|---|
.class1 {
background: red; // comment
}
| .class1 {
background: red; //comment
}
|
insertSpaceAfterComma= true: boolean
Insert or remove a white-space after a comma.
| true | false |
|---|
mixin(a, b) {
margin: a b;
}
| mixin(a,b) {
margin: a b;
}
|
insertSpaceInsideParenthesis= false: boolean
Insert or remove a white-space after an open parenthesis and before a close parenthesis.
| true | false |
|---|
mixin( a, b ) {
margin: a b;
}
| mixin(a, b) {
margin: a b;
}
|
insertParenthesisAroundIfCondition= true: boolean
Insert or remove a pair of parentheses around if-condition.
| true | false |
|---|
if (a > b) {
background: red;
}
| if a > b {
background: red;
}
|
insertNewLineBeforeElse= false: boolean
Insert or remove a new-line before else keyword.
| true | false |
|---|
if (a > b) {
background: red;
}
else {
background: blue;
}
| if (a > b) {
background: red;
} else {
background: blue;
}
|
insertLeadingZeroBeforeFraction= true: boolean
Insert or remove a zero before a number that between 1 and 0.
| true | false |
|---|
.class1 {
margin: 0.5px;
}
| .class1 {
margin: .5px;
}
|
tabStopChar= "\t": string
Represent an indentation. You may change this to any sequence of white-spaces.
newLineChar= "\n": "\n" | "\r\n"
Represent a new-line character. You may want to change this to "\r\n" for Microsoft Windows.
quoteChar= "'": "'" | "\""
Represent a quote character that is used to begin and terminate a string. You must choose either a single-quote or a double-quote.
| "'" | "\"" |
|---|
.class1 {
font-family: 'Open Sans';
}
| .class1 {
font-family: "Open Sans";
}
|
sortProperties= false: false | "alphabetical" | "grouped" | array<string>
Can be either false for doing nothing about the CSS property order, "alphabetical" for sorting CSS properties from A to Z, "grouped" for sorting CSS properties according to Stylint, or an array of property names that defines the property order (for example, ["color", "background", "display"]).
| false | "alphabetical" |
|---|
.class1 {
background: red;
display: block;
color: white;
}
| .class1 {
background: red;
color: white;
display: block;
}
|
| "grouped" | ["color","background","display"] |
|---|
.class1 {
display: block;
background: red;
color: white;
}
| .class1 {
color: white;
background: red;
display: block;
}
|
alwaysUseImport= false: boolean
Replace @require with @import, or do nothing.
| true | false |
|---|
@import './file.styl';
| @require './file.styl';
|
alwaysUseNot= false: boolean
Replace ! operator with not keyword or vice versa.
| true | false |
|---|
.class1 {
if (not condition) {
background: red;
}
}
| .class1 {
if (!condition) {
background: red;
}
}
|
alwaysUseAtBlock= false: boolean
Replace an increased-indent at-block construction with an explicit one with @block keyword or vice versa.
Note that this option does not incorporate insertBraces option.
| true | false |
|---|
block = @block {
background: red;
}
| block =
background: red;
|
alwaysUseExtends= false: boolean
Convert @extend keyword to @extends keyword or vice versa.
| true | false |
|---|
.class1 {
background: red;
}
.class2 {
@extends .class1
color: white;
}
| .class1 {
background: red;
}
.class2 {
@extend .class1
color: white;
}
|
alwaysUseZeroWithoutUnit= false: boolean
Replace 0px, 0%, 0em and so on with 0 without units or vice versa.
| true | false |
|---|
.class1 {
margin: 0;
}
| .class1 {
margin: 0px;
}
|
reduceMarginAndPaddingValues= false: boolean
Reduce margin and padding duplicate values by converting margin x x x x to margin x, margin x y x y to margin x y where x, y is a property value.
| true | false |
|---|
.class1 {
margin: 0px;
padding: 0px 5px;
}
| .class1 {
margin: 0px 0px;
padding: 0px 5px 0px 5px;
}
|
+ {
"insertColons": true,
"insertSemicolons": true,
"insertBraces": true,
"insertNewLineBetweenGroups": 1,
"insertNewLineBetweenSelectors": false,
"insertSpaceBeforeComment": true,
"insertSpaceAfterComment": true,
"insertSpaceAfterComma": true,
"insertSpaceInsideParenthesis": false,
"insertParenthesisAroundIfCondition": true,
"insertNewLineBeforeElse": false,
"insertLeadingZeroBeforeFraction": true,
"tabStopChar": "\t",
"newLineChar": "\n",
"quoteChar": "'",
"sortProperties": false,
"alwaysUseImport": false,
"alwaysUseNot": false,
"alwaysUseAtBlock": false,
"alwaysUseExtends": false,
"alwaysUseZeroWithoutUnit": false,
"reduceMarginAndPaddingValues": false
}insertColons= true: boolean
Insert or remove a colon between a property name and its value.
| true | false |
|---|
.class1 {
background: red;
}
| .class1 {
background red;
}
|
insertSemicolons= true: boolean
Insert or remove a semi-colon after a property value, a variable declaration, a variable assignment and a mixin/function call.
| true | false |
|---|
.class1 {
background: red;
}
| .class1 {
background: red
}
|
insertBraces= true: boolean
Insert or remove a pair of curly braces where they are supposed to be. Note that this option does not affect @block construction, see alwaysUseAtBlock.
| true | false |
|---|
.class1 {
background: red;
}
| .class1
background: red;
|
insertNewLineBetweenGroups= 1: integer
Represent a number of new-line between different type of groups.
| 0 | 1 |
|---|
.class1 {
$gray = #EEE;
background: red;
color: $gray;
mixin1();
mixin2();
}
.class2 {
background: blue;
}
| .class1 {
$gray = #EEE;
background: red;
color: $gray;
mixin1();
mixin2();
}
.class2 {
background: blue;
}
|
insertNewLineBetweenSelectors= false: boolean
Insert or remove a new-line between selectors.
| true | false |
|---|
.class1,
.class2 {
background: red;
}
| .class1, .class2 {
background: red;
}
|
Insert or remove a white-space before a comment.
| true | false |
|---|
.class1 {
background: red; // comment
}
| .class1 {
background: red;// comment
}
|
Insert or remove a white-space after a comment.
| true | false |
|---|
.class1 {
background: red; // comment
}
| .class1 {
background: red; //comment
}
|
insertSpaceAfterComma= true: boolean
Insert or remove a white-space after a comma.
| true | false |
|---|
mixin(a, b) {
margin: a b;
}
| mixin(a,b) {
margin: a b;
}
|
insertSpaceInsideParenthesis= false: boolean
Insert or remove a white-space after an open parenthesis and before a close parenthesis.
| true | false |
|---|
mixin( a, b ) {
margin: a b;
}
| mixin(a, b) {
margin: a b;
}
|
insertParenthesisAroundIfCondition= true: boolean
Insert or remove a pair of parentheses around if-condition.
| true | false |
|---|
if (a > b) {
background: red;
}
| if a > b {
background: red;
}
|
insertNewLineBeforeElse= false: boolean
Insert or remove a new-line before else keyword.
| true | false |
|---|
if (a > b) {
background: red;
}
else {
background: blue;
}
| if (a > b) {
background: red;
} else {
background: blue;
}
|
insertLeadingZeroBeforeFraction= true: boolean
Insert or remove a zero before a number that between 1 and 0.
| true | false |
|---|
.class1 {
margin: 0.5px;
}
| .class1 {
margin: .5px;
}
|
tabStopChar= "\t": string
Represent an indentation. You may change this to any sequence of white-spaces.
newLineChar= "\n": "\n" | "\r\n"
Represent a new-line character. You may want to change this to "\r\n" for Microsoft Windows.
quoteChar= "'": "'" | "\""
Represent a quote character that is used to begin and terminate a string. You must choose either a single-quote or a double-quote.
| "'" | "\"" |
|---|
.class1 {
font-family: 'Open Sans';
}
| .class1 {
font-family: "Open Sans";
}
|
sortProperties= false: false | "alphabetical" | "grouped" | array<string>
Can be either false for doing nothing, "alphabetical" for sorting CSS properties from A to Z, "grouped" for sorting CSS properties according to Stylint, or an array of property names that defines the property order (for example, ["color", "background", "display"]).
| false | "alphabetical" |
|---|
.class1 {
background: red;
display: block;
color: white;
}
| .class1 {
background: red;
color: white;
display: block;
}
|
| "grouped" | ["color","background","display"] |
|---|
.class1 {
display: block;
background: red;
color: white;
}
| .class1 {
color: white;
background: red;
display: block;
}
|
alwaysUseImport= false: boolean
Replace @require with @import, or do nothing.
| true | false |
|---|
@import './file.styl';
| @require './file.styl';
|
alwaysUseNot= false: boolean
Replace ! operator with not keyword, or vice versa.
| true | false |
|---|
.class1 {
if (not condition) {
background: red;
}
}
| .class1 {
if (!condition) {
background: red;
}
}
|
alwaysUseAtBlock= false: boolean
Replace an increased-indent at-block construction with an explicit one with @block keyword or vice versa.
Note that this option does not incorporate insertBraces option.
| true | false |
|---|
block = @block {
background: red;
}
| block =
background: red;
|
alwaysUseExtends= false: boolean
Convert @extend keyword to @extends keyword, or vice versa.
| true | false |
|---|
.class1 {
background: red;
}
.class2 {
@extends .class1
color: white;
}
| .class1 {
background: red;
}
.class2 {
@extend .class1
color: white;
}
|
alwaysUseZeroWithoutUnit= false: boolean
Replace 0px, 0%, 0em and so on with 0 without units, or do nothing.
| true | false |
|---|
.class1 {
margin: 0;
}
| .class1 {
margin: 0px;
}
|
reduceMarginAndPaddingValues= false: boolean
Reduce margin and padding duplicate values by converting margin x x x x to margin x, margin x y x y to margin x y where x, y is a property value.
| true | false |
|---|
.class1 {
margin: 0px;
padding: 0px 5px;
}
| .class1 {
margin: 0px 0px;
padding: 0px 5px 0px 5px;
}
|
Stylint compatibility
- If you are using Stylint as a Stylus linter and wanting to use .stylintrc file as a formatting options, simply pass the .stylintrc file via --options parameter or pass an object of Stylint options as a second patameter of the format function. The Stylint options will be recognized by the command automatically.
+ If you are using Stylint as a Stylus linter and wanting to use .stylintrc file as formatting options, simply pass the .stylintrc file via --options command-line parameter.
stylus-supremacy ./path/to/your/file.styl
--options ./path/to/your/.stylintrc
-
- Ultimately, you can pass an object containing both Stylint options and Stylus Supremacy formatting options at the same time, but keep in mind that the latter will always have a higher priority.
+
+ Programmatically, starting from Stylus Supremacy version 1.0.0, the format function does not recognize Stylint rules, but you can convert them to formatting options by calling createFormattingOptionsFromStylint function.
const stylusSupremacy = require('stylus-supremacy')
@@ -121,12 +121,17 @@ Stylint compatibility
display none
`
- const formattingOptions = {
- colons: 'always', // From Stylint
- insertColons: false // From Stylus Supremacy
+ const stylintRules = {
+ colons: 'never',
+ braces: 'always'
}
- const result = stylusSupremacy.format(stylusContent, formattingOptions)
+ const formattingOptions =
stylusSupremacy.createFormattingOptionsFromStylint(stylintRules)
+
+ const result = stylusSupremacy.format(
+ stylusContent,
+ formattingOptions
+ )
console.log(result)
@@ -136,7 +141,7 @@ Stylint compatibility
}
- Notice that there is no colons between display and none since insertColons is false, although colons says otherwise. This is because the values of Stylus Supremacy formatting options are more important than Stylint options.
+ Please visit Stylint for full details regarding its rules.
Note that "always" in Stylint is equivalent to true; "never" is equivalent to false, otherwise the default formatting options will be used.
@@ -155,16 +160,18 @@ Stylint compatibility
Visual Studio Code extension
- Currently, Stylus Supremacy is only available in Visual Studio Code as an extension. To install the extension, open Visual Studio Code, press Ctrl+P on your keyboard and type the following command ext install stylus-supremacy, and finally press Enter key.
-
- Once you have this extension installed on your Visual Studio Code, you can simply open a Stylus file, right click on the document editing space, then choose Format Document command or press Shift+Alt+F on your keyboard. This also supports Format Section command as well. However, the cursor after using Format Section command might be displaced.
+ Currently, Stylus Supremacy is only available in Visual Studio Code as an extension. To install the extension, follow the instruction video below.
+ Once you have this extension installed on your Visual Studio Code, you can simply open a Stylus file, right click on the document editing space, then choose Format Document command or press Shift+Alt+F on your keyboard. This also supports Format Section command as well. However, the cursor after using Format Section command might be displaced.
+
You can find Stylus Supremacy section under Visual Studio Code settings. Note that tabStopChar and newLineChar will be detected automatically based on your current active Stylus file so they are not visible in the settings. Please see formatting options section for all settings.
This extension also implements the Visual Studio Code built-in settings: editor.formatOnType and editor.formatOnSave as long as files.autoSave is off.
+ 
+
In case you are using Stylint as a Stylus linter, the extension automatically searches for .stylintrc file starting from the current active file directory up to the root working directory, and merges it with the Visual Studio Code settings. The settings in Visual Studio Code will be used as a base, and overridden by .stylintrc file. Please see Stylint compatibility section for the rule conversion.
diff --git a/docs/logo.png b/docs/logo.png
deleted file mode 100644
index 0a3bc37..0000000
Binary files a/docs/logo.png and /dev/null differ
diff --git a/docs/logo.svg b/docs/logo.svg
new file mode 100644
index 0000000..d7fc4e1
--- /dev/null
+++ b/docs/logo.svg
@@ -0,0 +1,104 @@
+
+
+
+
diff --git a/docs/vscode-format-on-save.gif b/docs/vscode-format-on-save.gif
new file mode 100644
index 0000000..11f0f7e
Binary files /dev/null and b/docs/vscode-format-on-save.gif differ
diff --git a/docs/vscode.gif b/docs/vscode.gif
index 4f97edc..23f6bdc 100644
Binary files a/docs/vscode.gif and b/docs/vscode.gif differ
diff --git a/edge/createFormattingOptions.js b/edge/createFormattingOptions.js
index bcb393a..2b2b5d4 100644
--- a/edge/createFormattingOptions.js
+++ b/edge/createFormattingOptions.js
@@ -177,7 +177,7 @@ const schema = {
}
},
sortProperties: {
- description: 'Can be either false for doing nothing about the CSS property order, "alphabetical" for sorting CSS properties from A to Z, "grouped" for sorting CSS properties according to Stylint, or an array of property names that defines the property order (for example, ["color", "background", "display"]).',
+ description: 'Can be either false for doing nothing, "alphabetical" for sorting CSS properties from A to Z, "grouped" for sorting CSS properties according to Stylint, or an array of property names that defines the property order (for example, ["color", "background", "display"]).',
oneOf: [
false,
'alphabetical',
@@ -211,7 +211,7 @@ const schema = {
}
},
alwaysUseNot: {
- description: 'Replace ! operator with not keyword or vice versa.',
+ description: 'Replace ! operator with not keyword, or vice versa.',
type: 'boolean',
default: false,
example: {
@@ -236,7 +236,7 @@ const schema = {
}
},
alwaysUseExtends: {
- description: 'Convert @extend keyword to @extends keyword or vice versa.',
+ description: 'Convert @extend keyword to @extends keyword, or vice versa.',
type: 'boolean',
default: false,
example: {
@@ -251,7 +251,7 @@ const schema = {
}
},
alwaysUseZeroWithoutUnit: {
- description: 'Replace 0px, 0%, 0em and so on with 0 without units or vice versa.',
+ description: 'Replace 0px, 0%, 0em and so on with 0 without units, or do nothing.',
type: 'boolean',
default: false,
example: {
diff --git a/edge/format.js b/edge/format.js
index 2d8d533..ce3e11d 100644
--- a/edge/format.js
+++ b/edge/format.js
@@ -3,7 +3,6 @@ const ordering = require('stylint/src/data/ordering.json')
const _ = require('lodash')
const createFormattingOptions = require('./createFormattingOptions')
-const createFormattingOptionsFromStylint = require('./createFormattingOptionsFromStylint')
const createStringBuffer = require('./createStringBuffer')
function format(content, options = {}) {