text: // Copyright (c) 2021 Target Brands, Inc. All rights reserved.
  //
  // Use of this source code is governed by the LICENSE file in this repository.
  
  'use strict';
  
  // https://stylelint.io/user-guide/rules/
  
  module.exports = {
    ignoreFiles: ['src/scss/_reset.scss'],
    extends: [
      'stylelint-config-recommended-scss',
      'stylelint-a11y/recommended',
      'stylelint-config-prettier',
    ],
    plugins: [
      'stylelint-color-format',
      'stylelint-high-performance-animation',
      'stylelint-declaration-block-no-ignored-properties',
      'stylelint-declaration-strict-value',
      'stylelint-order',
    ],
    rules: {
      'color-named': 'never',
      'color-no-hex': true,
      'declaration-no-important': true,
      'declaration-colon-space-after': 'always',
      'declaration-empty-line-before': null,
      'font-weight-notation': 'named-where-possible',
      'no-descending-specificity': null,
      'rule-empty-line-before': [
        'always',
        {
          except: ['first-nested'],
          ignore: ['after-comment'],
        },
      ],
      'at-rule-empty-line-before': [
        'always',
        {
          except: ['after-same-name', 'first-nested'],
          ignore: ['after-comment'],
        },
      ],
      'max-nesting-depth': [
        2,
        { ignore: ['blockless-at-rules', 'pseudo-classes'] },
      ],
      'number-leading-zero': 'always',
      'length-zero-no-unit': true,
      // mostly disallows traditional BEM naming
      // since we're going for http://www.cutestrap.com/features/popsicle
      'selector-class-pattern': '^((?!(-|_)\\2{1,})[a-z0-9\\-])*$',
      'selector-max-compound-selectors': 3,
      'selector-max-specificity': [
        // setting for interim, try to lower especially last numer (id,class,type)
        '0,3,3',
        { ignoreSelectors: ['/:.*/', '/^\\.-[^-].*/'] },
      ],
      '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': {
        format: 'hsl',
      },
      'plugin/no-low-performance-animation-properties': [
        true,
        // we're ok with paint performance hit (for now)
        { ignoreProperties: ['color', 'background-color'] },
      ],
      'plugin/declaration-block-no-ignored-properties': 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,
      'scale-unlimited/declaration-strict-value': [
        ['color', 'fill', 'stroke', '/-color/'],
        {
          ignoreKeywords: [
            'currentColor',
            'inherit',
            'transparent',
            'initial',
            'none',
          ],
        },
      ],
    },
  };
  