stylelint.config.js

module.exports = {
  extends: [
    // Use the Standard config as the base
    // https://github.com/stylelint/stylelint-config-standard
    'stylelint-config-standard',
    // Override rules that would interfere with Prettier
    // https://github.com/shannonmoeller/stylelint-config-prettier
    'stylelint-config-prettier'
  ],
  ignoreFiles: ['assets/css/main.css'],
  plugins: ['stylelint-scss'],
  // Rule lists:
  // - https://stylelint.io/user-guide/rules/
  // - https://github.com/kristerkari/stylelint-scss#list-of-rules
  rules: {
    'color-named': 'never',
    // 'color-no-hex': true,
    // we want to have empty script tags in project at least in development for adding styles
    'no-empty-source': null,
    // Allow newlines inside class attribute values
    'string-no-newline': null,
    // Limit the number of universal selectors in a selector,
    // to avoid very slow selectors
    'selector-max-universal': 1,
    // Tailwind
    'at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'apply',
          'responsive',
          'media',
          'screen',
          'mixin',
          'include',
          'extend'
        ]
      }
    ],
    'selector-pseudo-element-colon-notation': 'single',
    'declaration-block-no-duplicate-properties': [
      true,
      {
        ignoreProperties: ['color', '/background/']
      }
    ],
    'declaration-block-trailing-semicolon': null,
    'no-descending-specificity': null,
    // 'comment-empty-line-before': 'never',
    // ===
    // SCSS
    // ===
    'scss/dollar-variable-colon-space-after': 'always',
    'scss/dollar-variable-colon-space-before': 'never',
    'scss/dollar-variable-no-missing-interpolation': true,
    'scss/dollar-variable-pattern': /^[a-z-]+$/,
    'scss/double-slash-comment-whitespace-inside': 'always',
    'scss/operator-no-newline-before': true,
    'scss/operator-no-unspaced': true,
    'scss/selector-no-redundant-nesting-selector': true,
    // Allow SCSS keywords beginning with `@` for Tailwind
    'scss/at-rule-no-unknown': [
      true,
      {
        ignoreAtRules: [
          'tailwind',
          'apply',
          'variants',
          'responsive',
          'media',
          'screen',
          'mixin',
          'include'
        ]
      }
    ]
  }
}