bun i -D @archoleat/stylelint-config-extended-scss stylelint-define-config
Add the following code to the stylelint.config.ts
or stylelint.config.js
file:
import { defineConfig } from 'stylelint-define-config';
export default defineConfig({
extends: '@archoleat/stylelint-config-extended-scss',
});
-
Extends the
stylelint-config-standard-scss
shared config and configures it's rules for SCSS. -
stylelint-prettier/recommended
: Runs Prettier to format SCSS code.
-
stylelint-declaration-block-no-ignored-properties
: Disallow property values that are ignored due to another property value in the same rule. -
stylelint-gamut
: Throw warning if color goes out of sRGB color space and is not wrapped in@media (color-gamut: p3) {}
or@media (color-gamut: rec2020) {}
-
stylelint-group-selectors
: Identify the selectors, which can be grouped, as they have same set of properties and values. -
stylelint-high-performance-animation
: Enhances your animations. -
stylelint-order
: Sorts over 400 properties for enhanced clarity and maintainability.Properties are logically grouped and separated by a space. A space between groups will only appear if the group has 3 or more properties.
-
stylelint-plugin-defensive-css
: Enforcing defensive CSS best practices. -
stylelint-plugin-logical-css
: Replace properties with logical alternatives. -
stylelint-rem-over-px
: Enforce the usage of rem units over px units.Declaring the rule with default values is equivalent to:
"rem-over-px/rem-over-px": [ true, { "ignore": "1px", "ignoreFunctions": ["url"], "ignoreAtRules": ["media"], "fontSize": 16 } ],
This is a list of the lints turned on in this configuration.
-
at-rule-disallowed-list
: Rule enabled.- Disallow the use of
@debug
.
- Disallow the use of
-
at-rule-empty-line-before
: Rule enabled.
-
value-keyword-case
: Rule enabled.Ignore:
text-rendering
.
color-named
: Rule disabled.
-
declaration-no-important
: Rule enabled. -
declaration-empty-line-before
: Rule enabled.
no-descending-specificity
: Rule disabled.
function-url-no-scheme-relative
: Rule enabled.
-
Ignore:
blockless-at-rules
.
-
font-weight-notation
: Numeric. -
keyframe-selector-notation
: Percentage.
selector-class-pattern
: BEM naming convention.
selector-no-qualifying-type
: Rule enabled.
-
media-feature-name-value-no-unknown
: Rule enabled. -
no-unknown-animations
: Rule enabled.
-
scss/at-each-key-value-single-line
: Rule enabled. -
scss/at-root-no-redundant
: Rule enabled. -
scss/at-use-no-redundant-alias
: Rule enabled.
-
scss/comment-no-loud
: Rule enabled. -
scss/double-slash-comment-inline
: Rule disabled.
-
scss/declaration-nested-properties
: Rule disabled. -
scss/dimension-no-non-numeric-values
: Rule enabled.
-
scss/dollar-variable-empty-line-after
: Rule enabled.Expect:
last-nested
,before-comment
,before-dollar-variable
.Ignore:
before-comment
,inside-single-line-block
. -
scss/dollar-variable-colon-newline-after
: Rule enabled. -
scss/dollar-variable-no-namespaced-assignment
: Rule enabled. -
scss/no-duplicate-dollar-variables
: Rule enabled. -
scss/no-global-function-names
: Rule disabled.
-
scss/function-color-relative
: Rule enabled.darken()
desaturate()
fade-in()
fade-out()
lighten()
opacify()
saturate()
transparentize()
scss/partial-no-import
: Rule enabled.
scss/map-keys-quotes
: Rule enabled.
scss/media-feature-value-dollar-variable
: Rule enabled.
scss/selector-no-redundant-nesting-selector
: Rule enabled.
scss/property-no-unknown
: Rule enabled.
Please read CONTRIBUTING to start contributing.
This project is licensed under the MIT license.