diff --git a/.ecrc b/.ecrc index 5991d77..b7bb354 100644 --- a/.ecrc +++ b/.ecrc @@ -3,7 +3,6 @@ "CHANGELOG.md", "config.yml", "CONTRIBUTING.md", - "css-rules.js", "PULL_REQUEST_TEMPLATE.md", "README.md" ] diff --git a/README.md b/README.md index a4cdb4e..9a37bb8 100644 --- a/README.md +++ b/README.md @@ -1,138 +1,61 @@ -# Stylelint Config Archoleat SCSS +# Stylelint Config Extended SCSS ![ESM Only](https://img.shields.io/badge/ESM-only-gray?labelColor=fe0) +![NPM Version](https://img.shields.io/npm/v/%40archoleat%2Fstylelint-config-extended-scss) +![Test](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-extended-scss/mocha.yml?label=Test) +![NPM Downloads](https://img.shields.io/npm/dm/%40archoleat%2Fstylelint-config-extended-scss) ![Commitlint](https://img.shields.io/github/actions/workflow/status/Archoleat/core/commitlint.yml?label=Commitlint) ![CodeQL](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-extended-scss/codeql.yml?label=CodeQL) -![Test](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-extended-scss/mocha.yml?label=Test) ![Editorconfig](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-extended-scss/editorconfig.yml?label=Editorconfig) ![Prettier](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-extended-scss/prettier.yml?label=Prettier) ![Markdown](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-extended-scss/markdown.yml?label=Markdown) ![ESLint](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-extended-scss/eslint.yml?label=ESLint) -![NPM Downloads](https://img.shields.io/npm/dm/%40archoleat%2Fstylelint-config-extended-scss) -![NPM Version](https://img.shields.io/npm/v/%40archoleat%2Fstylelint-config-extended-scss) - -## Table of Contents - -- [Table of Contents](#table-of-contents) - -- [Features](#features) - - [Extends](#extends) - - [Plugins](#plugins) - - [Pseudo Elements and Classes](#pseudo-elements-and-classes) - - [Rules](#rules) - - [Naming Pattern](#naming-pattern) - - [Key Points](#key-points) -- [Additions](#additions) - - [Husky](#husky) +> Extended Config for Stylelint With Property Sorting -- [Authors](#authors) - -- [Contributors](#contributors) - -- [Contributing](#contributing) - -- [Versioning](#versioning) +## Table of Contents +- [This Config](#this-config) +- [Installation](#installation) +- [Usage](#usage) - [License](#license) -## Extended Config for Stylelint With Property Sorting - -This project is built on [**Archoleat Repo Template**](https://github.com/Archoleat/archoleat-repo-template). - -> \[!TIP] -> Nice addition for [**Archoleat**](https://github.com/Archoleat/archoleat)! - -## Features - -### Extends - -- **`stylelint-config-standard-scss`**: Provides a baseline for common CSS - best practices and SCSS consistency. - -### Plugins +## This Config -- **`stylelint-high-performance-animation`**: Optimizes animation performance - by identifying potential issues and suggesting best practices. +- Extends the [**`stylelint-config-standard-scss`** shared config](https://github.com/stylelint-scss/stylelint-config-standard-scss) + and configures its rules for **SCSS**. -- **`stylelint-order`**: Enforces consistent property ordering within - declarations, sorting over 480+ rules to enhance readability - and maintainability. +- **BEM** naming convention likely enforced, encouraging modularity, + maintainability, and clarity in class naming. - > If a mixin or function has no nested code, it is located at the top, - > otherwise it will be at the bottom. - -- **`stylelint-plugin-defensive-css`**: Promotes robust CSS by identifying - potential vulnerabilities and cross-browser inconsistencies. - -- **`stylelint-plugin-logical-css`**: Encourages the use of logical - properties for improved accessibility and flexibility in - direction-aware layouts. - - > In future major versions, all deprecated properties - > will be removed from sorting! - -- **`stylelint-prettier`**: Integrates **Prettier** for - consistent code formatting. - -### Pseudo Elements and Classes - -- Supports **20+** pseudo elements and **65+** pseudo classes - for diverse styling needs. - - > Experimental and non-standard pseudo classes and - > elements are used in the config. - -### Naming Pattern - -**BEM** naming convention likely enforced, encouraging modularity, -maintainability, and clarity in class naming. - -### Key Points - -- Comprehensive configuration addressing performance, maintainability, - accessibility, and best practices. - -- Leverages a solid foundation from **`stylelint-config-standard-scss`** - with valuable plugins. - -- Enforces consistent code style and naming conventions for better - readability and collaboration. +- Experimental and non-standard pseudo classes, pseudo elements and properties + are used in the config. - Sorts **over 400 properties** using the **`stylelint-order`** plugin for enhanced clarity and maintainability. - > Experimental and non-standard properties are used in the config. - -## Additions - -### Husky - -This repository uses **.husky** as a submodule. -**.husky** runs **`pre-commit`** hook and **`commit-msg`**. - -## Authors - -See also the list of [**Authors**](AUTHORS.md). - -## Contributors +- **`stylelint-plugin-logical-css`** replace some properties + with logical alternatives. -If you want to improve something, you can write about it -[**here**](https://github.com/Archoleat/stylelint-config-extended-scss/issues/new/choose). +- **`stylelint-high-performance-animation`** enhances your animations. -You can also view a list of [**Contributors**](CONTRIBUTORS.md). +- **`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) {}`** -## Contributing +## Installation -Please read [**Contributing**](CONTRIBUTING.md) -and [**Code of Conduct**](CODE_OF_CONDUCT.md) for details, -and the process for submitting **Pull Request** to us. +```bash +npm i -D @archoleat/stylelint-config-extended-scss +``` -## Versioning +## Usage -We use [**SemVer**](https://semver.org) for versioning. -You can see the available versions -[**here**](https://github.com/Archoleat/stylelint-config-extended-scss/tags). +```js +export default { + extends: '@archoleat/stylelint-config-extended-scss', +}; +``` ## License diff --git a/index.js b/index.js index d5e486f..5df894e 100644 --- a/index.js +++ b/index.js @@ -1,14 +1,13 @@ -// Copyright (c) 2024 Archoleat - -import CSSRules from './utilities/css-rules.js'; -import SCSSRules from './utilities/scss-rules.js'; +import CSSRules from './utilities/rules/css.js'; +import SCSSRules from './utilities/rules/scss.js'; import pluginsSettings from './utilities/plugins-settings.js'; -import propertiesOrder from './utilities/order.js'; +import propertiesOrder from './utilities/properties/order.js'; export default { extends: ['stylelint-config-standard-scss'], plugins: [ + 'stylelint-gamut', 'stylelint-high-performance-animation', 'stylelint-order', 'stylelint-plugin-defensive-css', diff --git a/package-lock.json b/package-lock.json index baa0938..dcb142c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@archoleat/stylelint-config-extended-scss", - "version": "1.0.0", + "version": "1.1.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@archoleat/stylelint-config-extended-scss", - "version": "1.0.0", + "version": "1.1.1", "license": "MIT", "dependencies": { "stylelint": "*", @@ -39,7 +39,8 @@ "remark-preset-lint-consistent": "*", "remark-preset-lint-markdown-style-guide": "*", "remark-preset-lint-recommended": "*", - "semantic-release": "*" + "semantic-release": "*", + "stylelint-gamut": "1.3.4" }, "engines": { "node": ">=18.12.0" @@ -2774,6 +2775,12 @@ "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==", "dev": true }, + "node_modules/colorjs.io": { + "version": "0.4.5", + "resolved": "https://registry.npmjs.org/colorjs.io/-/colorjs.io-0.4.5.tgz", + "integrity": "sha512-yCtUNCmge7llyfd/Wou19PMAcf5yC3XXhgFoAh6zsO2pGswhUPBaaUh8jzgHnXtXuZyFKzXZNAnyF5i+apICow==", + "dev": true + }, "node_modules/comma-separated-tokens": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz", @@ -16718,6 +16725,21 @@ } } }, + "node_modules/stylelint-gamut": { + "version": "1.3.4", + "resolved": "https://registry.npmjs.org/stylelint-gamut/-/stylelint-gamut-1.3.4.tgz", + "integrity": "sha512-mN/8BRPNGlKwf/lGrR9JjW9Abm6e7lCn7fiq4M6a4RxDCU/R6lSUI65R6cdo5BV14qf3GmrqNBAjmSujBVrHoA==", + "dev": true, + "dependencies": { + "colorjs.io": "^0.4.5" + }, + "engines": { + "node": ">=16.0.0" + }, + "peerDependencies": { + "stylelint": "^14.0.0 || ^15.0.0 || ^16.0.0" + } + }, "node_modules/stylelint-high-performance-animation": { "version": "1.10.0", "resolved": "https://registry.npmjs.org/stylelint-high-performance-animation/-/stylelint-high-performance-animation-1.10.0.tgz", diff --git a/package.json b/package.json index bfed278..e6b257a 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "author": "Archoleat", "name": "@archoleat/stylelint-config-extended-scss", "description": "Extended config for Stylelint with property sorting", - "version": "1.1.1", + "version": "1.2.0", "license": "MIT", "keywords": [ "archoleat-scss", @@ -43,6 +43,7 @@ "dependencies": { "stylelint": "*", "stylelint-config-standard-scss": "*", + "stylelint-gamut": "*", "stylelint-high-performance-animation": "*", "stylelint-order": "*", "stylelint-plugin-defensive-css": "*", @@ -76,6 +77,7 @@ "peerDependencies": { "stylelint": "*", "stylelint-config-standard-scss": "*", + "stylelint-gamut": "*", "stylelint-high-performance-animation": "*", "stylelint-order": "*", "stylelint-plugin-defensive-css": "*", diff --git a/utilities/plugins-settings.js b/utilities/plugins-settings.js index ca38835..67d0e58 100644 --- a/utilities/plugins-settings.js +++ b/utilities/plugins-settings.js @@ -1,6 +1,5 @@ -// Copyright (c) 2024 Archoleat - const pluginsSettings = { + 'gamut/color-no-out-gamut-range': true, 'plugin/no-low-performance-animation-properties': true, 'plugin/use-defensive-css': [ true, diff --git a/utilities/deprecated.js b/utilities/properties/deprecated.js similarity index 98% rename from utilities/deprecated.js rename to utilities/properties/deprecated.js index 8bfcead..1458e03 100644 --- a/utilities/deprecated.js +++ b/utilities/properties/deprecated.js @@ -1,5 +1,3 @@ -// Copyright (c) 2024 Archoleat - const deprecated = { property: { float: 'float', diff --git a/utilities/experimental.js b/utilities/properties/experimental.js similarity index 98% rename from utilities/experimental.js rename to utilities/properties/experimental.js index 8f5ab80..0031df3 100644 --- a/utilities/experimental.js +++ b/utilities/properties/experimental.js @@ -1,5 +1,3 @@ -// Copyright (c) 2024 Archoleat - const experimental = { pseudoElement: { grammarError: '&::grammar-error', diff --git a/utilities/non-standard.js b/utilities/properties/non-standard.js similarity index 98% rename from utilities/non-standard.js rename to utilities/properties/non-standard.js index e63267a..73649e8 100644 --- a/utilities/non-standard.js +++ b/utilities/properties/non-standard.js @@ -1,5 +1,3 @@ -// Copyright (c) 2024 Archoleat - const nonStandard = { pseudoElement: { webkit: { diff --git a/utilities/order.js b/utilities/properties/order.js similarity index 99% rename from utilities/order.js rename to utilities/properties/order.js index 5682c6d..5f9316e 100644 --- a/utilities/order.js +++ b/utilities/properties/order.js @@ -1,5 +1,3 @@ -// Copyright (c) 2024 Archoleat - import deprecated from './deprecated.js'; import experimental from './experimental.js'; import nonStandard from './non-standard.js'; diff --git a/utilities/regexps.js b/utilities/regexps.js new file mode 100644 index 0000000..1e6b71d --- /dev/null +++ b/utilities/regexps.js @@ -0,0 +1,8 @@ +const PATTERN = '[a-z0-9]'; +const REGEXP = { + BEM_BLOCK: `[a-z]${PATTERN}*(-${PATTERN}+)`, + BEM_ELEMENT: `(__${PATTERN}+(-${PATTERN}+)*)`, + BEM_MODIFIER: `(--${PATTERN}+(-${PATTERN}+)*)`, +}; + +export default REGEXP; diff --git a/utilities/css-rules.js b/utilities/rules/css.js similarity index 88% rename from utilities/css-rules.js rename to utilities/rules/css.js index ae61968..2c78921 100644 --- a/utilities/css-rules.js +++ b/utilities/rules/css.js @@ -1,4 +1,4 @@ -// Copyright (c) 2024 Archoleat +import REGEXP from '../regexps.js'; const CSSRules = { 'color-named': 'never', @@ -16,7 +16,7 @@ const CSSRules = { 'no-descending-specificity': null, 'no-unknown-animations': true, 'selector-class-pattern': [ - '^[a-z][a-z0-9]*(-[a-z0-9]+)*(__[a-z0-9]+(-[a-z0-9]+)*)?(--[a-z0-9]+(-[a-z0-9]+)*)?$', + `^${REGEXP.BEM_BLOCK}*${REGEXP.BEM_ELEMENT}?${REGEXP.BEM_MODIFIER}?$`, { message: 'Expected class name to be bem', }, diff --git a/utilities/scss-rules.js b/utilities/rules/scss.js similarity index 96% rename from utilities/scss-rules.js rename to utilities/rules/scss.js index c4fac63..d647f77 100644 --- a/utilities/scss-rules.js +++ b/utilities/rules/scss.js @@ -1,5 +1,3 @@ -// Copyright (c) 2024 Archoleat - const SCSSRules = { 'scss/at-each-key-value-single-line': true, 'scss/at-function-named-arguments': 'never',