CSS rules to restrict allowed declarations

[thibaudcolas]

Moving from ✅ Linter rules from other sources – here’s a family of CSS rules reliant on configuration that I’d find it hard to work without:

• declaration-property-value-allowed-list / declaration-property-value-disallowed-list
• declaration-property-unit-allowed-list / declaration-property-unit-disallowed-list
• property-disallowed-list
• Plugin: stylelint-declaration-strict-value

My use cases are to encourage:

• Use of logical properties and values over physical ones, for right-to-left language support (margin-inline-start instead of margin-left; text-align: end instead of text-align: right; etc)
• Font sizes in relative-length units (em, rem, etc) because pixel font sizes don’t support text resizing
• Avoiding altogether of specific rules that are very unlikely to ever be desirable on the types of projects I work on (no forced-color-adjust, no text-transform: uppercase).
• Consistent use of variables for things that are managed globally to guarantee consistency with designs (colors, font sizes)

Sample configuration using those rules

Source: stylelint-config-wagtail index.js

'declaration-property-value-allowed-list': {
  // Only allow logical values, and resets.
  'clear': ['both', 'none'],
  // Only allow logical values, and resets.
  'float': ['inline-start', 'inline-end', 'none', 'unset'],
  // Only allow logical values.
  'text-align': ['start', 'end', 'center'],
},
'property-disallowed-list': [
  // There are very few cases where it’s the correct approach.
  '/forced-color-adjust/',
  // Disallow positioning with physical properties. Use logical ones instead.
  '/left/',
  '/right/',
  // Disallow text-transform, as we never want text to be uppercased.
  'text-transform',
],
'scale-unlimited/declaration-strict-value': [
  [
    // Colors should always be defined from variables or functions.
    '/color/',
    'fill',
    'stroke',
    // Consistently using variables for z-index allows us to define the order of the values globally.
    'z-index',
  ],
  {
    ignoreValues: [
      'currentColor',
      'inherit',
      'initial',
      'none',
      'unset',
      'transparent',
      // System colors for forced-colors styling.
      // See https://drafts.csswg.org/css-color-4/#css-system-colors.
      'Canvas',
      'CanvasText',
      'LinkText',
      'VisitedText',
      'ActiveText',
      'ButtonFace',
      'ButtonText',
      'ButtonBorder',
      'Field',
      'FieldText',
      'Highlight',
      'HighlightText',
      'SelectedItem',
      'SelectedItemText',
      'Mark',
      'MarkText',
      'GrayText',
      'AccentColor',
      'AccentColorText',
    ],
  },
],
'selector-max-specificity': '0,3,3',

[thibaudcolas]

Copying @Venefilyn’s original reply:

Agreed on the logical properties. It's something we use a lot in Cockpit to better support ltr rtl. ESLint and Stylelint has this

• eslint/css@main/docs/rules/prefer-logical-properties.md
• csstools/stylelint-use-logical