Skip to content

Commit

Permalink
chore(deps): inline rational order plugin for stylelint (#459)
Browse files Browse the repository at this point in the history
  • Loading branch information
@wass3r
wass3r authored Oct 18, 2021
1 parent 16da6ae commit f361401
Show file tree
Hide file tree
Showing 12 changed files with 489 additions and 2,695 deletions.
307 changes: 300 additions & 7 deletions .stylelintrc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ module.exports = {
ignoreFiles: ['src/scss/_reset.scss'],
extends: [
'stylelint-config-recommended-scss',
'stylelint-config-rational-order',
'stylelint-a11y/recommended',
'stylelint-config-prettier',
],
Expand All @@ -19,6 +18,7 @@ module.exports = {
'stylelint-high-performance-animation',
'stylelint-declaration-block-no-ignored-properties',
'stylelint-declaration-strict-value',
'stylelint-order',
],
rules: {
'color-named': 'never',
Expand Down Expand Up @@ -59,6 +59,305 @@ module.exports = {
],
'selector-no-vendor-prefix': true,
'selector-no-qualifying-type': [true, { ignore: ['attribute', 'class'] }],
'property-no-unknown': [
true,
{
ignoreProperties: [
'composes',
'@import',
'@extend',
'@mixin',
'@at-root',
],
},
],
// inlining https://github.com/constverum/stylelint-config-rational-order
// since the plugin is unmaintained and now has dependencies with vulns
//
// what is the order?
// special
// positioning
// boxmodel
// typography
// visual
// animation
// misc
//
// why?
// https://dev.to/thekashey/happy-potter-and-the-order-of-css-5ec
// https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685
'order/properties-order': [
{
groupName: 'special',
emptyLineBefore: 'always',
noEmptyLineBetween: true,
properties: ['composes', '@import', '@extend', '@mixin', '@at-root'],
},
{
groupName: 'position',
emptyLineBefore: 'always',
noEmptyLineBetween: true,
properties: ['position', 'top', 'right', 'bottom', 'left', 'z-index'],
},
{
groupName: 'box-model',
emptyLineBefore: 'always',
noEmptyLineBetween: true,
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',
],
},
{
groupName: 'typography',
emptyLineBefore: 'always',
noEmptyLineBetween: true,
properties: [
'color',
'font',
'font-weight',
'font-size',
'font-family',
'font-style',
'font-variant',
'font-size-adjust',
'font-stretch',
'font-effect',
'font-emphasize',
'font-emphasize-position',
'font-emphasize-style',
'font-smooth',
'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-orientation',
'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',
'src',
],
},
{
groupName: 'visual',
emptyLineBefore: 'always',
noEmptyLineBetween: true,
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',
],
},
{
groupName: 'animation',
emptyLineBefore: 'always',
noEmptyLineBetween: true,
properties: [
'transition',
'transition-delay',
'transition-timing-function',
'transition-duration',
'transition-property',
'animation',
'animation-name',
'animation-duration',
'animation-play-state',
'animation-timing-function',
'animation-delay',
'animation-iteration-count',
'animation-direction',
'animation-fill-mode',
],
},
{
groupName: 'misc',
emptyLineBefore: 'always',
noEmptyLineBetween: true,
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',
'fill',
'fill-rule',
'clip-rule',
'stroke',
],
},
],
'scss/selector-no-redundant-nesting-selector': true,
'scss/at-extend-no-missing-placeholder': true,
'color-format/format': {
Expand All @@ -70,12 +369,6 @@ module.exports = {
{ ignoreProperties: ['color', 'background-color'] },
],
'plugin/declaration-block-no-ignored-properties': true,
'plugin/rational-order': [
true,
{
'empty-line-between-groups': true,
},
],
// we handle prefers-reduced-motion this globally so it's ok
// if affected css makes its way in
'a11y/media-prefers-reduced-motion': null,
Expand Down
Loading

0 comments on commit f361401

Please sign in to comment.