@aleph/stylelint-config
Version:
Aleph's StyleLint configuration for CSS, SCSS, and styled-components
277 lines (253 loc) • 7.07 kB
JavaScript
/**
* Aleph StyleLint Configuration
*
* This configuration is maintained as part of our documentation system.
* For detailed explanation of rules and rationale, see:
* https://docs.aleph.inc/docs/resources/4devs/standards/code-style-standards
*
* Modern StyleLint configuration for CSS, SCSS, and styled-components.
* Based on latest standard configs with minimal Aleph-specific customizations.
* Updated for StyleLint 16+ and modern CSS features.
*/
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-standard-scss',
],
ignoreFiles: ['**/*.js', 'node_modules'],
plugins: [
'stylelint-order',
'stylelint-scss',
],
rules: {
// === Disabled Rules (Aleph-specific overrides) ===
'declaration-property-value-no-unknown': null,
'no-invalid-position-declaration': null,
'nesting-selector-no-missing-scoping-root': null,
'at-rule-no-unknown': null, // Handled by scss/at-rule-no-unknown
'custom-property-empty-line-before': null,
'declaration-empty-line-before': null,
'no-invalid-position-at-import-rule': null, // Allow imports in SCSS partials
'value-keyword-case': null, // Allow mixed case for CSS-in-JS compatibility
'selector-class-pattern': null, // Allow flexible naming patterns
'scss/at-function-pattern': null, // Override default kebab-case requirement
'scss/at-mixin-pattern': null, // Override default kebab-case requirement
'scss/dollar-variable-pattern': null, // Allow flexible variable naming (camelCase, snake_case, etc.)
'property-no-vendor-prefix': null, // Allow vendor prefixes when needed
'selector-no-vendor-prefix': null, // Allow vendor prefixes when needed
// === Aleph-Specific Constraints ===
'declaration-no-important': true, // Stricter than default - prevent !important
'selector-max-compound-selectors': 4, // Maintainability constraint
'selector-max-id': 0, // No ID selectors
'selector-max-specificity': '0,4,0', // Specificity constraint
'selector-max-universal': 1, // Limit universal selectors
// === Custom Allowances ===
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['global', 'local'], // CSS-in-JS pseudo-classes
},
],
'value-no-vendor-prefix': [
true,
{
ignoreValues: ['grab', 'grabbing'], // Legacy cursor values
},
],
// === Property Order Rules ===
'order/order': [
'custom-properties',
'declarations',
],
'order/properties-order': [
[
// Display & Layout
'display',
'position',
'top',
'right',
'bottom',
'left',
'z-index',
// Grid
'grid',
'grid-area',
'grid-template',
'grid-template-areas',
'grid-template-rows',
'grid-template-columns',
'grid-row',
'grid-row-start',
'grid-row-end',
'grid-column',
'grid-column-start',
'grid-column-end',
'grid-auto-rows',
'grid-auto-columns',
'grid-auto-flow',
'grid-gap',
'grid-row-gap',
'grid-column-gap',
'gap',
'row-gap',
'column-gap',
// Flexbox
'flex',
'flex-basis',
'flex-direction',
'flex-flow',
'flex-grow',
'flex-shrink',
'flex-wrap',
'align-content',
'align-items',
'align-self',
'justify-content',
'justify-items',
'justify-self',
'place-content',
'place-items',
'place-self',
'order',
// Dimensions
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
'aspect-ratio',
// Spacing
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'margin-block',
'margin-block-start',
'margin-block-end',
'margin-inline',
'margin-inline-start',
'margin-inline-end',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'padding-block',
'padding-block-start',
'padding-block-end',
'padding-inline',
'padding-inline-start',
'padding-inline-end',
// Layout Flow
'float',
'clear',
'overflow',
'overflow-x',
'overflow-y',
'overflow-wrap',
// Container Queries
'container',
'container-name',
'container-type',
// Transform & Animation
'transform',
'transform-box',
'transform-origin',
'transform-style',
'transition',
'transition-delay',
'transition-duration',
'transition-property',
'transition-timing-function',
'animation',
'animation-delay',
'animation-duration',
'animation-iteration-count',
'animation-name',
'animation-play-state',
'animation-timing-function',
'animation-fill-mode',
// Border
'border',
'border-top',
'border-right',
'border-bottom',
'border-left',
'border-width',
'border-style',
'border-color',
'border-radius',
'border-image',
// Outline
'outline',
'outline-color',
'outline-offset',
'outline-style',
'outline-width',
// Background
'background',
'background-attachment',
'background-clip',
'background-color',
'background-image',
'background-repeat',
'background-position',
'background-size',
'background-blend-mode',
// Typography
'color',
'font',
'font-family',
'font-size',
'font-weight',
'font-style',
'font-variant',
'font-display',
'letter-spacing',
'line-height',
'text-align',
'text-decoration',
'text-indent',
'text-overflow',
'text-rendering',
'text-shadow',
'text-transform',
'white-space',
'word-spacing',
'word-wrap',
'word-break',
// Lists
'list-style',
'list-style-type',
'list-style-position',
'list-style-image',
// Tables
'table-layout',
'border-collapse',
'border-spacing',
'caption-side',
'empty-cells',
// Visual Effects
'box-shadow',
'filter',
'backdrop-filter',
'opacity',
'visibility',
// Interaction
'cursor',
'pointer-events',
'user-select',
'resize',
// Misc
'content',
'quotes',
'counter-reset',
'counter-increment',
'vertical-align',
],
{ unspecified: 'bottom' },
],
},
};