diff --git a/README.md b/README.md index cc3721d..b05220e 100644 --- a/README.md +++ b/README.md @@ -38,48 +38,6 @@ export default defineConfig({ }); ``` -### Add the Space Between Logical Groups - -If you want to add spaces between logical groups, -add this rule to your **Stylelint** config: - -```js -import { defineConfig } from 'stylelint-define-config'; - -export default defineConfig({ - extends: '@archoleat/stylelint-config-extended-scss', - rules: { - 'declaration-empty-line-before': null, - }, -}); -``` - -#### Before - -```scss -.popup { - opacity: 0; - position: fixed; - inset: 0; - z-index: 1; - pointer-events: none; -} -``` - -#### After - -```scss -.popup { - opacity: 0; - - position: fixed; - inset: 0; - z-index: 1; - - pointer-events: none; -} -``` - ## This Config ### Extends @@ -149,6 +107,9 @@ This is a list of the lints turned on in this configuration. Rule enabled. - Disallow the use of `@debug`. +- [`at-rule-empty-line-before`](https://stylelint.io/user-guide/rules/at-rule-empty-line-before): + Rule enabled. + ##### Case - [`value-keyword-case`](https://stylelint.io/user-guide/rules/value-keyword-case): @@ -166,6 +127,9 @@ This is a list of the lints turned on in this configuration. - [`declaration-no-important`](https://stylelint.io/user-guide/rules/declaration-no-important): Rule enabled. +- [`declaration-empty-line-before`](https://stylelint.io/user-guide/rules/declaration-empty-line-before): + Rule enabled. + ##### Descending - [`no-descending-specificity`](https://stylelint.io/user-guide/rules/no-descending-specificity): diff --git a/specs/utils/logical-group.spec.ts b/specs/utils/properties-group.spec.ts similarity index 77% rename from specs/utils/logical-group.spec.ts rename to specs/utils/properties-group.spec.ts index e78208d..35ee067 100644 --- a/specs/utils/logical-group.spec.ts +++ b/specs/utils/properties-group.spec.ts @@ -1,14 +1,14 @@ import { describe, expect, test as spec } from 'vitest'; -import { createLogicalGroup } from '#utils'; +import { propertiesGroup } from '#utils'; -describe('Create Logical Group', async () => { +describe('Create Properties Group', async () => { spec( 'should create an object with (groupName: String, properties: [])', async () => { const properties = ['display', 'z-index']; - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Test Group Name', properties, }).then((parameters) => { diff --git a/src/config/properties/order.ts b/src/config/properties/order.ts index a4e663a..1e93163 100644 --- a/src/config/properties/order.ts +++ b/src/config/properties/order.ts @@ -1,6 +1,6 @@ import { selectors } from '@archoleat/reglib'; -import { createAtRule, createLogicalGroup, createRule } from '#utils'; +import { createAtRule, createRule, propertiesGroup } from '#utils'; import { experimental } from './experimental.ts'; import { limitedAvailability } from './limited-availability.ts'; @@ -20,9 +20,13 @@ const nonStandardProperty = nonStandard.property; const warningProperty = warning.property; const propertiesOrder = { 'order/order': [ - 'custom-properties', + await createAtRule({ name: 'forward' }), + await createAtRule({ name: 'use' }), 'dollar-variables', + 'custom-properties', + await createAtRule({ name: 'function' }), await createAtRule({ name: 'include' }), + await createAtRule({ name: 'extend' }), 'declarations', await createRule({ selector: '::selection' }), await createRule({ selector: '::backdrop' }), @@ -184,12 +188,12 @@ const propertiesOrder = { await createRule({ selector: selectors.child.CLASS_REGEX }), 'rules', await createAtRule({ name: 'include', hasBlock: true }), - 'at-rules', + await createAtRule({ name: 'media', hasBlock: true }), ], 'order/properties-order': [ [ - await createLogicalGroup({ groupName: 'All', properties: ['all', 'page'] }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'All', properties: ['all', 'page'] }), + await propertiesGroup({ groupName: 'Print', properties: [ 'break-before', @@ -202,15 +206,15 @@ const propertiesOrder = { 'widows', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Content', properties: ['content', 'quotes'], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Counter', properties: ['counter-set', 'counter-increment', 'counter-reset'], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'List', properties: [ 'list-style', @@ -219,11 +223,11 @@ const propertiesOrder = { 'list-style-image', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Marker', properties: ['marker', 'marker-start', 'marker-mid', 'marker-end'], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Display', properties: [ 'display', @@ -235,7 +239,7 @@ const propertiesOrder = { experimentalProperty.contentVisibility, ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Position', properties: [ 'position', @@ -261,7 +265,7 @@ const propertiesOrder = { 'z-index', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Outline', properties: [ 'outline', @@ -271,11 +275,11 @@ const propertiesOrder = { 'outline-offset', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Shape', properties: ['shape-outside', 'shape-margin', 'shape-image-threshold'], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Mask', properties: [ 'mask', @@ -297,7 +301,7 @@ const propertiesOrder = { 'mask-composite', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Margin', properties: [ 'margin', @@ -310,7 +314,7 @@ const propertiesOrder = { experimentalProperty.marginTrim, ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Border', properties: [ 'border', @@ -354,19 +358,19 @@ const propertiesOrder = { 'border-image-repeat', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Box', properties: ['box-sizing', 'box-decoration-break', 'box-shadow'], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Object', properties: ['object-fit', 'object-position'], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'container', properties: ['container', 'container-name', 'container-type'], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Contain', properties: [ 'contain', @@ -375,7 +379,7 @@ const propertiesOrder = { 'contain-intrinsic-inline-size', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Size', properties: [ 'aspect-ratio', @@ -388,7 +392,7 @@ const propertiesOrder = { experimentalProperty.fieldSizing, ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Padding', properties: [ 'padding', @@ -400,7 +404,7 @@ const propertiesOrder = { 'padding-inline-end', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Overflow', properties: [ 'overflow', @@ -411,7 +415,7 @@ const propertiesOrder = { 'overflow-anchor', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Overscroll', properties: [ 'overscroll-behavior', @@ -419,7 +423,7 @@ const propertiesOrder = { 'overscroll-behavior-inline', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Scroll', properties: [ 'scroll-margin', @@ -445,11 +449,11 @@ const propertiesOrder = { experimentalProperty.scroll.timelineAxis, ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Scrollbar', properties: ['scrollbar-gutter', 'scrollbar-width', 'scrollbar-color'], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Columns', properties: [ 'columns', @@ -463,7 +467,7 @@ const propertiesOrder = { 'column-rule-color', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Grid', properties: [ 'grid', @@ -487,7 +491,7 @@ const propertiesOrder = { experimentalProperty.masonryAutoFlow, ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Flex', properties: [ 'flex', @@ -500,7 +504,7 @@ const propertiesOrder = { 'order', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Table', properties: [ 'table-layout', @@ -511,7 +515,7 @@ const propertiesOrder = { 'caption-side', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Alignment', properties: [ 'place-content', @@ -527,7 +531,7 @@ const propertiesOrder = { 'justify-self', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Image', properties: [ 'image-orientation', @@ -535,7 +539,7 @@ const propertiesOrder = { experimentalProperty.imageResolution, ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Typography', properties: [ 'unicode-bidi', @@ -561,7 +565,7 @@ const propertiesOrder = { 'hanging-punctuation', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Text', properties: [ 'text-overflow', @@ -595,7 +599,7 @@ const propertiesOrder = { 'text-underline-offset', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Font', properties: [ 'src', @@ -629,7 +633,7 @@ const propertiesOrder = { 'font-variation-settings', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Color', properties: [ 'color-scheme', @@ -641,7 +645,7 @@ const propertiesOrder = { 'print-color-adjust', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Background', properties: [ 'background', @@ -658,7 +662,7 @@ const propertiesOrder = { 'background-blend-mode', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Filter', properties: [ experimentalProperty.overlay, @@ -668,7 +672,7 @@ const propertiesOrder = { 'clip-path', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Transform', properties: [ 'transform', @@ -683,7 +687,7 @@ const propertiesOrder = { 'perspective-origin', ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Transition', properties: [ 'transition', @@ -694,7 +698,7 @@ const propertiesOrder = { limitedAvailabilityProperty.transitionBehavior, ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Animation', properties: [ 'animation', @@ -714,7 +718,7 @@ const propertiesOrder = { experimentalProperty.animation.rangeEnd, ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'View Timeline', properties: [ experimentalProperty.view.timeline, @@ -724,7 +728,7 @@ const propertiesOrder = { experimentalProperty.view.transitionName, ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Actions', properties: [ 'cursor', @@ -734,22 +738,23 @@ const propertiesOrder = { nonStandardProperty.zoom, ], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'User Actions', properties: ['user-select', 'user-zoom'], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'Math', properties: ['math-depth', experimentalProperty.mathShift, 'math-style'], }), - await createLogicalGroup({ + await propertiesGroup({ groupName: 'SVG', properties: ['fill', 'stroke', 'paint-order'], }), ], { - emptyLineBeforeUnspecified: 'threshold', - emptyLineMinimumPropertyThreshold: 3, + severity: 'warning', + emptyLineBeforeUnspecified: 'always', + emptyLineMinimumPropertyThreshold: 5, unspecified: 'bottomAlphabetical', }, ], diff --git a/src/config/rules/css.ts b/src/config/rules/css.ts index 950134e..a69c5e0 100644 --- a/src/config/rules/css.ts +++ b/src/config/rules/css.ts @@ -8,8 +8,27 @@ const MODIFIER = selectors.bem.MODIFIER_REGEX; const CSSRules = { 'at-rule-disallowed-list': ['debug'], + 'at-rule-empty-line-before': [ + 'always', + { + ignore: [ + 'first-nested', + 'blockless-after-same-name-blockless', + 'after-comment', + ], + severity: 'warning', + }, + ], 'color-named': 'never', 'declaration-no-important': true, + 'declaration-empty-line-before': [ + 'always', + { + except: ['first-nested'], + ignore: ['after-declaration', 'after-comment', 'inside-single-line-block'], + severity: 'warning', + }, + ], 'font-weight-notation': 'numeric', 'function-url-no-scheme-relative': true, 'keyframe-selector-notation': 'percentage', diff --git a/src/config/rules/scss.ts b/src/config/rules/scss.ts index 1b99e2b..ade577f 100644 --- a/src/config/rules/scss.ts +++ b/src/config/rules/scss.ts @@ -10,6 +10,7 @@ const SCSSRules = { { except: ['last-nested', 'before-comment', 'before-dollar-variable'], ignore: ['before-comment', 'inside-single-line-block'], + severity: 'warning', }, ], 'scss/dollar-variable-no-namespaced-assignment': true, diff --git a/src/index.ts b/src/index.ts index 5d09eb3..0e5ecf0 100644 --- a/src/index.ts +++ b/src/index.ts @@ -14,8 +14,8 @@ export default { ], rules: { ...plugins, - ...propertiesOrder, ...CSSRules, ...SCSSRules, + ...propertiesOrder, }, }; diff --git a/src/utils/index.ts b/src/utils/index.ts index 43a8901..a141141 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,3 +1,3 @@ export { createAtRule } from './at-rule/index.ts'; -export { createLogicalGroup } from './logical-group/index.ts'; +export { propertiesGroup } from './properties-group/index.ts'; export { createRule } from './rule/index.ts'; diff --git a/src/utils/logical-group/index.ts b/src/utils/properties-group/index.ts similarity index 71% rename from src/utils/logical-group/index.ts rename to src/utils/properties-group/index.ts index 15b135a..5e51ebd 100644 --- a/src/utils/logical-group/index.ts +++ b/src/utils/properties-group/index.ts @@ -1,6 +1,6 @@ import type { Parameters } from './parameters.ts'; -const createLogicalGroup = async (parameters: Parameters) => { +const propertiesGroup = async (parameters: Parameters) => { const { groupName, properties } = parameters; return { @@ -12,4 +12,4 @@ const createLogicalGroup = async (parameters: Parameters) => { }; }; -export { createLogicalGroup }; +export { propertiesGroup }; diff --git a/src/utils/logical-group/parameters.ts b/src/utils/properties-group/parameters.ts similarity index 100% rename from src/utils/logical-group/parameters.ts rename to src/utils/properties-group/parameters.ts