chore: extract stylelint configs

Author: xboy2012

stylelint.config.mts

@@ -1,51 +1,10 @@
-import type { Config } from 'stylelint';
-
-const config: Config = {
-  plugins: ['stylelint-prettier'],
-  extends: [
-    'stylelint-config-standard',
-    '@stylistic/stylelint-config',
-    'stylelint-prettier/recommended',
-  ],
-  rules: {
-    // tailwind rules
-    'import-notation': null,
-    'at-rule-no-unknown': [
-      true,
-      {
-        ignoreAtRules: [
-          'theme',
-          'source',
-          'utility',
-          'variant',
-          'custom-variant',
-          'plugin',
-        ],
-      },
-    ],
-    'function-no-unknown': [
-      true,
-      {
-        ignoreFunctions: ['theme'],
-      },
-    ],
-
-    // rules conflict with prettier
-    '@stylistic/declaration-colon-newline-after': null,
-    '@stylistic/declaration-colon-space-after': null,
-    '@stylistic/value-list-comma-newline-after': null,
-
-    'custom-property-pattern': null,
-  },
-  ignoreFiles: [
-    '**/.idea/**',
-    '**/node_modules/**',
-    '.next/**',
-    'out/**',
-    'coverage/**',
-    '.swc/**',
-    '.rollup.cache/**',
-  ],
-};
-
-export default config;
+import { defineStylelintConfig } from './tools/stylelint/defineStylelintConfig';
+import { getBaseConfig } from './tools/stylelint/getBaseConfig';
+import { getStylisticConfig } from './tools/stylelint/getStylisticConfig';
+import { getTailwindCssConfig } from './tools/stylelint/getTailwindCssConfig';
+
+export default defineStylelintConfig([
+  getBaseConfig(),
+  getStylisticConfig(),
+  getTailwindCssConfig(),
+]);

tools/stylelint/defineStylelintConfig.ts

@@ -0,0 +1,58 @@
+import type { Config, Plugin } from 'stylelint';
+import type { PartialStyleLintConfig } from './types';
+
+const formatValue = <T>(value: T | T[] | undefined): T[] => {
+  if (!value) {
+    return [];
+  }
+  if (Array.isArray(value)) {
+    return value;
+  }
+  return [value];
+};
+
+const dedupeAdd = <T>(array: T[], values: T[], set: Set<T>) => {
+  for (const item of values) {
+    if (!set.has(item)) {
+      set.add(item);
+      array.push(item);
+    }
+  }
+};
+
+export const defineStylelintConfig = (
+  configs: PartialStyleLintConfig[],
+): Config => {
+  const finalPlugins: (Plugin | string)[] = [];
+  const finalExtends: string[] = [];
+  const finalIgnoreFiles: string[] = [];
+  const finalRules: Config['rules'] = {};
+
+  // use set to deduplicate
+  const pluginSet = new Set<Plugin | string>();
+  const extendsSet = new Set<string>();
+  const ignoreFilesSet = new Set<string>();
+
+  for (const config of configs) {
+    const plugins = formatValue(config.plugins);
+    dedupeAdd(finalPlugins, plugins, pluginSet);
+
+    const extendsValue = formatValue(config.extends);
+    dedupeAdd(finalExtends, extendsValue, extendsSet);
+
+    const ignoreFiles = formatValue(config.ignoreFiles);
+    dedupeAdd(finalIgnoreFiles, ignoreFiles, ignoreFilesSet);
+
+    const rules = config.rules;
+    if (rules) {
+      Object.assign(finalRules, rules);
+    }
+  }
+
+  return {
+    plugins: finalPlugins,
+    extends: finalExtends,
+    rules: finalRules,
+    ignoreFiles: finalIgnoreFiles,
+  };
+};

tools/stylelint/getBaseConfig.ts

@@ -0,0 +1,16 @@
+import type { PartialStyleLintConfig } from './types';
+
+export const getBaseConfig = (): PartialStyleLintConfig => {
+  return {
+    extends: ['stylelint-config-standard'],
+    ignoreFiles: [
+      '**/.idea/**',
+      '**/node_modules/**',
+      '.next/**',
+      'out/**',
+      'coverage/**',
+      '.swc/**',
+      '.rollup.cache/**',
+    ],
+  };
+};

tools/stylelint/getStylisticConfig.ts

@@ -0,0 +1,14 @@
+import type { PartialStyleLintConfig } from './types';
+
+export const getStylisticConfig = (): PartialStyleLintConfig => {
+  return {
+    plugins: ['stylelint-prettier'],
+    extends: ['@stylistic/stylelint-config', 'stylelint-prettier/recommended'],
+    rules: {
+      // rules conflict with prettier
+      '@stylistic/declaration-colon-newline-after': null,
+      '@stylistic/declaration-colon-space-after': null,
+      '@stylistic/value-list-comma-newline-after': null,
+    },
+  };
+};

tools/stylelint/getTailwindCssConfig.ts

@@ -0,0 +1,32 @@
+import type { PartialStyleLintConfig } from './types';
+
+export const getTailwindCssConfig = (): PartialStyleLintConfig => {
+  return {
+    // tailwind
+    rules: {
+      // tailwind rules
+      'import-notation': null,
+      'at-rule-no-unknown': [
+        true,
+        {
+          ignoreAtRules: [
+            'theme',
+            'source',
+            'utility',
+            'variant',
+            'custom-variant',
+            'plugin',
+          ],
+        },
+      ],
+      'function-no-unknown': [
+        true,
+        {
+          ignoreFunctions: ['theme'],
+        },
+      ],
+
+      'custom-property-pattern': null,
+    },
+  };
+};

tools/stylelint/types.ts

@@ -0,0 +1,7 @@
+import type { Config } from 'stylelint';
+
+export type PartialStyleLintConfig = Pick<
+  Config,
+  // TODO: for now, only these fields are supported, type-guard is applied here to avoid unexpected usage.
+  'plugins' | 'extends' | 'ignoreFiles' | 'rules'
+>;