diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml index 47d2abd..3bcf26b 100644 --- a/.github/ISSUE_TEMPLATE/config.yml +++ b/.github/ISSUE_TEMPLATE/config.yml @@ -1,5 +1,5 @@ blank_issues_enabled: false contact_links: - name: Get Help in GitHub Discussions - url: https://github.com/Archoleat/stylelint-config-archoleat-scss/discussions + url: https://github.com/Archoleat/stylelint-config-extended-scss/discussions about: Have a question? Not sure if your issue affects everyone reproducibly? diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index e84307e..308b55a 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -29,7 +29,7 @@ Please, go through these steps before you submit a **Pull Request**. the Issue that your **Pull Request** fixes (if such). IMPORTANT: Please see our -[**Contribution Guidelines**](https://github.com/Archoleat/stylelint-config-archoleat-scss/blob/main/CONTRIBUTING.md) +[**Contribution Guidelines**](https://github.com/Archoleat/stylelint-config-extended-scss/blob/main/CONTRIBUTING.md) for details. **PLEASE REMOVE THIS TEMPLATE BEFORE SUBMITTING** diff --git a/.github/config.yml b/.github/config.yml index 09d9a24..e274054 100644 --- a/.github/config.yml +++ b/.github/config.yml @@ -3,7 +3,7 @@ newIssueWelcomeComment: > newPRWelcomeComment: > Thanks for opening this Pull Request! - Please check out our [Contributing Guidelines](https://github.com/Archoleat/stylelint-config-archoleat-scss/blob/main/CONTRIBUTING.md). + Please check out our [Contributing Guidelines](https://github.com/Archoleat/stylelint-config-extended-scss/blob/main/CONTRIBUTING.md). firstPRMergeComment: > Congrats on merging your first Pull Request! diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 5f61b6c..fe778e0 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -30,16 +30,16 @@ for all involved. The community looks forward to your contributions. ## Code of Conduct This project and everyone participating in it is governed by the -[**Stylelint Config Archoleat SCSS Code of Conduct**](https://github.com/Archoleat/stylelint-config-archoleat-scss/blob/main/CODE_OF_CONDUCT.md). +[**Stylelint Config Archoleat SCSS Code of Conduct**](https://github.com/Archoleat/stylelint-config-extended-scss/blob/main/CODE_OF_CONDUCT.md). By participating, you are expected to uphold this code. ## I Have a Question > If you want to ask a question, we assume that you have read -> the available [**Documentation**](https://github.com/Archoleat/stylelint-config-archoleat-scss/blob/main/README.md). +> the available [**Documentation**](https://github.com/Archoleat/stylelint-config-extended-scss/blob/main/README.md). Before you ask a question, it is best to search for existing -[**Issues**](https://github.com/Archoleat/stylelint-config-archoleat-scss/issues) +[**Issues**](https://github.com/Archoleat/stylelint-config-extended-scss/issues) that might help you. In case you have found a suitable **Issue** and still need clarification, you can write your question in this **Issue**. It is also advisable to search the internet for answers first. @@ -48,7 +48,7 @@ If you then still feel the need to ask a question and need clarification, we recommend the following: - Open an - [**Issue**](https://github.com/Archoleat/stylelint-config-archoleat-scss/issues/new/choose). + [**Issue**](https://github.com/Archoleat/stylelint-config-extended-scss/issues/new/choose). - Provide as much context as you can about what you're running into. @@ -79,14 +79,14 @@ potential bug as fast as possible. - Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions - (Make sure that you have read the [**Documentation**](https://github.com/Archoleat/stylelint-config-archoleat-scss/blob/main/README.md). + (Make sure that you have read the [**Documentation**](https://github.com/Archoleat/stylelint-config-extended-scss/blob/main/README.md). If you are looking for support, you might want to check [**this section**](#i-have-a-question)). - To see if other users have experienced (and potentially already solved) the same **Issue** you are having, check if there is not already a bug report existing for your bug or error in the - [**bug tracker**](https://github.com/Archoleat/stylelint-config-archoleat-scss/issues?q=label%3Abug). + [**bug tracker**](https://github.com/Archoleat/stylelint-config-extended-scss/issues?q=label%3Abug). - Also make sure to search the internet (including **Stack Overflow**) to see if users outside of the **GitHub community** have discussed @@ -118,7 +118,7 @@ We use GitHub **Issues** to track bugs and errors. If you run into an **Issue** with the project: - Open an - [**Issue**](https://github.com/Archoleat/stylelint-config-archoleat-scss/issues/new/choose). + [**Issue**](https://github.com/Archoleat/stylelint-config-extended-scss/issues/new/choose). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the **Issue**.) @@ -159,12 +159,12 @@ to understand your suggestion and find related suggestions. - Make sure that you are using the latest version. -- Read the [**Documentation**](https://github.com/Archoleat/stylelint-config-archoleat-scss/blob/main/README.md) +- Read the [**Documentation**](https://github.com/Archoleat/stylelint-config-extended-scss/blob/main/README.md) carefully and find out if the functionality is already covered, maybe by an individual configuration. - Perform a - [**search**](https://github.com/Archoleat/stylelint-config-archoleat-scss/issues) + [**search**](https://github.com/Archoleat/stylelint-config-extended-scss/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing **Issue** instead of opening a new one. @@ -178,7 +178,7 @@ to understand your suggestion and find related suggestions. #### How Do I Submit a Good Enhancement Suggestion? -Enhancement suggestions are tracked as [**GitHub Issues**](https://github.com/Archoleat/stylelint-config-archoleat-scss/issues/new/choose). +Enhancement suggestions are tracked as [**GitHub Issues**](https://github.com/Archoleat/stylelint-config-extended-scss/issues/new/choose). - Use a **clear and descriptive title** for the **Issue** to identify the suggestion. @@ -216,7 +216,7 @@ build their projects. #### How to Submit Documentation Enhancements -Enhancement suggestions are tracked as [**GitHub Issues**](https://github.com/Archoleat/stylelint-config-archoleat-scss/issues/new/choose). +Enhancement suggestions are tracked as [**GitHub Issues**](https://github.com/Archoleat/stylelint-config-extended-scss/issues/new/choose). - Use a **clear and descriptive title** for the **Issue** to identify the suggestion. diff --git a/README.md b/README.md index fe4cbce..fff9bb4 100644 --- a/README.md +++ b/README.md @@ -2,22 +2,24 @@ ![ESM Only](https://img.shields.io/badge/ESM-only-gray?labelColor=fe0) ![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-archoleat-scss/codeql.yml?label=CodeQL) -![Test](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-archoleat-scss/mocha.yml?label=Test) -![Editorconfig](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-archoleat-scss/editorconfig.yml?label=Editorconfig) -![Prettier](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-archoleat-scss/prettier.yml?label=Prettier) -![Markdown](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-archoleat-scss/markdown.yml?label=Markdown) -![ESLint](https://img.shields.io/github/actions/workflow/status/Archoleat/stylelint-config-archoleat-scss/eslint.yml?label=ESLint) +![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) ## Table of Contents - [Table of Contents](#table-of-contents) -- [Getting Started](#getting-started) - - [Features](#features) - -- [Scripts](#scripts) + - [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) @@ -39,54 +41,71 @@ 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) -> or [**Archoleat Repo Template**](https://github.com/Archoleat/archoleat-repo-template)! - -## Getting Started +> Nice addition for [**Archoleat**](https://github.com/Archoleat/archoleat)! ## Features -## Scripts +### Extends + +- **`stylelint-config-standard-scss`**: Provides a baseline for common CSS + best practices and SCSS consistency. + +### Plugins + +- **`stylelint-high-performance-animation`**: Optimizes animation performance + by identifying potential issues and suggesting best practices. + +- **`stylelint-order`**: Enforces consistent property ordering within + declarations, sorting over 480+ rules to enhance readability + and maintainability. -- **`init`**: Installs dependencies, **Husky** and update submodules. +- **`stylelint-plugin-defensive-css`**: Promotes robust CSS by identifying + potential vulnerabilities and cross-browser inconsistencies. -- **`format`**: Runs **Prettier** with the **`--write`** flag - for all files. +- **`stylelint-plugin-logical-css`**: Encourages the use of logical + properties for improved accessibility and flexibility in + direction-aware layouts. -- **`lint:formatting`**: Runs **Prettier** with the **`--check`** flag - for all files. + > future version all old properties will be remove - > In the [**`prettier.yml`**](https://github.com/Archoleat/stylelint-config-archoleat-scss/blob/main/.github/workflows/prettier.yml) - > - > Also run with a **`pre-commit`** hook. +- **`stylelint-prettier`**: Integrates **Prettier** for + consistent code formatting. -- **`lint:editorconfig`**: Runs **Editorconfig Checker** and - checks all files in the project. +### Pseudo Elements and Classes - > Also runs with the [**`editorconfig.yml`**](https://github.com/Archoleat/stylelint-config-archoleat-scss/blob/main/.github/workflows/editorconfig.yml) - > workflow. +- Supports **20+** pseudo elements and **65+** pseudo classes + for diverse styling needs. + +> \[!TIP] +> Experimental and non-standard pseudo classes and +> elements are used in the config. + +### Rules + +- **Over 480 properties**, covering various aspects of CSS coding + style, consistency, and best practices. + +> \[!TIP] +> Experimental and non-standard properties are used in the config. -- **`lint:md`**: Runs **Remark** with the **`--quiet`** flag and - checks all **Markdown** files. +### Naming Pattern - > Also runs with the [**`markdown.yml`**](https://github.com/Archoleat/stylelint-config-archoleat-scss/blob/main/.github/workflows/markdown.yml) - > workflow. +**BEM** naming convention likely enforced, encouraging modularity, +maintainability, and clarity in class naming. -- **`lint:ts`**: Runs **ESLint** with the flag **`--fix`** - for all **TypeScript** files. +### Key Points - > Runs with the [**`eslint.yml`**](https://github.com/Archoleat/stylelint-config-archoleat-scss/blob/main/.github/workflows/eslint.yml) - > workflow. - > - > Also run with a **`pre-commit`** hook. +- Comprehensive configuration addressing performance, maintainability, + accessibility, and best practices. -- **`test`**: Runs **Mocha** and the tests in the **specs/** folder. +- Leverages a solid foundation from **`stylelint-config-standard-scss`** + with valuable plugins. - > Also runs using the [**`mocha.yml`**](https://github.com/Archoleat/stylelint-config-archoleat-scss/blob/main/.github/workflows/mocha.yml) - > workflow. +- Enforces consistent code style and naming conventions for better + readability and collaboration. -- **`commit`**: Runs **Commitlint** to create commits according to - **Conventional Commits** standards. +- Sorts **over 480 properties** using the **`stylelint-order`** plugin for + enhanced clarity and maintainability. ## Additions @@ -102,7 +121,7 @@ See also the list of [**Authors**](AUTHORS.md). ## Contributors If you want to improve something, you can write about it -[**here**](https://github.com/Archoleat/stylelint-config-archoleat-scss/issues/new/choose). +[**here**](https://github.com/Archoleat/stylelint-config-extended-scss/issues/new/choose). You can also view a list of [**Contributors**](CONTRIBUTORS.md). @@ -116,7 +135,7 @@ and the process for submitting **Pull Request** to us. We use [**SemVer**](https://semver.org) for versioning. You can see the available versions -[**here**](https://github.com/Archoleat/stylelint-config-archoleat-scss/tags). +[**here**](https://github.com/Archoleat/stylelint-config-extended-scss/tags). ## License diff --git a/index.js b/index.js index f528a07..0798bdb 100644 --- a/index.js +++ b/index.js @@ -1,5 +1,6 @@ // Copyright (c) 2024 Archoleat +import deprecated from './utils/deprecated.js'; import experimental from './utils/experimental.js'; import nonStandard from './utils/non-standard.js'; @@ -426,23 +427,8 @@ export default { [ // All 'all', - 'page', 'appearance', - 'counter-increment', - 'counter-set', - 'counter-reset', - 'content', - 'quotes', - 'break-before', - 'break-inside', - 'break-after', - 'orphans', - 'widows', - 'clear', // Position - 'float', - 'inline-start', - 'inline-end', 'position', 'inset', 'inset-block', @@ -451,12 +437,12 @@ export default { 'inset-inline', 'inset-inline-start', 'inset-inline-end', - 'top', - 'right', - 'bottom', - 'left', + deprecated.property.top, + deprecated.property.right, + deprecated.property.bottom, + deprecated.property.left, + deprecated.property.float, 'z-index', - 'display', // Columns 'columns', 'column-width', @@ -479,8 +465,12 @@ export default { // Grid 'grid', 'grid-area', - 'grid-auto-columns', + 'grid-template', + 'grid-template-areas', + 'grid-template-columns', + 'grid-template-rows', 'grid-auto-flow', + 'grid-auto-columns', 'grid-auto-rows', 'grid-column', 'grid-column-start', @@ -488,21 +478,17 @@ export default { 'grid-row', 'grid-row-start', 'grid-row-end', - 'grid-template', - 'grid-template-areas', - 'grid-template-columns', - 'grid-template-rows', 'gap', 'column-gap', 'row-gap', experimental.property.masonryAutoFlow, // Table - 'border-collapse', + 'table-layout', 'border-spacing', - 'caption-side', + 'border-collapse', 'empty-cells', - 'table-layout', 'vertical-align', + 'caption-side', // Alignment 'place-content', 'place-items', @@ -515,37 +501,6 @@ export default { 'justify-items', 'justify-self', experimental.property.justifyTracks, - // Mask - 'mask', - 'mask-border', - 'mask-border-source', - 'mask-border-slice', - 'mask-border-width', - 'mask-border-outset', - 'mask-border-repeat', - 'mask-border-mode', - 'mask-image', - 'mask-mode', - 'mask-position', - 'mask-size', - 'mask-repeat', - 'mask-origin', - 'mask-clip', - 'mask-composite', - 'mask-type', - // Overflow - 'overflow', - 'overflow-clip-margin', - 'overflow-y', - 'overflow-x', - 'overflow-block', - 'overflow-inline', - 'overflow-wrap', - 'overflow-anchor', - // Shape - 'shape-outside', - 'shape-margin', - 'shape-image-threshold', // Container 'container', 'container-name', @@ -555,8 +510,30 @@ export default { 'contain-intrinsic-size', 'contain-intrinsic-block-size', 'contain-intrinsic-inline-size', - 'contain-intrinsic-height', - 'contain-intrinsic-width', + deprecated.property.containIntrinsicHeight, + deprecated.property.containIntrinsicWidth, + // Overflow + 'overflow', + 'overflow-clip-margin', + 'overflow-block', + 'overflow-inline', + deprecated.property.overflowY, + deprecated.property.overflowX, + 'overflow-wrap', + 'overflow-anchor', + // Offset + 'offset', + 'offset-position', + 'offset-path', + 'offset-distance', + 'offset-rotate', + 'offset-anchor', + // Outline + 'outline', + 'outline-width', + 'outline-style', + 'outline-color', + 'outline-offset', // Margin 'margin', experimental.property.marginTrim, @@ -566,19 +543,12 @@ export default { 'margin-inline', 'margin-inline-start', 'margin-inline-end', - 'margin-top', - 'margin-right', - 'margin-bottom', - 'margin-left', - // Outline - 'outline', - 'outline-width', - 'outline-style', - 'outline-color', - 'outline-offset', + deprecated.property.marginTop, + deprecated.property.marginRight, + deprecated.property.marginBottom, + deprecated.property.marginLeft, // Border 'border', - 'border-width', 'border-style', 'border-color', 'border-radius', @@ -586,61 +556,52 @@ export default { 'border-start-end-radius', 'border-end-start-radius', 'border-end-end-radius', - 'border-block', 'border-block-width', 'border-block-style', 'border-block-color', - 'border-block-start', 'border-block-start-width', 'border-block-start-style', 'border-block-start-color', - 'border-block-end', 'border-block-end-width', 'border-block-end-style', 'border-block-end-color', - 'border-inline', 'border-inline-width', 'border-inline-style', 'border-inline-color', - 'border-inline-start', 'border-inline-start-width', 'border-inline-start-style', 'border-inline-start-color', - 'border-inline-end', 'border-inline-end-width', 'border-inline-end-style', 'border-inline-end-color', - - 'border-top', - 'border-top-left-radius', - 'border-top-right-radius', - 'border-top-width', - 'border-top-style', - 'border-top-color', - - 'border-right', - 'border-right-width', - 'border-right-style', - 'border-right-color', - - 'border-bottom', - 'border-bottom-left-radius', - 'border-bottom-right-radius', - 'border-bottom-width', - 'border-bottom-style', - 'border-bottom-color', - - 'border-left', - 'border-left-width', - 'border-left-style', - 'border-left-color', - + deprecated.property.borderHeight, + deprecated.property.borderWidth, + deprecated.property.borderTop, + deprecated.property.borderTopLeftRadius, + deprecated.property.borderTopRightRadius, + deprecated.property.borderTopWidth, + deprecated.property.borderTopStyle, + deprecated.property.borderTopColor, + deprecated.property.borderRight, + deprecated.property.borderRightWidth, + deprecated.property.borderRightStyle, + deprecated.property.borderRightColor, + deprecated.property.borderBottom, + deprecated.property.borderBottomLeftRadius, + deprecated.property.borderBottomRightRadius, + deprecated.property.borderBottomWidth, + deprecated.property.borderBottomStyle, + deprecated.property.borderBottomColor, + deprecated.property.borderLeft, + deprecated.property.borderLeftWidth, + deprecated.property.borderLeftStyle, + deprecated.property.borderLeftColor, 'border-image', 'border-image-source', 'border-image-slice', @@ -648,25 +609,21 @@ export default { 'border-image-outset', 'border-image-repeat', // Sizes - 'aspect-ratio', 'box-sizing', - 'height', - 'min-height', - 'max-height', + 'aspect-ratio', 'block-size', 'min-block-size', 'max-block-size', - 'width', - 'min-width', - 'max-width', 'inline-size', 'min-inline-size', 'max-inline-size', - - 'box-decoration-break', - 'box-shadow', - - // Inner + deprecated.property.height, + deprecated.property.minHeight, + deprecated.property.maxHeight, + deprecated.property.width, + deprecated.property.minWidth, + deprecated.property.maxWidth, + // Padding 'padding', 'padding-block', 'padding-block-start', @@ -674,10 +631,32 @@ export default { 'padding-inline', 'padding-inline-start', 'padding-inline-end', - 'padding-top', - 'padding-right', - 'padding-bottom', - 'padding-left', + deprecated.property.paddingTop, + deprecated.property.paddingRight, + deprecated.property.paddingBottom, + deprecated.property.paddingLeft, + // Shape + 'shape-outside', + 'shape-margin', + 'shape-image-threshold', + // Mask + 'mask', + 'mask-border', + 'mask-border-source', + 'mask-border-slice', + 'mask-border-width', + 'mask-border-outset', + 'mask-border-repeat', + 'mask-border-mode', + 'mask-image', + 'mask-mode', + 'mask-position', + 'mask-size', + 'mask-repeat', + 'mask-origin', + 'mask-clip', + 'mask-composite', + 'mask-type', // Fonts 'src', 'font', @@ -721,7 +700,6 @@ export default { 'text-align-last', experimental.property.textSizeAdjust, 'text-combine-upright', - 'text-decoration', experimental.property.textDecorationSkip, 'text-decoration-skip-ink', @@ -729,84 +707,41 @@ export default { 'text-decoration-line', 'text-decoration-style', 'text-decoration-color', - 'text-emphasis', 'text-emphasis-position', 'text-emphasis-style', 'text-emphasis-color', - 'text-underline-position', 'text-underline-offset', // Typography 'direction', 'writing-mode', + 'tab-size', + 'white-space', + experimental.property.whiteSpaceCollapse, 'word-wrap', 'word-spacing', 'word-break', experimental.property.initialLetter, experimental.property.initialLetterAlign, + 'letter-spacing', 'line-break', 'line-height', experimental.property.lineHeightStep, - 'letter-spacing', - 'white-space', - experimental.property.whiteSpaceCollapse, + 'ruby-position', + experimental.property.rubyAlign, 'hyphens', 'hyphenate-character', 'hyphenate-limit-chars', - 'tab-size', 'hanging-punctuation', - 'ruby-position', - experimental.property.rubyAlign, 'unicode-bidi', 'unicode-range', - 'forced-color-adjust', - // Color - 'color-scheme', - 'color', - 'accent-color', - 'caret-color', - // SVG - 'fill', - 'fill-rule', - 'fill-opacity', - 'stroke', - 'stroke-dashoffset', - 'stroke-dasharray', - 'stroke-width', - 'stroke-linecap', - 'stroke-linejoin', - 'stroke-miterlimit', - 'stroke-opacity', - // Other - 'clip-path', - 'clip-rule', - 'color-interpolation-filters', - 'flood-color', - 'flood-opacity', - 'lighting-color', - // List - 'list-style', - 'list-style-type', - 'list-style-position', - 'list-style-image', - // Marker - 'marker', - 'marker-start', - 'marker-mid', - 'marker-end', - // Paint - 'paint-order', - // Other - 'stop-color', - 'stop-opacity', - // Offset - 'offset', - 'offset-position', - 'offset-path', - 'offset-distance', - 'offset-rotate', - 'offset-anchor', + // Image + 'object-fit', + 'object-position', + 'image-orientation', + 'image-rendering', + experimental.property.imageResolution, // Background 'background', 'background-image', @@ -820,22 +755,16 @@ export default { 'background-attachment', 'background-clip', 'background-blend-mode', - // Image - 'object-fit', - 'object-position', - 'image-orientation', - 'image-rendering', - experimental.property.imageResolution, - // Filters - 'opacity', - 'visibility', - experimental.property.contentVisibility, - 'backface-visibility', - 'isolation', - 'filter', - experimental.property.overlay, - 'backdrop-filter', - 'mix-blend-mode', + // Color + 'color-scheme', + 'accent-color', + 'color', + 'caret-color', + 'forced-color-adjust', + 'print-color-adjust', + // SVG + 'fill', + 'stroke', // Transform 'transform', 'transform-box', @@ -863,37 +792,85 @@ export default { 'animation-direction', 'animation-fill-mode', 'animation-play-state', - experimental.property.animationTimeline, 'animation-composition', + experimental.property.animationTimeline, experimental.property.animationRange, experimental.property.animationRangeStart, experimental.property.animationRangeEnd, 'will-change', - // View Timeline - experimental.property.timelineScope, - experimental.property.viewTimeline, - experimental.property.viewTimelineName, - experimental.property.viewTimelineAxis, - experimental.property.viewTimelineInset, - experimental.property.viewTransitionName, - // Other + // List + 'list-style', + 'list-style-type', + 'list-style-position', + 'list-style-image', + + //! Other + 'visibility', + experimental.property.contentVisibility, + 'backface-visibility', + 'isolation', 'cursor', + 'box-decoration-break', + 'box-shadow', + 'paint-order', + 'opacity', + 'page', + 'content', + 'counter-increment', + 'counter-set', + 'counter-reset', + 'quotes', + 'break-before', + 'break-inside', + 'break-after', + + 'orphans', + 'widows', + + 'clear', + 'display', + + // User Actions 'pointer-events', 'touch-action', 'user-select', 'user-zoom', + + // Actions nonStandard.property.zoom, 'resize', + + // Filters + 'filter', + 'backdrop-filter', + 'clip-path', + 'mix-blend-mode', + experimental.property.overlay, + + // Marker + 'marker', + 'marker-start', + 'marker-mid', + 'marker-end', + // Math 'math-depth', experimental.property.mathShift, 'math-style', + + // View Timeline + experimental.property.timelineScope, + experimental.property.viewTimeline, + experimental.property.viewTimelineName, + experimental.property.viewTimelineAxis, + experimental.property.viewTimelineInset, + experimental.property.viewTransitionName, // Overscroll 'overscroll-behavior', - 'overscroll-behavior-y', - 'overscroll-behavior-x', 'overscroll-behavior-block', 'overscroll-behavior-inline', + deprecated.property.overscrollBehaviorY, + deprecated.property.overscrollBehaviorX, // Scroll 'scroll-behavior', 'scroll-margin', @@ -903,10 +880,10 @@ export default { 'scroll-margin-inline', 'scroll-margin-inline-start', 'scroll-margin-inline-end', - 'scroll-margin-top', - 'scroll-margin-right', - 'scroll-margin-bottom', - 'scroll-margin-left', + deprecated.property.scrollMarginTop, + deprecated.property.scrollMarginRight, + deprecated.property.scrollMarginBottom, + deprecated.property.scrollMarginLeft, 'scroll-padding', 'scroll-padding-block', 'scroll-padding-block-start', @@ -914,10 +891,10 @@ export default { 'scroll-padding-inline', 'scroll-padding-inline-start', 'scroll-padding-inline-end', - 'scroll-padding-top', - 'scroll-padding-right', - 'scroll-padding-bottom', - 'scroll-padding-left', + deprecated.property.scrollPaddingTop, + deprecated.property.scrollPaddingRight, + deprecated.property.scrollPaddingBottom, + deprecated.property.scrollPaddingLeft, 'scroll-snap-type', 'scroll-snap-align', 'scroll-snap-stop', @@ -925,17 +902,35 @@ export default { experimental.property.scrollTimelineAxis, experimental.property.scrollTimelineName, // Scrollbar - 'scrollbar-width', 'scrollbar-gutter', + 'scrollbar-width', 'scrollbar-color', ], { unspecified: 'bottomAlphabetical', }, ], + 'color-named': 'never', + 'declaration-no-important': true, + 'font-weight-notation': 'numeric', + 'function-url-no-scheme-relative': true, + 'keyframe-selector-notation': 'percentage', + 'max-nesting-depth': [ + //? + 4, + { + ignore: ['blockless-at-rules'], + }, + ], 'media-feature-name-value-no-unknown': true, - 'selector-class-pattern': + '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]+)*)?$', + { + message: 'Expected class name to be bem', + }, + ], 'selector-max-combinators': 4, 'selector-max-compound-selectors': 4, 'selector-max-id': 1, @@ -946,51 +941,36 @@ export default { ignore: ['attribute'], }, ], - 'no-descending-specificity': null, - 'max-nesting-depth': [ - 4, + 'time-min-milliseconds': [ + 100, { - ignore: ['blockless-at-rules'], + ignore: ['delay'], }, ], - 'function-url-no-scheme-relative': true, 'value-keyword-case': [ 'lower', { ignoreProperties: ['text-rendering'], }, ], - 'declaration-no-important': true, - 'font-family-name-quotes': 'always-unless-keyword', - 'font-weight-notation': 'numeric', - 'color-named': 'never', - 'alpha-value-notation': 'number', - 'keyframe-selector-notation': 'percentage', - 'no-unknown-animations': true, - 'time-min-milliseconds': [ - 100, - { - ignore: ['delay'], - }, - ], - 'scss/partial-no-import': true, + 'scss/at-each-key-value-single-line': true, + 'scss/at-function-named-arguments': 'never', + 'scss/at-mixin-named-arguments': 'never', 'scss/at-root-no-redundant': true, 'scss/at-use-no-redundant-alias': true, - 'scss/selector-no-redundant-nesting-selector': true, + 'scss/comment-no-loud': true, + 'scss/declaration-nested-properties': 'never', + 'scss/dimension-no-non-numeric-values': true, 'scss/dollar-variable-colon-newline-after': 'always-multi-line', 'scss/dollar-variable-no-namespaced-assignment': true, - 'scss/media-feature-value-dollar-variable': 'always', - 'scss/no-duplicate-dollar-variables': true, - 'scss/at-function-named-arguments': 'never', - 'scss/function-color-relative': true, - 'scss/at-mixin-named-arguments': 'never', - 'scss/comment-no-loud': true, 'scss/double-slash-comment-inline': 'never', - 'scss/at-each-key-value-single-line': true, - 'scss/dimension-no-non-numeric-values': true, + 'scss/function-color-relative': true, 'scss/map-keys-quotes': 'always', - 'scss/declaration-nested-properties': 'never', + 'scss/media-feature-value-dollar-variable': 'always', + 'scss/no-duplicate-dollar-variables': true, + 'scss/partial-no-import': true, 'scss/property-no-unknown': true, + 'scss/selector-no-redundant-nesting-selector': true, 'plugin/no-low-performance-animation-properties': true, 'plugin/use-defensive-css': [ true, diff --git a/package.json b/package.json index 3569eaa..727fd6d 100644 --- a/package.json +++ b/package.json @@ -2,26 +2,26 @@ "type": "module", "exports": "./index.js", "author": "Archoleat", - "name": "stylelint-config-archoleat-scss", + "name": "@archoleat/stylelint-config-extended-scss", "description": "Extended config for Stylelint with property sorting", "version": "1.0.0", "license": "MIT", "keywords": [ "archoleat-scss", - "stylelint-config-archoleat-scss", + "stylelint-config-extended-scss", "archoleat-stylelint-scss", "archoleat-stylelint", "archoleat", "scss", "stylelint" ], - "homepage": "https://github.com/Archoleat/stylelint-config-archoleat-scss#readme", + "homepage": "https://github.com/Archoleat/stylelint-config-extended-scss#readme", "repository": { "type": "git", - "url": "https://github.com/Archoleat/stylelint-config-archoleat-scss.git" + "url": "https://github.com/Archoleat/stylelint-config-extended-scss.git" }, "bugs": { - "url": "https://github.com/Archoleat/stylelint-config-archoleat-scss/issues" + "url": "https://github.com/Archoleat/stylelint-config-extended-scss/issues" }, "scripts": { "init": "npm i && husky && git submodule init && git submodule update", diff --git a/utils/deprecated.js b/utils/deprecated.js new file mode 100644 index 0000000..84e456d --- /dev/null +++ b/utils/deprecated.js @@ -0,0 +1,73 @@ +// Copyright (c) 2024 Archoleat + +const deprecated = { + property: { + // Position + float: 'float', + top: 'top', + right: 'right', + bottom: 'bottom', + left: 'left', + // Overflow + overflowY: 'overflow-y', + overflowX: 'overflow-x', + // Margin + marginTop: 'margin-top', + marginRight: 'margin-right', + marginBottom: 'margin-bottom', + marginLeft: 'margin-left', + // Border + borderHeight: 'border-height', + borderWidth: 'border-width', + borderTop: 'border-top', + borderTopLeftRadius: 'border-top-left-radius', + borderTopRightRadius: 'border-top-right-radius', + borderTopWidth: 'border-top-width', + borderTopStyle: 'border-top-style', + borderTopColor: 'border-top-color', + borderRight: 'border-right', + borderRightWidth: 'border-right-width', + borderRightStyle: 'border-right-style', + borderRightColor: 'border-right-color', + borderBottom: 'border-bottom', + borderBottomLeftRadius: 'border-bottom-left-radius', + borderBottomRightRadius: 'border-bottom-right-radius', + borderBottomWidth: 'border-bottom-width', + borderBottomStyle: 'border-bottom-style', + borderBottomColor: 'border-bottom-color', + borderLeft: 'border-left', + borderLeftWidth: 'border-left-width', + borderLeftStyle: 'border-left-style', + borderLeftColor: 'border-left-color', + // Sizes + height: 'height', + minHeight: 'min-height', + maxHeight: 'max-height', + width: 'width', + minWidth: 'min-width', + maxWidth: 'max-width', + // Padding + paddingTop: 'padding-top', + paddingRight: 'padding-right', + paddingBottom: 'padding-bottom', + paddingLeft: 'padding-left', + // Contain + containIntrinsicHeight: 'contain-intrinsic-height', + containIntrinsicWidth: 'contain-intrinsic-width', + // Overscroll + overscrollBehaviorY: 'overscroll-behavior-y', + overscrollBehaviorX: 'overscroll-behavior-x', + // Scroll Margin + scrollMarginTop: 'scroll-margin-top', + scrollMarginRight: 'scroll-margin-right', + scrollMarginBottom: 'scroll-margin-bottom', + scrollMarginLeft: 'scroll-margin-left', + // Scroll Padding + scrollPaddingTop: 'scroll-padding-top', + scrollPaddingRight: 'scroll-padding-right', + scrollPaddingBottom: 'scroll-padding-bottom', + scrollPaddingLeft: 'scroll-padding-left', + }, +}; + +export default deprecated;