The Node.js® Website
keii.dev
1// These are all the custom `@` (at) rules that we use within our custom PostCSS plugins
2const CUSTOM_AT_RULES = [
3 // Tailwind-specific at-rules
4 'apply',
5 'layer',
6 'responsive',
7 'screen',
8 'tailwind',
9 'variants',
10 // PostCSS-specific at-rules
11 'define-mixin',
12 'mixin',
13];
14
15// Enforces certain selectors to be only in camelCase notation
16// We use these for id selectors and classname selectors
17const ONLY_ALLOW_CAMEL_CASE_SELECTORS = [
18 /^(?:[a-z]+(?:[A-Z][a-z]*)*)$/,
19 { message: s => `Expected '${s}' to be in camelCase` },
20];
21
22export default {
23 extends: ['stylelint-config-standard'],
24 plugins: ['stylelint-order', 'stylelint-selector-bem-pattern'],
25 rules: {
26 // Enforces Element Class Names to be camelCase
27 'selector-class-pattern': ONLY_ALLOW_CAMEL_CASE_SELECTORS,
28 // Enforces Element IDs to be camelCase
29 'selector-id-pattern': ONLY_ALLOW_CAMEL_CASE_SELECTORS,
30 // Allow Tailwind-based CSS Rules
31 'at-rule-no-unknown': [true, { ignoreAtRules: CUSTOM_AT_RULES }],
32 // Allow the Global CSS Selector
33 'selector-pseudo-class-no-unknown': [
34 true,
35 { ignorePseudoClasses: ['global'] },
36 ],
37 // Enforces the order of the CSS properties to be in alphabetical order
38 'order/properties-alphabetical-order': true,
39 'no-descending-specificity': null,
40 // Disables the Level-4 Media Queries; Since they're more exotic and less known
41 'media-feature-range-notation': 'prefix',
42 // Adopts the import notation from `postcss-import`
43 'import-notation': 'string',
44 },
45};