Showing 200 of 288 total issues
Pseudo-elements must start with double colons Open
&:before {
- Read upRead up
- Exclude checks
Pseudo-element
Rule pseudo-element
will enforce that:
- Pseudo-elements must start with double colons.
- Pseudo-classes must start with single colon.
Examples
When enabled, the following are allowed:
.foo::before {
content: "bar";
}
.foo:hover {
content: "bar";
}
When enabled, the following are disallowed:
.foo:before {
content: "bar";
}
.foo::hover {
content: "bar";
}
Pseudo-elements must start with double colons Open
&:after {
- Read upRead up
- Exclude checks
Pseudo-element
Rule pseudo-element
will enforce that:
- Pseudo-elements must start with double colons.
- Pseudo-classes must start with single colon.
Examples
When enabled, the following are allowed:
.foo::before {
content: "bar";
}
.foo:hover {
content: "bar";
}
When enabled, the following are disallowed:
.foo:before {
content: "bar";
}
.foo::hover {
content: "bar";
}
Space expected between blocks Open
&:after {
- Read upRead up
- Exclude checks
Empty Line Between Blocks
Rule empty-line-between-blocks
will enforce whether or not nested blocks should include a space between the last non-comment declaration or not.
Options
-
include
:true
/false
(defaults totrue
) -
allow-single-line-rulesets
:true
/false
(defaults totrue
)
Examples
include
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
content: 'foo';
.bar {
content: 'bar';
// Waldo
&--baz {
content: 'baz';
}
}
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
content: 'foo';
.bar {
content: 'bar';
// Waldo
&--baz {
content: 'baz';
}
}
}
allow-single-line-rulesets
When allow-single-line-rulesets: true
, the following are allowed. When allow-single-line-rulesets: false
, the following are disallowed:
.foo { content: 'foo'; }
.bar { content: 'bar'; }
.baz { content: 'baz'; }
Expected indentation of 0 space but found 2. Open
// button colors here
- Read upRead up
- Exclude checks
Indentation
Rule indentation
will enforce an indentation size (tabs and spaces) and it will also ensure that tabs and spaces are not mixed.
The mixed spaces and tabs warnings check will take into account what you have set in your config file whether it should expect to see spaces or tabs. If it encounters a tab anywhere in a file when your rule config doesn't specify tabs it will flag a lint warning, Similarly for any whitespace using spaces when tabs are specified. Obviously spaces between properties and values etc are ignored.
Options
-
size
:number
or'tab'
(defaults to2
spaces)
Examples
When enabled (assuming size: 2
) the following are allowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
When enabled (assuming size: 2
) the following are disallowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
Expected indentation of 0 space but found 2. Open
/* don't forget to include decanter icon color overrides too;
- Read upRead up
- Exclude checks
Indentation
Rule indentation
will enforce an indentation size (tabs and spaces) and it will also ensure that tabs and spaces are not mixed.
The mixed spaces and tabs warnings check will take into account what you have set in your config file whether it should expect to see spaces or tabs. If it encounters a tab anywhere in a file when your rule config doesn't specify tabs it will flag a lint warning, Similarly for any whitespace using spaces when tabs are specified. Obviously spaces between properties and values etc are ignored.
Options
-
size
:number
or'tab'
(defaults to2
spaces)
Examples
When enabled (assuming size: 2
) the following are allowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
When enabled (assuming size: 2
) the following are disallowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
Pseudo-elements must start with double colons Open
&:before {
- Read upRead up
- Exclude checks
Pseudo-element
Rule pseudo-element
will enforce that:
- Pseudo-elements must start with double colons.
- Pseudo-classes must start with single colon.
Examples
When enabled, the following are allowed:
.foo::before {
content: "bar";
}
.foo:hover {
content: "bar";
}
When enabled, the following are disallowed:
.foo:before {
content: "bar";
}
.foo::hover {
content: "bar";
}
Pseudo-elements must start with double colons Open
&:after {
- Read upRead up
- Exclude checks
Pseudo-element
Rule pseudo-element
will enforce that:
- Pseudo-elements must start with double colons.
- Pseudo-classes must start with single colon.
Examples
When enabled, the following are allowed:
.foo::before {
content: "bar";
}
.foo:hover {
content: "bar";
}
When enabled, the following are disallowed:
.foo:before {
content: "bar";
}
.foo::hover {
content: "bar";
}
Attribute values should be surrounded by quotes Open
&[aria-expanded=true] {
- Read upRead up
- Exclude checks
Attribute Quotes
Rule attribute-quotes
will enforce the use of quotes in attribute values.
Options
-
include
:true
/false
(defaults totrue
)
Examples
include
When include: true
, the following are allowed. When include: false
, the following are disallowed:
span[lang="pt"] {
color: green;
}
span[lang~="en-us"] {
color: blue;
}
span[class^="main"] {
background-color: yellow;
}
a[href*="example"] {
background-color: #CCCCCC;
}
input[type="email" i] {
border-color: blue;
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
span[lang=pt] {
color: green;
}
span[lang~=en-us] {
color: blue;
}
span[class^=main] {
background-color: yellow;
}
a[href*=example] {
background-color: #CCCCCC;
}
input[type=email i] {
border-color: blue;
}
Pseudo-elements must start with double colons Open
&:before {
- Read upRead up
- Exclude checks
Pseudo-element
Rule pseudo-element
will enforce that:
- Pseudo-elements must start with double colons.
- Pseudo-classes must start with single colon.
Examples
When enabled, the following are allowed:
.foo::before {
content: "bar";
}
.foo:hover {
content: "bar";
}
When enabled, the following are disallowed:
.foo:before {
content: "bar";
}
.foo::hover {
content: "bar";
}
Pseudo-elements must start with double colons Open
&:before {
- Read upRead up
- Exclude checks
Pseudo-element
Rule pseudo-element
will enforce that:
- Pseudo-elements must start with double colons.
- Pseudo-classes must start with single colon.
Examples
When enabled, the following are allowed:
.foo::before {
content: "bar";
}
.foo:hover {
content: "bar";
}
When enabled, the following are disallowed:
.foo:before {
content: "bar";
}
.foo::hover {
content: "bar";
}
Type-selector should be nested within its parent Class Open
.ds-entity--stanford-person .stanford-person a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Pseudo-elements must start with double colons Open
&:after {
- Read upRead up
- Exclude checks
Pseudo-element
Rule pseudo-element
will enforce that:
- Pseudo-elements must start with double colons.
- Pseudo-classes must start with single colon.
Examples
When enabled, the following are allowed:
.foo::before {
content: "bar";
}
.foo:hover {
content: "bar";
}
When enabled, the following are disallowed:
.foo:before {
content: "bar";
}
.foo::hover {
content: "bar";
}
Pseudo-elements must start with double colons Open
&:before {
- Read upRead up
- Exclude checks
Pseudo-element
Rule pseudo-element
will enforce that:
- Pseudo-elements must start with double colons.
- Pseudo-classes must start with single colon.
Examples
When enabled, the following are allowed:
.foo::before {
content: "bar";
}
.foo:hover {
content: "bar";
}
When enabled, the following are disallowed:
.foo:before {
content: "bar";
}
.foo::hover {
content: "bar";
}
Class should be nested within its parent Class Open
.su-button--big.su-link,
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Pseudo-elements must start with double colons Open
&:after {
- Read upRead up
- Exclude checks
Pseudo-element
Rule pseudo-element
will enforce that:
- Pseudo-elements must start with double colons.
- Pseudo-classes must start with single colon.
Examples
When enabled, the following are allowed:
.foo::before {
content: "bar";
}
.foo:hover {
content: "bar";
}
When enabled, the following are disallowed:
.foo:before {
content: "bar";
}
.foo::hover {
content: "bar";
}
Pseudo-elements must start with double colons Open
&:after {
- Read upRead up
- Exclude checks
Pseudo-element
Rule pseudo-element
will enforce that:
- Pseudo-elements must start with double colons.
- Pseudo-classes must start with single colon.
Examples
When enabled, the following are allowed:
.foo::before {
content: "bar";
}
.foo:hover {
content: "bar";
}
When enabled, the following are disallowed:
.foo:before {
content: "bar";
}
.foo::hover {
content: "bar";
}
Pseudo-elements must start with double colons Open
&:before {
- Read upRead up
- Exclude checks
Pseudo-element
Rule pseudo-element
will enforce that:
- Pseudo-elements must start with double colons.
- Pseudo-classes must start with single colon.
Examples
When enabled, the following are allowed:
.foo::before {
content: "bar";
}
.foo:hover {
content: "bar";
}
When enabled, the following are disallowed:
.foo:before {
content: "bar";
}
.foo::hover {
content: "bar";
}
Class should be nested within its parent Class Open
.su-button.su-link,
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
File extensions are not allowed Open
@import 'secondary-nav/index.scss';
- Read upRead up
- Exclude checks
Clean Import Paths
Rule clean-import-paths
will enforce whether or not @import
paths should have leading underscores and/or filename extensions.
Options
-
leading-underscore
:true
/false
(defaults tofalse
) -
filename-extension
:true
/false
(defaults tofalse
)
Examples
leading-underscore
When leading-underscore: false
, the following are allowed. When leading-underscore: true
, the following are disallowed:
@import 'foo';
@import 'bar/foo';
When leading-underscore: true
, the following are allowed. When leading-underscore: false
, the following are disallowed:
@import '_foo';
@import '_bar/foo';
filename-extension
When filename-extension: false
, the following are allowed. When filename-extension: true
, the following are disallowed:
@import 'foo';
@import 'bar/foo';
When filename-extension: true
, the following are allowed. When filename-extension: false
, the following are disallowed:
@import 'foo.scss';
@import 'bar/foo.scss';
Class should be nested within its parent Class Open
.su-lockup__cell1.empty-logo {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}