@minna-ui/stylelint-config
Version:
Stylelint config preset for use in Minna UI projects.
444 lines (438 loc) • 13.3 kB
JavaScript
/**
* Stylelint config preset for Minna UI projects.
*
* @see https://stylelint.io/user-guide/configuration/
*/
// TODO: Write tests for any particularly custom rules or rules with regex
/* eslint-disable @typescript-eslint/no-magic-numbers */
;
/** @type {import('stylelint').Configuration} */
module.exports = {
extends: ['stylelint-config-standard', 'stylelint-config-css-modules'],
plugins: [
'stylelint-a11y',
'stylelint-csstree-validator',
'stylelint-declaration-strict-value',
'stylelint-high-performance-animation',
'stylelint-order',
],
reportNeedlessDisables: true,
rules: {
'a11y/content-property-no-static-value': [true, { severity: 'warning' }],
'a11y/font-size-is-readable': [true, { severity: 'warning' }],
'a11y/line-height-is-vertical-rhythmed': [true, { severity: 'warning' }],
'a11y/media-prefers-reduced-motion': null, // Not useful
'a11y/no-display-none': [true, { severity: 'warning' }],
'a11y/no-obsolete-attribute': [true, { severity: 'warning' }],
'a11y/no-obsolete-element': [true, { severity: 'warning' }],
'a11y/no-outline-none': true,
'a11y/no-spread-text': [true, { severity: 'warning' }],
'a11y/no-text-align-justify': [true, { severity: 'warning' }],
'a11y/selector-pseudo-class-focus': true,
'at-rule-no-unknown': [
true,
{
ignoreAtRules: [
'each',
'else',
'if',
'include', // TODO: Remove once we switch over to the new PostCSS stack
'mixin',
'use',
],
},
],
'at-rule-no-vendor-prefix': true,
'at-rule-semicolon-space-before': 'never',
'color-named': 'never',
'color-no-hex': true, // Only rgb() or rgba()
'comment-empty-line-before': null, // Not helpful for rapid development
'csstree/validator': {
ignore: [
// TODO: Remove once CSS Fonts Module Level 4 is supported by CSSTree
'font-display',
// TODO: Remove once CSS Text Module Level 4 is supported by CSSTree
'hyphenate-limit-chars',
'hyphenate-limit-lines',
'hyphenate-limit-last',
'hyphenate-limit-zone',
],
},
'declaration-block-semicolon-newline-before': 'never-multi-line',
'declaration-block-semicolon-space-after': 'always-single-line',
'declaration-no-important': true,
'font-family-name-quotes': 'always-where-recommended',
'font-weight-notation': 'numeric',
'function-blacklist': ['hsl', 'hsla'], // Only rgb() or rgba()
// FIXME: Enable this rule once it supports regular $ vars or create our
// own copy of the rule - https://github.com/stylelint/stylelint/blob/master/lib/rules/function-calc-no-invalid/index.js
'function-calc-no-invalid': null,
'function-url-no-scheme-relative': true,
'function-url-quotes': 'always',
'max-line-length': [
80, // Same as prettier
{
ignorePattern: ['/https?:\\/\\/[0-9,a-z]*.*/i', '/stylelint-disable/'],
},
],
'media-feature-name-no-vendor-prefix': true,
'media-feature-parentheses-space-inside': 'never',
'media-feature-range-operator-space-after': 'always',
'media-feature-range-operator-space-before': 'always',
'no-descending-specificity': true,
'no-duplicate-selectors': true,
'plugin/no-low-performance-animation-properties': true,
'property-no-unknown': true,
'property-no-vendor-prefix': true,
'rule-empty-line-before': [
'always',
{
except: ['after-single-line-comment', 'first-nested'],
ignore: ['after-comment'],
},
],
// Enforce the use of variables or functions for common values
'scale-unlimited/declaration-strict-value': [
['/color/', 'fill', 'font-size', 'stroke', 'z-index'],
{
ignoreKeywords: {
'/color/': ['currentColor', 'inherit', 'transparent', 'unset'],
fill: ['currentColor', 'inherit', 'none', 'transparent', 'unset'],
'font-size': ['inherit', 'initial', 'unset'],
stroke: ['currentColor', 'inherit', 'none', 'unset'],
'z-index': [-1, 0, 1, 'auto', 'initial'],
},
},
],
'selector-attribute-quotes': 'always',
'selector-list-comma-newline-before': 'never-multi-line',
'selector-list-comma-space-after': 'always-single-line',
'selector-list-comma-space-before': 'never-single-line',
'selector-max-attribute': 2,
'selector-max-class': 4,
'selector-max-combinators': 3,
'selector-max-compound-selectors': 4,
'selector-max-id': 0,
'selector-max-type': 2,
'selector-max-universal': 0,
'selector-no-qualifying-type': [true, { ignore: ['attribute'] }],
'selector-no-vendor-prefix': true,
'string-quotes': 'single',
'value-keyword-case': ['lower', { ignoreProperties: '/font/' }],
'value-list-comma-newline-after': 'always-multi-line',
'value-list-comma-newline-before': 'never-multi-line',
'value-no-vendor-prefix': true,
// eslint-disable-next-line sort-keys
'order/order': [
{ name: 'import', type: 'at-rule' },
'dollar-variables',
'custom-properties',
{ hasBlock: false, type: 'at-rule' },
'declarations',
{ name: 'if', type: 'at-rule' },
'rules',
{ hasBlock: true, type: 'at-rule' },
],
// Similar order to `stylelint-config-rational-order` but with
// customisations (mostly around fonts)
// @see https://github.com/constverum/stylelint-config-rational-order
'order/properties-order': [
{
emptyLineBefore: 'never',
groupName: 'position',
properties: ['position', 'top', 'right', 'bottom', 'left', 'z-index'],
},
{
emptyLineBefore: 'never',
groupName: 'box model & layout',
properties: [
'display',
'flex',
'flex-basis',
'flex-direction',
'flex-flow',
'flex-grow',
'flex-shrink',
'flex-wrap',
'grid',
'grid-area',
'grid-auto-rows',
'grid-auto-columns',
'grid-auto-flow',
'grid-gap',
'grid-row',
'grid-row-start',
'grid-row-end',
'grid-row-gap',
'grid-column',
'grid-column-start',
'grid-column-end',
'grid-column-gap',
'grid-template',
'grid-template-areas',
'grid-template-rows',
'grid-template-columns',
'gap',
'align-content',
'align-items',
'align-self',
'justify-content',
'justify-items',
'justify-self',
'order',
'float',
'clear',
'box-sizing',
'width',
'min-width',
'max-width',
'height',
'min-height',
'max-height',
'margin',
'margin-top',
'margin-right',
'margin-bottom',
'margin-left',
'padding',
'padding-top',
'padding-right',
'padding-bottom',
'padding-left',
'object-fit',
'object-position',
'overflow',
'overflow-x',
'overflow-y',
'-webkit-overflow-scrolling',
],
},
{
emptyLineBefore: 'never',
groupName: 'typography',
properties: [
'color',
'src',
'font',
'font-family',
'font-size',
'font-style',
'font-weight',
'font-variant',
'font-size-adjust',
'font-stretch',
'font-effect',
'font-emphasize',
'font-emphasize-position',
'font-emphasize-style',
'font-smooth',
'font-display',
'line-height',
'direction',
'letter-spacing',
'white-space',
'text-align',
'text-align-last',
'text-transform',
'text-decoration',
'text-emphasis',
'text-emphasis-color',
'text-emphasis-style',
'text-emphasis-position',
'text-indent',
'text-justify',
'text-outline',
'text-wrap',
'text-overflow',
'text-overflow-ellipsis',
'text-overflow-mode',
'text-shadow',
'vertical-align',
'word-wrap',
'word-break',
'word-spacing',
'overflow-wrap',
'tab-size',
'hyphens',
'unicode-bidi',
'columns',
'column-count',
'column-fill',
'column-gap',
'column-rule',
'column-rule-color',
'column-rule-style',
'column-rule-width',
'column-span',
'column-width',
'page-break-after',
'page-break-before',
'page-break-inside',
],
},
{
emptyLineBefore: 'never',
groupName: 'visual',
properties: [
'list-style',
'list-style-position',
'list-style-type',
'list-style-image',
'table-layout',
'empty-cells',
'caption-side',
'background',
'background-color',
'background-image',
'background-repeat',
'background-position',
'background-position-x',
'background-position-y',
'background-size',
'background-clip',
'background-origin',
'background-attachment',
'background-blend-mode',
'border',
'border-color',
'border-style',
'border-width',
'border-top',
'border-top-color',
'border-top-width',
'border-top-style',
'border-right',
'border-right-color',
'border-right-width',
'border-right-style',
'border-bottom',
'border-bottom-color',
'border-bottom-width',
'border-bottom-style',
'border-left',
'border-left-color',
'border-left-width',
'border-left-style',
'border-radius',
'border-top-left-radius',
'border-top-right-radius',
'border-bottom-right-radius',
'border-bottom-left-radius',
'border-image',
'border-image-source',
'border-image-slice',
'border-image-width',
'border-image-outset',
'border-image-repeat',
'border-collapse',
'border-spacing',
'outline',
'outline-width',
'outline-style',
'outline-color',
'outline-offset',
'box-shadow',
'box-decoration-break',
'transform',
'transform-origin',
'transform-style',
'backface-visibility',
'perspective',
'perspective-origin',
'visibility',
'cursor',
'opacity',
'filter',
'isolation',
'backdrop-filter',
'mix-blend-mode',
'-ms-interpolation-mode',
],
},
{
emptyLineBefore: 'never',
groupName: 'SVG presentation',
properties: [
'alignment-baseline',
'baseline-shift',
'dominant-baseline',
'text-anchor',
'writing-mode',
'fill',
'fill-opacity',
'fill-rule',
'stroke',
'stroke-dasharray',
'stroke-dashoffset',
'stroke-linecap',
'stroke-linejoin',
'stroke-miterlimit',
'stroke-opacity',
'stroke-width',
'color-interpolation',
'color-interpolation-filters',
'color-profile',
'color-rendering',
'flood-color',
'flood-opacity',
'image-rendering',
'lighting-color',
'marker-start',
'marker-mid',
'marker-end',
'mask',
'shape-rendering',
'stop-color',
'stop-opacity',
],
},
{
emptyLineBefore: 'never',
groupName: 'animation',
properties: [
'transition',
'transition-delay',
'transition-timing-function',
'transition-duration',
'transition-property',
'transform',
'transform-origin',
'animation',
'animation-name',
'animation-duration',
'animation-play-state',
'animation-timing-function',
'animation-delay',
'animation-iteration-count',
'animation-direction',
'animation-fill-mode',
],
},
{
emptyLineBefore: 'never',
groupName: 'misc.',
properties: [
'appearance',
'content',
'clip',
'clip-path',
'counter-reset',
'counter-increment',
'resize',
'user-select',
'nav-index',
'nav-up',
'nav-right',
'nav-down',
'nav-left',
'pointer-events',
'quotes',
'touch-action',
'will-change',
'zoom',
'clip-rule',
],
},
],
},
};