Initial commit

This commit is contained in:
Patrick Marsceill
2017-03-09 13:16:08 -05:00
commit b7b0d0d7bf
4147 changed files with 401224 additions and 0 deletions

View File

@@ -0,0 +1,66 @@
# at-else-closing-brace-newline-after
Require or disallow a newline after the closing brace of `@else` statements.
```scss
@if (@a == 0) {
} @else if (@a == 1){ }
@else { }
/**
* The newline after these braces */
```
This rule might have conflicts with stylelint's core rule [`block-closing-brace-newline-after`](http://stylelint.io/user-guide/rules/block-closing-brace-newline-after/) if it doesn't have `"ignoreAtRules": ["else"]` in a `.stylelintrc` config file. That's because an `@else { ... }` statement can be successfully parsed as an at-rule with a block. You might also want to set `"ignoreAtRules": ["else"]` for another stylelint's core rule - [`at-rule-empty-line-before`](http://stylelint.io/user-guide/rules/at-rule-empty-line-before/) that could be forcing empty lines before at-rules (including `@else`s that follow `@if`s or other `@else`s).
This rule doesn't have usual `"always"` and `"never"` main option values, because if you don't need special behavior for `@if` and `@else` you could just use [`block-closing-brace-newline-after`](http://stylelint.io/user-guide/rules/block-closing-brace-newline-after/) set to `"always"` or any other value.
## Options
`string`: `"always-last-in-chain"`
### `"always-last-in-chain"`
There *must always* be a newline after the closing brace of `@else` that is the last statement in a conditional statement chain (i.e. has no `@else` right after it). If it's not, there *must not* be a newline.
The following patterns are considered warnings:
```scss
a {
@if ($x == 1) {
// ...
} @else {
// ...
} width: 10px; // No @else after, so should have a newline
}
@if ($x == 1) {
// ...
} @else if { } // Has @else after it, so shouldn't have a newline
@else { }
```
The following patterns are *not* considered warnings:
```scss
a {
@if ($x == 1) {} @else {}
width: 10px;
}
a {
@if ($x == 1) {
// ...
} @else if {
// ...
} @else {}
width: 10px;
}
a {
@if ($x == 1) { } @else if { }@else { }
width: 10px;
}
```

View File

@@ -0,0 +1,129 @@
# at-else-closing-brace-space-after
Require a single space or disallow whitespace after the closing brace of `@else` statements.
```scss
@if ($a == 0) { }
@else if ($x == 2) { }
/**
* The space after this brace */
```
This rule might have conflicts with stylelint's core [`block-closing-brace-space-after`](http://stylelint.io/user-guide/rules/block-closing-brace-space-after/) rule if the latter is set up in your `.stylelintrc` config file.
## Options
`string`: `"always-intermediate"|"never-intermediate"`
### `"always-intermediate"`
There *must always* be a single space after the closing brace of `@else` that is not the last statement in a conditional statement chain (i.e. does have another `@else` right after it).
The following patterns are considered warnings:
```scss
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
}@else {}
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
}
@else { }
// `@else if` has a space and a newline after the closing brace
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
}
@else { }
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
} @else { } // Two spaces
```
The following patterns are *not* considered warnings:
```scss
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
} @else {}
a {
@if ($x == 1) {
// ...
} @else ($x == 2) {
// ...
}
width: 10px;
}
@if ($x == 1) { } @else if ($x == 2) {
// ...
} @include x;
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
} @include x;
```
### `"never-intermediate"`
There *must never* be a whitespace after the closing brace of `@else` that is not the last statement in a conditional statement chain (i.e. does have another `@else` right after it).
The following patterns are considered warnings:
```scss
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
} @else {}
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
}
@else { }
```
The following patterns are *not* considered warnings:
```scss
@if ($x == 1) {
// ...
}@else {}
a {
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
}
width: 10px;
}
@if ($x == 1) { } @else if ($x == 2) {
// ...
}@include x;
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
} @include x;
```

View File

@@ -0,0 +1,63 @@
# at-else-empty-line-before
Require an empty line or disallow empty lines before `@`-else.
```scss
@if ($a == 0) { }
/* ← */
@else if ($x == 2) { }
/**
* This empty line */
```
`@if` and `@else` statements might need to have different behavior than all the other at-rules. For that you might need to set `"ignoreAtRules": ["else"]` for stylelint's core rule [`at-rule-empty-line-before`](http://stylelint.io/user-guide/rules/at-rule-empty-line-before/). But that would make you unable to disallow empty lines before `@else` while forcing it to be on a new line. This rule is designed to solve exactly that.
## Options
`string`: `"never"`
There is no `"always"`, `"always-single-line"` options, because for such cases stylelint's `at-rule-empty-line-before` would work.
### `"never"`
There *must never* be an empty line before `@else` statements.
The following patterns are considered warnings:
```scss
@if ($x == 1) {
// ...
}
@else {}
```
```scss
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
}
@else { }
```
The following patterns are *not* considered warnings:
```scss
@if ($x == 1) {
// ...
} @else if ($x == 2) {
// ...
} @else {}
a {
@if ($x == 1) {
// ...
}
@else ($x == 2) {
// ...
}
}
```

View File

@@ -0,0 +1,49 @@
# at-extend-no-missing-placeholder
Disallow at-extends (`@extend`) with missing placeholders.
Using a class selector with the `@extend` directive usually results in more generated CSS than when using a placeholder selector. Furthermore, Sass specifically introduced placeholder selectors in order to be used with `@extend`.
See [Mastering Sass extends and placeholders](http://8gramgorilla.com/mastering-sass-extends-and-placeholders/).
```scss
.foo {
@extend %bar
//
// This is a placeholder selector
}
```
The following patterns are considered warnings:
```scss
p {
@extend .some-class;
}
```
```scss
p {
@extend #some-identifer;
}
```
```scss
p {
@extend .blah-#{$dynamically_generated_name};
}
```
The following patterns are *not* considered warnings:
```scss
p {
@extend %placeholder;
}
```
```scss
p {
@extend #{$dynamically_generated_placeholder_name};
}
```

View File

@@ -0,0 +1,29 @@
# at-function-pattern
Specify a pattern for Sass/SCSS-like function names.
```scss
@function grid-width($n) {
/** ↑
* The pattern of this */
```
## Options
`regex` or `string`
A string will be translated into a RegExp like so `new RegExp(yourString)` — so be sure to escape properly.
### E.g. `/foo-.+/`
The following patterns are considered warnings:
```scss
@function boo-bar ($n) {
```
The following patterns are *not* considered warnings:
```scss
@function foo-bar ($n){
```

View File

@@ -0,0 +1,53 @@
# at-if-closing-brace-newline-after
Require or disallow a newline after the closing brace of `@if` statements.
```scss
@if ($a == 0) { }
/**
* The newline after this brace */
```
This rule might have conflicts with stylelint's core rule [`block-closing-brace-newline-after`](http://stylelint.io/user-guide/rules/block-closing-brace-newline-after/) if it doesn't have `"ignoreAtRules": ["if"]` in a `.stylelintrc` config file. That's because an `@if { ... }` statement can be successfully parsed as an at-rule with a block. You might also want to set `"ignoreAtRules": ["else"]` for another stylelint's core rule - [`at-rule-empty-line-before`](http://stylelint.io/user-guide/rules/at-rule-empty-line-before/) that could be forcing empty lines before at-rules (including `@else`s that follow `@if`s or other `@else`s).
This rule doesn't have usual `"always"` and `"never"` main option values, because if you don't need special behavior for `@if` and `@else` you could just use [`block-closing-brace-newline-after`](http://stylelint.io/user-guide/rules/block-closing-brace-newline-after/) set to `"always"` or any other value.
## Options
`string`: `"always-last-in-chain"`
### `"always-last-in-chain"`
There *must always* be a newline after the closing brace of `@if` that is the last statement in a conditional statement chain (i.e. has no `@else` right after it). If it's not, there *must not* be a newline.
The following patterns are considered warnings:
```scss
a {
@if ($x == 1) {
// ...
} width: 10px; // No @else - should have a newline
}
@if ($x == 1) {
// ...
} // Has @else - shouldn't have a newline
@else { }
```
The following patterns are *not* considered warnings:
```scss
a {
@if ($x == 1) {}
width: 10px;
}
@if ($x == 1) {
// ...
} @else {} // Has @else, so no newline needed
@if ($x == 1) { }@else { }
```

View File

@@ -0,0 +1,98 @@
# at-if-closing-brace-space-after
Require a single space or disallow whitespace after the closing brace of `@if` statements.
```scss
@if ($a == 0) { }
/**
* The space after this brace */
```
This rule might have conflicts with stylelint's core [`block-closing-brace-space-after`](http://stylelint.io/user-guide/rules/block-closing-brace-space-after/) rule if the latter is set up in your `.stylelintrc` config file.
## Options
`string`: `"always-intermediate"|"never-intermediate"`
### `"always-intermediate"`
There *must always* be a single space after the closing brace of `@if` that is not the last statement in a conditional statement chain (i.e. does have `@else` right after it).
The following patterns are considered warnings:
```scss
@if ($x == 1) {
// ...
}@else {}
@if ($x == 1) {
// ...
}
@else { }
// `@if` has a space and a newline after the closing brace
@if ($x == 1) {
// ...
}
@else { }
@if ($x == 1) {
// ...
} @else { } // Two spaces
```
The following patterns are *not* considered warnings:
```scss
@if ($x == 1) {
// ...
} @else {}
a {
@if ($x == 1) {}
width: 10px;
}
@if ($x == 1) { }@include x;
@if ($x == 1) {
// ...
} @include x;
```
### `"never-intermediate"`
There *must never* be a whitespace after the closing brace of `@if` that is not the last statement in a conditional statement chain (i.e. does have `@else` right after it).
The following patterns are considered warnings:
```scss
@if ($x == 1) {
// ...
} @else {}
@if ($x == 1) {
// ...
}
@else { }
```
The following patterns are *not* considered warnings:
```scss
@if ($x == 1) {
// ...
}@else {}
a {
@if ($x == 1) {}
width: 10px;
}
@if ($x == 1) { }@include x;
@if ($x == 1) {
// ...
} @include x;
```

View File

@@ -0,0 +1,76 @@
# at-import-no-partial-extension
Disallow file extensions in partial names in `@import`.
**Deprecated. Use [`at-import-partial-extension-blacklist`](/src/rules/at-import-partial-extension-blacklist/README.md) or [`at-import-partial-extension-whitelist`](/src/rules/at-import-partial-extension-whitelist/README.md) instead**
```scss
@import "path/to/file.scss"
/** ↑
* Disallow this */
```
The rule ignores [cases](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import) when Sass considers an `@import` command just a plain CSS import:
* If the files extension is `.css`.
* If the filename begins with `http://` (or any other protocol).
* If the filename is a `url()`.
* If the `@import` has any media queries.
The following patterns are considered warnings:
```scss
@import "foo.scss";
```
```scss
@import "path/fff.less";
```
```scss
@import "path\\fff.supa";
```
```scss
@import "df/fff", '1.scss';
```
The following patterns are *not* considered warnings:
```scss
@import "path/fff";
```
```scss
@import url("path/_file.css"); /* has url(), so doesn't count as a partial @import */
```
```scss
@import "file.css"; /* Has ".css" extension, so doesn't count as a partial @import */
```
```scss
/* Both are URIs, so don't count as partial @imports */
@import "http://_file.scss";
@import "//_file.scss";
```
```scss
@import "file.scss" screen; /* Has a media query, so doesn't count as a partial @import */
```
## Optional Options
### `ignoreExtensions: [ string or regexp ]`
An array of extensions to ignore, elements *don't need the dot at the start*. If an element is a string, only extensions that match that string are ignored. If an element is a regular expression, then extensions are tested against it and ignored if the test is successful.
For example, with `ignoreExtensions: [ "scss", /^my/ ] ]`, the following are no longer warnings:
```scss
@import "path/fff.scss";
```
```scss
@import "path/fff.my01";
```

View File

@@ -0,0 +1,59 @@
# at-import-no-partial-leading-underscore
Disallow leading underscore in partial names in `@import`.
```scss
@import "path/to/_file"
/** ↑
* Disallow this */
```
The rule ignores [cases](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import) when Sass considers an `@import` command just a plain CSS import:
* If the files extension is `.css`.
* If the filename begins with `http://` (or any other protocol).
* If the filename is a `url()`.
* If the `@import` has any media queries.
The following patterns are considered warnings:
```scss
@import "_foo";
```
```scss
@import "path/_fff";
```
```scss
@import "path\\_fff"; /* Windows delimiters */
```
```scss
@import "df/fff", '_1.scss';
```
The following patterns are *not* considered warnings:
```scss
@import "_path/fff"; /* underscore in a directory name, not in a partial name */
```
```scss
@import url("path/_file.css"); /* has url(), so doesn't count as a partial @import */
```
```scss
@import "_file.css"; /* Has ".css" extension, so doesn't count as a partial @import */
```
```scss
/* Both are URIs, so don't count as partial @imports */
@import "http://_file.scss";
@import "//_file.scss";
```
```scss
@import "_file.scss" screen; /* Has a media query, so doesn't count as a partial @import */
```

View File

@@ -0,0 +1,70 @@
# at-import-partial-extension-blacklist
Specify blacklist of disallowed file extensions for partial names in `@import` commands.
```scss
@import "file.scss"
/** ↑
* Blacklist of these */
```
The rule ignores [cases](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import) when Sass considers an `@import` command just a plain CSS import:
* If the files extension is `.css`.
* If the filename begins with `http://` (or any other protocol).
* If the filename is a `url()`.
* If the `@import` has any media queries.
## Options
`array`: `["array", "of", "extensions"]`
Each value is either a string or a regexp.
Given:
```js
["scss", /less/]
```
The following patterns are considered warnings:
```scss
@import "foo.scss";
```
```scss
@import "path/fff.less";
```
```scss
@import "path\\fff.ruthless";
```
```scss
@import "df/fff", '1.SCSS';
```
The following patterns are *not* considered warnings:
```scss
@import "path/fff";
```
```scss
@import url("path/_file.css"); /* has url(), so doesn't count as a partial @import */
```
```scss
@import "file.css"; /* Has ".css" extension, so doesn't count as a partial @import */
```
```scss
/* Both are URIs, so don't count as partial @imports */
@import "http://_file.scss";
@import "//_file.scss";
```
```scss
@import "file.scss" screen; /* Has a media query, so doesn't count as a partial @import */
```

View File

@@ -0,0 +1,78 @@
# at-import-partial-extension-whitelist
Specify whitelist of allowed file extensions for partial names in `@import` commands.
```scss
@import "file.scss"
/** ↑
* Whitelist of these */
```
The rule ignores [cases](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import) when Sass considers an `@import` command just a plain CSS import:
* If the files extension is `.css`.
* If the filename begins with `http://` (or any other protocol).
* If the filename is a `url()`.
* If the `@import` has any media queries.
## Options
`array`: `["array", "of", "extensions"]`
Each value is either a string or a regexp.
Given:
```js
["scss", /less/]
```
The following patterns are considered warnings:
```scss
@import "file.sass";
```
```scss
@import "file1", "file.stylus";
```
The following patterns are *not* considered warnings:
```scss
@import "path/fff";
```
```scss
@import "foo.scss";
```
```scss
@import "path/fff.less";
```
```scss
@import "path\\fff.ruthless";
```
```scss
@import "df/fff", '1.SCSS';
```
```scss
@import url("path/_file.css"); /* has url(), so doesn't count as a partial @import */
```
```scss
@import "file.css"; /* Has ".css" extension, so doesn't count as a partial @import */
```
```scss
/* Both are URIs, so don't count as partial @imports */
@import "http://_file.scss";
@import "//_file.scss";
```
```scss
@import "file.scss" screen; /* Has a media query, so doesn't count as a partial @import */
```

View File

@@ -0,0 +1,45 @@
# at-mixin-argumentless-call-parentheses
Require or disallow parentheses in argumentless `@mixin` calls.
```scss
@include mixin-name() {
/** ↑
* Such mixin calls */
```
## Options
`string`: `"always"|"never"`
### `"always"`
There *must always* be parentheses in mixin calls, even if no arguments are passed.
The following patterns are considered warnings:
```scss
@include mixin-name;
```
The following patterns are *not* considered warnings:
```scss
@include mixin-name();
```
### `"never"`
There *must never* be parentheses when calling a mixin without arguments.
The following patterns are considered warnings:
```scss
@include mixin-name();
```
The following patterns are *not* considered warnings:
```scss
@include mixin-name;
```

View File

@@ -0,0 +1,23 @@
# at-mixin-no-argumentless-call-parentheses
**Deprecated. Use [`at-mixin-argumentless-call-parentheses`](../at-mixin-argumentless-call-parentheses/README.md) instead.**
Disallow parentheses in argumentless `@mixin` calls.
```scss
@include mixin-name() {
/** ↑
* Such mixin calls */
```
The following patterns are considered warnings:
```scss
@include mixin-name() {
```
The following patterns are *not* considered warnings:
```scss
@include mixin-name {
```

View File

@@ -0,0 +1,29 @@
# at-mixin-pattern
Specify a pattern for Sass/SCSS-like mixin names.
```scss
@mixin complex-object ($items: 10) {
/** ↑
* The pattern of this */
```
## Options
`regex` or `string`
A string will be translated into a RegExp like so `new RegExp(yourString)` so be sure to escape properly.
### E.g. `/foo-.+/`
The following patterns are considered warnings:
```scss
@mixin boo-bar {
```
The following patterns are *not* considered warnings:
```scss
@mixin foo-bar {
```

View File

@@ -0,0 +1,68 @@
# declaration-nested-properties-no-divided-groups
Disallow nested properties of the same "namespace" be divided into multiple groups.
```scss
/* Such groups: */
font: { /* `font` is a "namespace" */
size: 16px;
weight: 700;
}
```
A "namespace" is everything before the first `-` in property names, e.g. `margin` in `margin-bottom`. It is the "namespace" that is used as a root identifier for a nested properties group (`font` in the example above).
[Sass official docs on nested properties](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_properties).
The following patterns are considered warnings:
```scss
a {
background: url(img.png) center {
size: auto;
}
background: {
repeat: no-repeat;
}
}
```
The following patterns are *not* considered warnings:
```scss
a {
background: url(img.png) center {
size: auto;
}
background-repeat: no-repeat;
}
```
```scss
a {
background: url(img.png) center no-repeat {
color: red;
}
margin: 10px {
left: 1px;
}
}
```
```scss
a {
background: url(img.png) center {
size: auto;
}
background :red {
repeat: no-repeat;
}
}
/* There is no space after the colon in `background :red` so it is considered A SELECTOR and is compiled into:
a background :red {
color: blue;
}
*/
```

View File

@@ -0,0 +1,153 @@
# declaration-nested-properties
Require or disallow properties with `-` in their names to be in a form of a nested group.
```scss
/* This is properties nesting: */
font: {
size: 16px;
weight: 700;
}
```
[Sass official docs on nested properties](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#nested_properties).
## Options
`string`: `"always"|"never"`
### `"always"`
*Every property* with a `-` in its name *must be* inside a nested property group.
Property names with browser prefixes are ignored with `always`.
The following patterns are considered warnings:
```scss
a {
margin-left: 10px;
}
```
```scss
a {
font: {
size: 10px;
}
font-weight: 400; // This one should be nested either
}
```
The following patterns are *not* considered warnings:
```scss
a {
margin: {
left: 10px;
}
}
```
```scss
a {
font: 10px/1.1 Arial {
weight: bold;
}
}
```
```scss
a {
-webkit-box-sizing: border-box;
-webkit-box-shadow: 1px 0 0 red;
}
```
### `"never"`
Nested properties are not allowed.
The following patterns are considered warnings:
```scss
a {
margin: {
left: 10px;
}
}
```
```scss
a {
background: red {
repeat: no-repeat;
}
}
```
The following patterns are *not* considered warnings:
```scss
a {
background-color: red;
background-repeat: no-repeat;
}
```
```scss
a {
background:red {
color: blue;
}
}
/* There is no space after the colon in `background:red` so it is considered A SELECTOR and is compiled into:
a background:red {
color: blue;
}
*/
```
## Optional options
### `except: ["only-of-namespace"]`
*Works only* with `"always"` and reverses its effect for a property if it is the only one with the corresponding "namespace" (e.g. `margin` in `margin-top`) in a ruleset.
The following patterns are considered warnings:
```scss
a {
font-family: Arial, sans-serif;
font-size: 10px;
}
```
```scss
a {
font: {
size: 10px; // Only one rule nested (reverse "always")
}
}
```
```scss
a {
font: {
size: 10px; // Prop 1, ...
}
font-weight: 400; // ... prop 2, so must be nested as well
}
```
The following patterns are *not* considered warnings:
```scss
a {
position: absolute;
background-color: red; // no other `background-` properties in a ruleset
}
```

View File

@@ -0,0 +1,77 @@
# dollar-variable-colon-newline-after
Require a newline after the colon in `$`-variable declarations.
```scss
$box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
/* ↑ */
/** ↑
* The newline after this colon */
```
## Options
`string`: `"always"|"always-multi-line"`
### `"always"`
There *must always* be a newline after the colon.
The following patterns are considered warnings:
```scss
$var:100px;
```
```scss
a { $var:100px; }
```
```scss
$var: 100px;
```
The following patterns are *not* considered warnings:
```scss
$var:
100px;
```
```scss
a {
$var:
100px;
}
```
### `"always-multi-line"`
There *must always* be a newline after the colon *if the variable value is multi-line*.
The following patterns are considered warnings:
```scss
$box-shadow: 0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
```
The following patterns are *not* considered warnings:
```scss
$box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
```
```scss
$box-shadow:
0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
// The VALUE is single-line, so a newline after the colon is ignored by this rule.
```
```scss
$var: 100px;
```

View File

@@ -0,0 +1,103 @@
# dollar-variable-colon-space-after
Require a single space or disallow whitespace after the colon in `$`-variable declarations.
```scss
$variable: 10px;
/** ↑
* The space after this colon */
```
## Options
`string`: `"always"|"never"|"always-single-line"`
### `"always"`
There *must always* be a single space after the colon.
The following patterns are considered warnings:
```scss
a { $var :10px }
```
```scss
$var:10px;
```
```scss
$var:
10px;
// a newline is not a space
```
The following patterns are *not* considered warnings:
```scss
a { $var : 10px }
```
```scss
$var: 10px;
```
### `"never"`
There *must never* be whitespace after the colon.
The following patterns are considered warnings:
```scss
$var: 10px;
```
```scss
$var:
10px;
```
```scss
a { $var :10px }
```
The following patterns are *not* considered warnings:
```scss
$var :10px;
```
```scss
a { $var:10px }
```
### `"always-single-line"`
There *must always* be a single space after the colon *if the variable value is single-line*.
The following patterns are considered warnings:
```scss
$box-shadow:0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
```
The following patterns are *not* considered warnings:
```scss
a {
$box-shadow: 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba(30, 140, 190, 0.8);
}
```
```scss
$box-shadow:
0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
```
```scss
a {
$box-shadow:0 0 0 1px #5b9dd9,
0 0 2px 1px rgba(30, 140, 190, 0.8);
}
```

View File

@@ -0,0 +1,71 @@
# dollar-variable-colon-space-before
Require a single space or disallow whitespace before the colon in `$`-variable declarations.
```scss
$variable: 10px;
/** ↑
* The space before this colon */
```
## Options
`string`: `"always"|"never"
### `"always"`
There *must always* be a single space before the colon.
The following patterns are considered warnings:
```scss
a { $var: 10px }
```
```scss
$var:10px;
```
```scss
$var :10px;
```
```scss
$var
:10px;
```
The following patterns are *not* considered warnings:
```scss
a { $var : 10px }
```
```scss
$var :10px;
```
### `"never"`
There *must never* be whitespace before the colon.
The following patterns are considered warnings:
```scss
$var :10px;
```
```scss
a { $var
:10px }
```
The following patterns are *not* considered warnings:
```scss
$var:10px;
```
```scss
a { $var: 10px }
```

View File

@@ -0,0 +1,199 @@
# dollar-variable-empty-line-before
Require an empty line or disallow empty lines before `$`-variable declarations.
If the `$`-variable declaration is the first declaration in a file, it's ignored.
```scss
/* ← */
$width: 10px;
/**
* This empty line */
```
## Options
`string`: `"always"|"never"`
### `"always"`
There *must always* be one empty line before a `$`-variable declaration.
The following patterns are considered warnings:
```scss
@import '1.css';
$var2: 200px;
```
```scss
a {
$var: 1;
}
```
The following patterns are *not* considered warnings:
```scss
$var: 100px; // The first declaration in a stylesheet
```
```scss
a { color: red; }
$var: 1;
```
### `"never"`
There *must never* be an empty line before a `$`-variable declaration.
The following patterns are considered warnings:
```scss
a { color: red; }
$var: 1;
```
The following patterns are *not* considered warnings:
```scss
$var: 100px;
$var2: 200px;
```
```scss
a {
width: auto;
}
$var: 1;
```
## Optional secondary options
### `except: ["first-nested", "after-comment", "after-dollar-variable"]`
### `"first-nested"`
Reverse the primary option for a `$`-variable declaration if it's the first child of its parent.
For example, with `"always"`:
The following patterns are considered warnings:
```scss
a {
$var: 1;
color: red;
}
b {
color: red;
$var: 1;
}
```
The following patterns are *not* considered warnings:
```scss
a {
$var: 1;
color: red;
}
b {
color: red;
$var: 1;
}
```
### `"after-comment"`
Reverse the primary option for `$`-variable declarations that go after comments.
For example, with `"always"`:
The following patterns are considered warnings:
```scss
a {
// comment
$var: 1;
}
b {
/* comment */
$var: 1;
}
```
The following patterns are *not* considered warnings:
```scss
a {
// comment
$var: 1;
}
```
### `"after-dollar-variable"`
Reverse the primary option for `$`-variable declarations that go right after another `$`-variable declaration.
For example, with `"always"`:
The following patterns are considered warnings:
```scss
a {
$var: 1; // this one is ok
$var1: 2; // and this one shouldn't have a preceding empty line
}
```
The following patterns are *not* considered warnings:
```scss
a {
$var: 1;
$var1: 2;
}
```
### `ignore: ["after-comment", "inside-single-line-block"]`
### `"after-comment"`
Ignore `$`-variables that go after a comment.
For example, with `"always"`:
The following patterns are *not* considered warnings:
```scss
// comment
$var: 1
/* comment */
$var2: 1;
```
### `"inside-single-line-block"`
Ignore `$`-variables that are inside single-line blocks.
For example, with `"always"`:
The following patterns are *not* considered warnings:
```scss
a { $var: 10; }
```

View File

@@ -0,0 +1,111 @@
# dollar-variable-no-missing-interpolation
Disallow Sass variables that are used without interpolation with CSS features that use custom identifiers.
```scss
.class {
$var: "my-anim";
animation-name: $var;
// ↑
// This variable needs to be interpolated
// because its value is a string
}
```
Sass variables that contain a custom identifier as a string always require interpolation when used. Some CSS [at-rules](https://css-tricks.com/the-at-rules-of-css/) require variable interpolation even when the custom identifier value is not a string.
For example, your CSS animation could look like this:
```scss
animation: myAnim 5s;
```
When you store your custom identifier as string in a Sass variable...
```scss
$myVar: "myAnim";
```
...then you need to make sure that the variable is interpolated when it gets used:
```scss
animation: #{$myVar} 5s;
```
If you do not interpolate the variable, Sass will compile your animation name to a string, producing invalid CSS:
```scss
animation: "myAnim" 5s;
```
This rule can only check for variables that are defined inside the same file where they are used.
The following patterns are considered warnings:
```scss
$var: my-anim;
@keyframes $var {}
```
```scss
$var: "circled-digits";
@counter-style $var {
system: fixed;
symbols: ;
suffix: ' ';
speak-as: numbers;
}
```
```scss
$var: "my-counter";
body {
counter-reset: $var;
}
```
```scss
$var: "my-anim";
@supports (animation-name: $var) {
@keyframes {}
}
```
The following patterns are *not* considered warnings:
```scss
$var: my-anim;
@keyframes #{$var} {}
```
```scss
$var: circled-digits;
@counter-style #{$var} {
system: fixed;
symbols: ;
suffix: ' ';
speak-as: numbers;
}
```
```scss
$var: my-counter;
body {
counter-reset: $var;
}
```
```scss
$var: my-anim;
@supports (animation-name: $var) {
@keyframes {}
}
```

View File

@@ -0,0 +1,69 @@
# dollar-variable-pattern
Specify a pattern for Sass-like variables.
```scss
a { $foo: 1px; }
/** ↑
* The pattern of this */
```
## Options
`regex` or `string`
A string will be translated into a RegExp like so `new RegExp(yourString)` so be sure to escape properly.
### E.g. `/foo-.+/`
The following patterns are considered warnings:
```scss
a { $boo-bar: 0; }
```
The following patterns are *not* considered warnings:
```scss
a { $foo-bar: 0; }
```
## Optional Options
### `ignore: "local"|"global"`
#### `"local"`
Makes this rule ignore local variables (variables defined inside a rule/mixin/function, etc.).
For example, with `/^foo-/`:
The following patterns are *not* considered warnings:
```scss
$foo-name00: 10px;
```
```scss
a {
$bar-name01: 10px;
}
```
#### `"global"`
Makes this rule ignore global variables (variables defined in the stylesheet root).
For example, with `/^foo-/`:
The following patterns are *not* considered warnings:
```scss
$bar-name01: 10px;
```
```scss
a {
$foo-name02: 10px;
}
```

View File

@@ -0,0 +1,149 @@
# double-slash-comment-empty-line-before
Require or disallow an empty line before `//`-comments.
```scss
a {}
/* ← */
// comment /* ↑ */
/** ↑
* This line */
```
This rule only works with SCSS-like [single-line comments](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#comments) and ignores:
* comments that are the very first nodes in a file;
* CSS comments (`/* */`);
* comments that are on the same line as some non-comment code (inline comments).
## Options
`string`: `"always"|"never"`
### `"always"`
There *must always* be an empty line before `//`-comments.
The following patterns are considered warnings:
```scss
a {}
// comment
```
The following patterns are *not* considered warnings:
```scss
a {}
// comment
```
```scss
a {} // comment
```
### `"never"`
There *must never* be an empty line before `//`-comments.
The following patterns are considered warnings:
```scss
a {}
// comment
```
The following patterns are *not* considered warnings:
```scss
a {}
// comment
```
```scss
a {} // comment
```
## Optional options
### `except: ["first-nested"]`
Reverse the primary option for `//`-comments that are nested and the first child of their parent node.
For example, with `"always"`:
The following patterns are considered warnings:
```scss
a {
// comment
color: pink;
}
```
The following patterns are *not* considered warnings:
```scss
a {
// comment
color: pink;
}
```
### `ignore: ["between-comments", "stylelint-commands"]`
#### `"between-comments"`
Don't require an empty line before `//`-comments that are placed after other `//`-comments or CSS comments.
For example, with `"always"`:
The following patterns are *not* considered warnings:
```scss
a {
background: pink;
// comment
// comment
color: #eee;
}
```
```scss
a {
background: pink;
/* comment */
// comment
color: #eee;
}
```
#### `"stylelint-commands"`
Ignore `//`-comments that deliver commands to stylelint, e.g. `// stylelint-disable color-no-hex`.
For example, with `"always"`:
The following patterns are considered warnings:
```scss
a {
background: pink;
// not a stylelint command
color: #eee;
}
```
The following patterns are *not* considered warnings:
```scss
a {
background: pink;
// stylelint-disable color-no-hex
color: pink;
}
```

View File

@@ -0,0 +1,110 @@
# double-slash-comment-inline
Require or disallow `//`-comments to be inline comments.
```scss
a {
width: 10px; // inline-comment
/* ↑
* Such comments */
```
An inline comment in terms of this rule is a comment that is placed on the same line with any other code, either before or after it.
This rule only works with SCSS-like [single-line comments](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#comments) and ignores CSS comments (`/* */`).
## Options
`string`: `"always"|"never"`
### `"always"`
`//`-comments *must always* be inline comments.
The following patterns are considered warnings:
```scss
// comment
a { width: 10px; }
```
```scss
a {
// comment
width: 10px;
}
```
The following patterns are *not* considered warnings:
```scss
a { // comment
width: 10px;
}
```
```scss
a {
width: 10px; // comment
}
```
```scss
a, // comment
b {
width: 10px;
}
```
### `"never"`
`//`-comments *must never* be inline comments.
The following patterns are considered warnings:
```scss
a {
width: 10px; // comment
}
```
```scss
a, // comment
b {
width: 10px;
}
```
The following patterns are *not* considered warnings:
```scss
// comment
a { width: 10px; }
```
```scss
a {
// comment
width: 10px;
}
```
## Optional options
### `ignore: ["stylelint-commands"]`
#### `"stylelint-commands"`
Ignore `//`-comments that deliver commands to stylelint, e.g. `// stylelint-disable color-no-hex`.
For example, with `"always"`:
The following patterns are *not* considered warnings:
```scss
a {
background: pink;
// stylelint-disable color-no-hex
color: pink;
}
```

View File

@@ -0,0 +1,60 @@
# double-slash-comment-whitespace-inside
Require or disallow whitespace after the `//` in `//`-comments
```scss
a {
width: 10px; // inline-comment
/* ↑
* Such whitespace */
```
This rule only works with SCSS-like [single-line comments](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#comments) and ignores CSS comments (`/* */`).
Any number of slases are allowed at the beginning of the comment. So `/// comment` is treated the same way as `// comment`.
Note that a newline is not possible as a whitespace in terms of this rule as `//`-comments are intended to be single-line.
## Options
`string`: `"always"|"never"`
### `"always"`
There *must always* be whitespace after the `//` inside `//`-comments.
The following patterns are considered warnings:
```scss
//comment
```
The following patterns are *not* considered warnings:
```scss
// comment
```
```scss
/// comment
```
### `"never"`
There *must never* be whitespace after the `//` inside `//`-comments.
The following patterns are considered warnings:
```scss
// comment
```
The following patterns are *not* considered warnings:
```scss
//comment
```
```scss
///comment
```

View File

@@ -0,0 +1,86 @@
# media-feature-value-dollar-variable
Require a media feature value be a `$`-variable or disallow `$`-variables in media feature values.
```scss
@media (max-width: $var) { a { color: red; } }
// ↑
// Require or disallow this
}
```
## Options
`string`: `"always"|"never"`
### `"always"`
A media feature value *must consist* of just a single `$`-variable (possibly with inteprolation).
The following patterns are considered warnings:
```scss
@media (max-width: 300px) { b { color: red; } }
```
```scss
@media (max-width: $var + 10px) { b { color: red; } }
```
```scss
@media screen and (max-width: $var), or (min-width: 100px){ b { color: red; } }
```
```scss
@media screen and (max-width: #{$val} + 10px) { a { display: none; } }
```
```scss
@media screen and (max-width: #{$val + $x} ) { a { display: none; } }
```
```scss
@media screen and (min-width: funcName($p)){ b { color: red; } }
```
The following patterns are *not* considered warnings:
```scss
@media ( max-width: $var ) {b { color: red; }}
```
```scss
@media ( max-width: #{$var}) {b { color: red; }}
```
### `"never"`
There *must never* be a `$`-variable in a media feature value. Even as a parameter to a function call.
The following patterns are considered warnings:
```scss
@media screen and (min-width: $var){ b { color: red; } }
```
```scss
@media screen and (min-width: 100px + $var){ b { color: red; } }
```
```scss
@media screen and (min-width: funcName($var)){ b { color: red; } }
```
The following patterns are *not* considered warnings:
```scss
@media screen and (min-width: 100px){ b { color: red; } }
```
```scss
@media screen and (min-width: 100px + 10px){ b { color: red; } }
```
```scss
@media screen and (min-width: funcName(10px)){ b { color: red; } }
```

View File

@@ -0,0 +1,54 @@
# operator-no-newline-after
Disallow linebreaks after Sass operators.
```scss
a { width: 10px + $n; }
/** ↑
* Linebreaks after this */
```
This rule checks math operators (`+`, `-`, `/`, `*`, `%`) and comparison operators (`>`, `<`, `!=`, `==`, `>=`, `<=`).
Not all symbols that correspond to math operators are actually considered operators by Sass. Some of the exceptions are:
* `+` and `-` as signs before values;
* `+` and `-` as signs in [space-delimited lists](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#string_operations);
* `-` as part of [a string](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#string_operations) or [a Sass identifier](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#subtraction), e.g. a variable;
* `/` as a CSS delimiter in property values like `font: 10px/1.2 Arial;` ([read more](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#division-and-slash)).
For more details refer to [Sass official documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html). An online Sass compiler - [Sassmeister](http://www.sassmeister.com/) - could also come in handy.
The following patterns are considered warnings:
```scss
a { width: 10 +
1; }
```
```scss
a {
width: 10 +
1;
}
```
The following patterns are *not* considered warnings:
```scss
a {
width: str- // not a math operator, ignored
some;
}
```
```scss
a { width: 10px - 1; }
```
```scss
a {
width: 10px * 1.7 // the newline is not right after the operator
+ 1;
}
```

View File

@@ -0,0 +1,55 @@
# operator-no-newline-before
Disallow linebreaks before Sass operators.
```scss
a { width: 10px
+ $n; }
/** ↑
* Linebreaks before this */
```
This rule checks math operators (`+`, `-`, `/`, `*`, `%`) and comparison operators (`>`, `<`, `!=`, `==`, `>=`, `<=`).
Not all symbols that correspond to math operators are actually considered operators by Sass. Some of the exceptions are:
* `+` and `-` as signs before values;
* `+` and `-` as signs in [space-delimited lists](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#string_operations);
* `-` as part of [a string](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#string_operations) or [a Sass identifier](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#subtraction), e.g. a variable;
* `/` as a CSS delimiter in property values like `font: 10px/1.2 Arial;` ([read more](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#division-and-slash)).
For more details refer to [Sass official documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html). An online Sass compiler - [Sassmeister](http://www.sassmeister.com/) - could also come in handy.
The following patterns are considered warnings:
```scss
a { width: 10
+ 1; }
```
```scss
a {
width: 10
+ 1;
}
```
The following patterns are *not* considered warnings:
```scss
a {
width: 10px
-1; // not a math operator, ignored
}
```
```scss
a { width: 10px - 1; }
```
```scss
a {
width: 100px +
$var * 0.5625; // the newline is not right before the operator
}
```

View File

@@ -0,0 +1,100 @@
# operator-no-unspaced
Disallow unspaced operators in Sass operations.
```scss
a { width: 10px*$n; }
/** ↑
* The space around this operator */
```
This rule checks math operators (`+`, `-`, `/`, `*`, `%`) and comparison operators (`>`, `<`, `!=`, `==`, `>=`, `<=`).
Not all symbols that correspond to math operators are actually considered operators by Sass. Some of the exceptions are:
* `+` and `-` as signs before values;
* `+` and `-` as signs in [space-delimited lists](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#string_operations);
* `-` as part of [a string](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#string_operations) or [a Sass identifier](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#subtraction), e.g. a variable;
* `/` as a CSS delimiter in property values like `font: 10px/1.2 Arial;` ([read more](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#division-and-slash)).
For more details refer to [Sass official documentation](http://sass-lang.com/documentation/file.SASS_REFERENCE.html). An online Sass compiler - [Sassmeister](http://www.sassmeister.com/) - could also come in handy.
The following patterns are considered warnings:
```scss
a { width: 10+1; }
```
```scss
a { width: 10+ 1; }
```
```scss
a { width: 10-1; }
```
```scss
a { width: 10px* 1.5; }
```
```scss
@if ($var==10) { ... }
```
```scss
a { width: 10px * 1.5; } // More than one space
```
```scss
a { width: (10) /1; } // Has a value inside parens on one side, so is an operation
```
```scss
// Operations can be inside interpolation in selectors, property names, etc.
.class#{1 +1}name {
color: red;
}
p {
background-#{\"col\" +\"or\"}: red;
}
```
The following patterns are *not* considered warnings:
```scss
a { width: 10 * 1; }
```
```scss
a { width: 10 +1; } // A space-delimited Sass list
```
```scss
// A space-delimited Sass list, in "10px-" "10" is a number, "px-" is a unit
a { width: 10px- 1; }
```
```scss
a { width: 10px/1; } // Compiled as CSS, as in "font: 10px/1 ..."
```
```scss
a { width: (10) /#{1}; } // Has interpolation on one of the sides, so not an operation
```
```scss
a { width: $var-1; } // "$var-1" is a variable name
```
```scss
a { width: "10*1"; } // Inside a string, ignored
```
```scss
// Linebreak will do as a whitespace; indentation before "-" and trailing spaces after "1" are left to the corresponding stylelint rules
a {
width: 1
- a;
}
```

View File

@@ -0,0 +1,69 @@
# partial-no-import
Disallow non-CSS `@import`s in partial files.
```scss
// path/to/_file.scss:
/* ↑ in partial files */
@import "path/to/file.scss"
/*↑ Disallow imports */
```
The rule skips CSS files (doesn't report any `@import`s in them).
The rule also ignores [cases](http://sass-lang.com/documentation/file.SASS_REFERENCE.html#import) when Sass considers an `@import` command just a plain CSS import:
* If the files extension is `.css`.
* If the filename begins with `http://` (or any other protocol).
* If the filename is a `url()`.
* If the `@import` has any media queries.
The following patterns are considered warnings:
```scss
// path/to/_file.scss:
@import "foo.scss";
```
```scss
// path/to/_file.less:
@import "path/fff.less";
```
```scss
// path/to/_file.scss:
@import "path\\fff.supa";
```
The following patterns are *not* considered warnings:
```scss
// path/to/file.scss:
@import "path/fff";
/* @import in a file that is not a partial */
```
```scss
// path/to/_file.scss:
@import url("path/_file.css"); /* has url(), so doesn't count as a partial @import */
```
```scss
// path/to/_file.scss:
@import "file.css"; /* Has ".css" extension, so doesn't count as a partial @import */
```
```scss
// path/to/_file.scss:
@import "http://_file.scss";
@import "//_file.scss";
/* Both are URIs, so don't count as partial @imports */
```
```scss
// path/to/_file.scss:
@import "file.scss" screen; /* Has a media query, so doesn't count as a partial @import */
```

View File

@@ -0,0 +1,57 @@
# percent-placeholder-pattern
Specify a pattern for `%`-placeholders.
```scss
%foobar { display: flex; }
/** ↑
* The pattern of this */
```
## Options
`regex` or `string`
A string will be translated into a RegExp like so `new RegExp(yourString)` so be sure to escape properly.
Nested selectors will be resolved before checking.
The selector value *after `%`* will be checked. No need to include `%` in your pattern.
### E.g. `/^foo-[a-z]+$/`
The following patterns are considered warnings:
```scss
%myriad { display: flex; }
```
```scss
%foo-bar {
&-supa { display: flex; } /* %foo-bar matches, but %foo-bar-supa doesn't */
}
```
```scss
%foo- { /* %foo- on the 1st leves doesn't match */
&bar { display: flex; }
}
```
The following patterns are *not* considered warnings:
```scss
%foo-aimp { display: flex; }
```
```scss
%foo-bar {
&lignt { display: flex; }
}
```
```scss
.p {
@extend %mathy; // The rule only checks placeholder definitions
}
```

View File

@@ -0,0 +1,61 @@
# selector-no-redundant-nesting-selector
Disallow redundant nesting selectors (`&`).
```scss
p {
& a {}
//↑
// This type of selector
}
```
The following patterns are considered warnings:
```scss
p {
& a {}
}
```
```scss
p {
& > a {}
}
```
```scss
p {
& .class {}
}
```
```scss
p {
& + .foo {}
}
```
The following patterns are *not* considered warnings:
```scss
p {
&.foo {}
}
```
```scss
p {
.foo > & {}
}
```
```scss
p {
&,
.foo,
.bar {
margin: 0;
}
}
```