@aleph/stylelint-config
Version:
Aleph's StyleLint configuration for CSS, SCSS, and styled-components
364 lines (324 loc) • 9.37 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
*
* Comprehensive StyleLint configuration for CSS, SCSS, and styled-components.
* Based on standard configs with Aleph-specific customizations.
*/
module.exports = {
extends: [
'stylelint-config-standard',
'stylelint-config-standard-scss',
],
ignoreFiles: ['**/*.js', 'node_modules'],
plugins: [
'stylelint-order',
'stylelint-scss',
],
rules: {
// === Color Rules ===
'color-hex-length': 'short',
'color-named': 'never',
'color-no-invalid-hex': true,
// === Font Rules ===
'font-family-name-quotes': 'always-where-recommended',
'font-family-no-duplicate-names': true,
'font-family-no-missing-generic-family-keyword': true,
'font-weight-notation': 'numeric',
// === Function Rules ===
'function-calc-no-unspaced-operator': true,
'function-linear-gradient-no-nonstandard-direction': true,
'function-name-case': 'lower',
'function-url-quotes': 'always',
// === Number Rules ===
'number-max-precision': 4,
// === String Rules ===
'string-no-newline': true,
// === Length Rules ===
'length-zero-no-unit': true,
// === Time Rules ===
'time-min-milliseconds': 100,
// === Unit Rules ===
'unit-no-unknown': true,
// === Value Rules ===
'value-keyword-case': null, // Allow mixed case for CSS-in-JS compatibility
'value-no-vendor-prefix': true,
// === Custom Property Rules ===
'custom-property-empty-line-before': null, // Allow flexible spacing
// === Property Rules ===
'property-no-unknown': true,
'property-no-vendor-prefix': null, // Allow vendor prefixes when needed
// === Keyframe Rules ===
'keyframe-declaration-no-important': true,
// === Declaration Rules ===
'declaration-empty-line-before': null, // Allow flexible spacing
'declaration-no-important': true,
// === Declaration Block Rules ===
'declaration-block-no-duplicate-properties': [
true,
{
ignore: ['consecutive-duplicates-with-different-values'],
},
],
'declaration-block-no-shorthand-property-overrides': true,
'declaration-block-single-line-max-declarations': 1,
// === Block Rules ===
'block-no-empty': true,
// === Selector Rules ===
'selector-max-compound-selectors': 4,
'selector-max-id': 0,
'selector-max-specificity': '0,4,0',
'selector-max-universal': 1,
'selector-no-qualifying-type': [
true,
{
ignore: ['attribute', 'class'],
},
],
'selector-no-vendor-prefix': null, // Allow vendor prefixes for legacy support
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['global'],
},
],
'selector-pseudo-element-colon-notation': 'double',
'selector-pseudo-element-no-unknown': true,
'selector-type-no-unknown': true,
'selector-class-pattern': null, // Allow flexible class naming
// === Media Rules ===
'media-feature-name-no-unknown': true,
'media-feature-name-no-vendor-prefix': true,
// === At-Rule Rules ===
'at-rule-empty-line-before': [
'always',
{
except: ['blockless-after-same-name-blockless', 'first-nested'],
ignore: ['after-comment'],
ignoreAtRules: ['import', 'include', 'else'],
},
],
'at-rule-no-unknown': null, // Handled by scss/at-rule-no-unknown
'at-rule-no-vendor-prefix': true,
// === Comment Rules ===
'comment-no-empty': true,
// === General Rules ===
'no-duplicate-at-import-rules': true,
'no-duplicate-selectors': true,
'no-empty-source': true,
'no-invalid-double-slash-comments': true,
'no-invalid-position-at-import-rule': null, // Allow imports in SCSS partials
'declaration-block-no-redundant-longhand-properties': [
true,
{
ignoreShorthands: ['grid-column'],
},
],
// === SCSS Specific Rules ===
'scss/at-extend-no-missing-placeholder': true,
'scss/at-function-pattern': null, // Allow flexible function naming
'scss/load-no-partial-leading-underscore': true,
'scss/at-import-partial-extension-disallowed-list': ['scss'],
'scss/at-mixin-pattern': null, // Allow flexible mixin naming
'scss/at-rule-no-unknown': true,
'scss/dollar-variable-pattern': [
'^(-?[a-z][a-z0-9]*)(-[a-z0-9]+)*$',
{
ignore: 'local',
message: 'Expected variable to be kebab-case',
},
],
'scss/percent-placeholder-pattern': '^[a-z]+([a-z0-9-]+[a-z0-9]+)?$',
'scss/selector-no-redundant-nesting-selector': true,
'scss/double-slash-comment-empty-line-before': null,
'scss/operator-no-newline-before': null,
'scss/operator-no-newline-after': null,
'scss/operator-no-unspaced': null,
'scss/at-mixin-argumentless-call-parentheses': null,
// === Property Order Rules ===
'order/order': [
'custom-properties',
'declarations',
],
'order/properties-order': [
[
// Box Model & Display
'display',
'position',
'top',
'right',
'bottom',
'left',
// Flexbox
'flex',
'flex-basis',
'flex-direction',
'flex-flow',
'flex-grow',
'flex-shrink',
'flex-wrap',
'align-content',
'align-items',
'align-self',
'justify-content',
'order',
// Dimensions
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
// Spacing
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
// Layout
'float',
'clear',
// Columns
'columns',
'column-gap',
'column-fill',
'column-rule',
'column-span',
'column-count',
'column-width',
// Transform & Transition
'transform',
'transform-box',
'transform-origin',
'transform-style',
'transition',
'transition-delay',
'transition-duration',
'transition-property',
'transition-timing-function',
// Border
'border',
'border-top',
'border-right',
'border-bottom',
'border-left',
'border-width',
'border-top-width',
'border-right-width',
'border-bottom-width',
'border-left-width',
'border-style',
'border-top-style',
'border-right-style',
'border-bottom-style',
'border-left-style',
'border-radius',
'border-top-left-radius',
'border-top-right-radius',
'border-bottom-left-radius',
'border-bottom-right-radius',
'border-color',
'border-top-color',
'border-right-color',
'border-bottom-color',
'border-left-color',
// 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',
// Typography
'color',
'font',
'font-family',
'font-size',
'font-smoothing',
'font-style',
'font-variant',
'font-weight',
'letter-spacing',
'line-height',
'list-style',
'line-spacing',
'text-align',
'text-decoration',
'text-indent',
'text-overflow',
'text-rendering',
'text-shadow',
'text-transform',
'text-wrap',
'white-space',
'word-spacing',
// Other
'border-collapse',
'border-spacing',
'box-shadow',
'caption-side',
'content',
'cursor',
'empty-cells',
'opacity',
'overflow',
'quotes',
'speak',
'table-layout',
'vertical-align',
'visibility',
'z-index',
],
{ unspecified: 'bottom' },
],
// === Aleph-Specific Customizations ===
// Allow vendor prefixes in values for legacy browser support
'value-no-vendor-prefix': [
true,
{
ignoreValues: ['grab', 'grabbing'],
},
],
// Allow specific pseudo-classes for modern CSS
'selector-pseudo-class-no-unknown': [
true,
{
ignorePseudoClasses: ['global', 'local'],
},
],
// Allow specific at-rules for CSS modules and styled-components
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'extends',
'ignores',
'include',
'mixin',
'if',
'else',
'each',
'for',
'function',
'return',
],
},
],
},
};