diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000..7ee2fc8 --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,4 @@ +> 1.5% +Firefox ESR +last 2 versions +not dead diff --git a/README.md b/README.md index 44c8313..37a6a71 100644 --- a/README.md +++ b/README.md @@ -16,41 +16,70 @@ ## Table of Contents - [This Config](#this-config) + - [Extends](#extends) + - [Plugins](#plugins) + - [Rules](#rules) + - [Installation](#installation) + - [Usage](#usage) + - [License](#license) ## This Config +### Extends + - Extends the [**`stylelint-config-standard-scss`** shared config](https://github.com/stylelint-scss/stylelint-config-standard-scss) and configures it's rules for **SCSS**. -- **BEM** naming convention likely enforced, encouraging modularity, - maintainability, and clarity in class naming. +### Plugins -- Experimental and non-standard pseudo classes, pseudo elements and properties - are used in the config. +- [**`stylelint-declaration-block-no-ignored-properties`**](https://github.com/kristerkari/stylelint-declaration-block-no-ignored-properties) + disallow property values that are ignored due to another + property value in the same rule. - > Don't worry, it doesn't have any side effects of any kind. + > Use **`.browserslistrc`**. + +- [**`stylelint-gamut`**](https://github.com/fpetrakov/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`**](https://github.com/ssivanatarajan/stylelint-group-selectors) + identify the selectors, which can be grouped, + as they have same set of properties and values. + +- [**`stylelint-high-performance-animation`**](https://github.com/kristerkari/stylelint-high-performance-animation) + enhances your animations. + +- [**`stylelint-no-unsupported-browser-features`**](https://github.com/ismay/stylelint-no-unsupported-browser-features) + disallow features that aren't supported by your target browser audience. - [**`stylelint-order`**](https://github.com/hudochenkov/stylelint-order) sorts **over 400 properties** for enhanced clarity and maintainability. > Properties are grouped into logical groups and separated by a space. +- [**`stylelint-plugin-defensive-css`**](https://github.com/yuschick/stylelint-plugin-defensive-css) + for enforcing defensive **CSS** best practices. + - [**`stylelint-plugin-logical-css`**](https://github.com/yuschick/stylelint-plugin-logical-css) replace properties with logical alternatives. -- [**`stylelint-high-performance-animation`**](https://github.com/kristerkari/stylelint-high-performance-animation) - enhances your animations. +- [**`stylelint-prettier`**](https://github.com/prettier/stylelint-prettier) + runs **Prettier** as a **Stylelint** rule and reports + differences as individual Stylelint issues. -- [**`stylelint-plugin-defensive-css`**](https://github.com/yuschick/stylelint-plugin-defensive-css) - for enforcing defensive **CSS** best practices. +### Rules -- [**`stylelint-gamut`**](https://github.com/fpetrakov/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) {}`** +- **BEM** naming convention likely enforced, encouraging modularity, + maintainability, and clarity in class naming. + +- Experimental and non-standard pseudo classes, pseudo elements and properties + are used in the config. + + > Don't worry, it doesn't have any side effects of any kind. ## Installation diff --git a/src/index.js b/src/index.js index cb74184..9c4b732 100644 --- a/src/index.js +++ b/src/index.js @@ -6,8 +6,11 @@ import plugins from './utils/plugins.js'; export default { extends: ['stylelint-config-standard-scss'], plugins: [ + 'stylelint-declaration-block-no-ignored-properties', 'stylelint-gamut', + 'stylelint-group-selectors', 'stylelint-high-performance-animation', + 'stylelint-no-unsupported-browser-features', 'stylelint-order', 'stylelint-plugin-defensive-css', 'stylelint-plugin-logical-css', diff --git a/src/utils/plugins.js b/src/utils/plugins.js index 1b31772..09a5d64 100644 --- a/src/utils/plugins.js +++ b/src/utils/plugins.js @@ -4,7 +4,15 @@ const plugins = { 'prettier/prettier': true, ...propertiesOrder, 'gamut/color-no-out-gamut-range': true, + 'plugin/declaration-block-no-ignored-properties': true, 'plugin/no-low-performance-animation-properties': true, + 'plugin/no-unsupported-browser-features': [ + true, + { + severity: 'warning', + }, + ], + 'plugin/stylelint-group-selectors': true, 'plugin/use-defensive-css': [ true, {