@culur/config-stylelint 0.0.0-dev-20240527064403

package/package.json

@@ -0,0 +1,100 @@
+{
+  "name": "@culur/config-stylelint",
+  "version": "0.0.0-dev-20240527064403",
+  "description": "Culur's stylelint configuration",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/culur/culur.git",
+    "directory": "packages/config-stylelint"
+  },
+  "bugs": {
+    "url": "https://github.com/culur/culur/issues"
+  },
+  "homepage": "https://github.com/culur/culur#readme",
+  "author": "culur <culur.net@gmail.com>",
+  "license": "MIT",
+  "keywords": [
+    "culur",
+    "config",
+    "stylelint"
+  ],
+  "type": "module",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./factory": {
+      "import": {
+        "types": "./dist/factory.d.ts",
+        "default": "./dist/factory.js"
+      },
+      "require": {
+        "types": "./dist/factory.d.cts",
+        "default": "./dist/factory.cjs"
+      }
+    }
+  },
+  "files": [
+    "!**/*.json",
+    "!**/*.test.*",
+    ".stylelintrc.js",
+    "CHANGELOG.md",
+    "LICENSE",
+    "README.md",
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "clean": "rimraf dist coverage",
+    "build": "tsup",
+    "test": "tsc --noEmit && vitest run"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "engines": {
+    "node": ">=20"
+  },
+  "dependencies": {
+    "@culur/utils-packages": "workspace:*",
+    "stylelint-config-clean-order": "^5.4.2",
+    "stylelint-config-html": "^1.1.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-config-standard-scss": "^13.1.0",
+    "stylelint-config-standard-vue": "^1.0.0",
+    "stylelint-order": "^6.0.4",
+    "stylelint-scss": "^6.3.0",
+    "stylelint-selector-bem-pattern": "^4.0.0"
+  },
+  "devDependencies": {
+    "@culur/config-tsup": "workspace:*",
+    "@culur/config-typescript": "workspace:*",
+    "@culur/config-vite": "workspace:*",
+    "@types/node": "^20.12.12",
+    "@vitest/coverage-v8": "^1.6.0",
+    "@vitest/ui": "^1.6.0",
+    "dedent": "^1.5.3",
+    "postcss": "^8.4.38",
+    "postcss-html": "^1.7.0",
+    "postcss-sass": "^0.5.0",
+    "postcss-scss": "^4.0.9",
+    "rimraf": "^5.0.7",
+    "stylelint": "^16.6.0",
+    "tsup": "^8.0.2",
+    "typescript": "^5.4.5",
+    "vitest": "^1.6.0"
+  },
+  "peerDependencies": {
+    "stylelint": ">=16.0.0"
+  }
+}

package/src/__tests__/dedent.ts

@@ -0,0 +1,5 @@
+import dedent from 'dedent';
+
+export const css = dedent;
+export const scss = dedent;
+export const html = dedent;

package/src/__tests__/index.ts

@@ -0,0 +1,5 @@
+export * from './dedent';
+export * from './mock';
+export * from './syntax';
+export * from './test-rule-or-config-value';
+export * from './test-lint-and-fix';

package/src/__tests__/mock.ts

@@ -0,0 +1,36 @@
+import { vi } from 'vitest';
+
+export type UtilsPackages = Partial<{
+  hasTailwind: boolean;
+  hasSass: boolean;
+  hasVue: boolean;
+}>;
+
+export const defineMockUtilsPackages = (testCases: UtilsPackages[]) => {
+  const shouldMockUtilsPackages = testCases.some(
+    t =>
+      typeof t.hasTailwind === 'boolean' ||
+      typeof t.hasSass === 'boolean' ||
+      typeof t.hasVue === 'boolean',
+  );
+
+  if (shouldMockUtilsPackages) {
+    vi.mock('@culur/utils-packages');
+  }
+
+  return async ({ hasTailwind, hasSass, hasVue }: UtilsPackages) => {
+    if (shouldMockUtilsPackages) {
+      const utilsPackages = await import('@culur/utils-packages');
+
+      if (typeof hasTailwind === 'boolean') {
+        utilsPackages.hasTailwind = vi.fn().mockReturnValue(hasTailwind);
+      }
+      if (typeof hasSass === 'boolean') {
+        utilsPackages.hasSass = vi.fn().mockReturnValue(hasSass);
+      }
+      if (typeof hasVue === 'boolean') {
+        utilsPackages.hasVue = vi.fn().mockReturnValue(hasVue);
+      }
+    }
+  };
+};

package/src/__tests__/syntax.ts

@@ -0,0 +1,11 @@
+import type { Config } from 'stylelint';
+import postcssScss from 'postcss-scss';
+
+type OverrideSyntax = Config['overrides'] extends (infer T)[] | undefined
+  ? T
+  : never;
+
+export const syntaxScss: OverrideSyntax = {
+  files: ['*.scss', '**/*.scss'],
+  customSyntax: postcssScss,
+};

package/src/__tests__/test-lint-and-fix.ts

@@ -0,0 +1,55 @@
+import { resolve } from 'node:path';
+import type { Config } from 'stylelint';
+import stylelint from 'stylelint';
+import type { Awaitable } from 'vitest';
+import { describe, expect, it } from 'vitest';
+import type { UtilsPackages } from './mock';
+import { defineMockUtilsPackages } from './mock';
+
+type LintAndFixCase = {
+  code: string;
+  fixedCode?: string;
+  isError?: boolean;
+  ext?: 'css' | 'scss' | 'vue';
+  debug?: boolean;
+} & UtilsPackages;
+
+export const testLintAndFix = (
+  getConfig: Config | (() => Awaitable<Config>),
+  testCases: LintAndFixCase[],
+) =>
+  describe('test lint and fix', () => {
+    const mockUtilsPackages = defineMockUtilsPackages(testCases);
+
+    const name = [
+      ...(['hasTailwind', 'hasSass', 'hasVue', 'isError'] as const) //
+        .filter(field => testCases.some(t => typeof t[field] === 'boolean')),
+      ...(['code', 'fixedCode'] as const) //
+        .filter(field => testCases.some(t => typeof t[field] === 'string')),
+    ]
+      .map(field => `${field} = $${field}`)
+      .join(', ');
+
+    it.each(testCases)(name, async options => {
+      await mockUtilsPackages(options);
+
+      const config =
+        typeof getConfig === 'function' ? await getConfig() : getConfig;
+      const result = await stylelint.lint({
+        code: options.code,
+        codeFilename: `filename.${options.ext ?? 'css'}`,
+        config,
+        fix: 'fixedCode' in options,
+        configBasedir: resolve(__dirname, '..'),
+      });
+
+      if (options.debug) {
+        /* eslint-disable no-console */
+        console.log(result.results.flatMap(r => r.warnings));
+        console.log(result.code);
+        /* eslint-enable no-console */
+      }
+      if ('fixedCode' in options) expect(result.code).toBe(options.fixedCode);
+      if ('isError' in options) expect(result.errored).toBe(options.isError);
+    });
+  });

package/src/__tests__/test-rule-or-config-value.ts

@@ -0,0 +1,68 @@
+import type { Awaitable } from 'vitest';
+import { describe, it } from 'vitest';
+import type { Config, ConfigRuleSettings } from 'stylelint';
+import type { UtilsPackages } from './mock';
+import { defineMockUtilsPackages } from './mock';
+
+import type {
+  ConfigRulePrimaryOption,
+  ConfigRuleSecondaryOptions,
+} from '~/utils';
+
+type TArgs<TOptions extends object, TRuleOrConfig> = [
+  getRuleOrConfig: (() => Awaitable<TRuleOrConfig>) | TRuleOrConfig,
+  fn: (
+    ruleOrConfig: TRuleOrConfig,
+    options: UtilsPackages & TOptions,
+  ) => Promise<void> | void,
+];
+
+const testRuleOrConfigValue = <
+  TBaseRuleOrConfig extends
+    | ConfigRuleSettings<ConfigRulePrimaryOption, ConfigRuleSecondaryOptions>
+    | Config,
+>(
+  ruleOrConfig: 'rule' | 'config',
+) => {
+  return <
+    TCase extends UtilsPackages & object,
+    TRuleOrConfig extends TBaseRuleOrConfig,
+  >(
+    ...args:
+      | [testCases: TCase[], ...TArgs<TCase, TRuleOrConfig>]
+      | [...TArgs<TCase, TRuleOrConfig>]
+  ) => {
+    describe(ruleOrConfig, () => {
+      const [testCases, getRuleOrConfig, fn] =
+        args.length === 3
+          ? [...args]
+          : [[{} as UtilsPackages & TCase], ...args];
+
+      const mockUtilsPackages = defineMockUtilsPackages(testCases);
+
+      const name = (['hasTailwind', 'hasSass', 'hasVue'] as const)
+        .filter(field => testCases.some(t => typeof t[field] === 'boolean'))
+        .map(field => `${field} = $${field}`)
+        .join(', ');
+
+      it.each(testCases)(name, async options => {
+        await mockUtilsPackages(options);
+
+        const ruleOrConfig =
+          typeof getRuleOrConfig === 'function'
+            ? await getRuleOrConfig()
+            : getRuleOrConfig;
+
+        await fn(ruleOrConfig, options);
+      });
+    });
+  };
+};
+
+export const testConfigValue = testRuleOrConfigValue<Config>('config');
+export const testRuleValue = testRuleOrConfigValue<
+  ConfigRuleSettings<
+    ConfigRulePrimaryOption, //
+    ConfigRuleSecondaryOptions
+  >
+>('rule');

package/src/configs/css.test.ts

@@ -0,0 +1,10 @@
+import { assert, describe } from 'vitest';
+import { configCss } from './css';
+import { testConfigValue } from '~/__tests__';
+
+describe('css config', () => {
+  testConfigValue(configCss, config => {
+    assert(Array.isArray(config.extends));
+    assert(Array.isArray(config.plugins));
+  });
+});

package/src/configs/css.ts

@@ -0,0 +1,16 @@
+import type { Config } from 'stylelint';
+import { atRuleNoUnknownCSS } from '~/rules/at-rule-no-unknown';
+import { declarationBlockNoRedundantLonghandProperties } from '~/rules/declaration-block-no-redundant-longhand-properties';
+import { functionNoUnknown } from '~/rules/function-no-unknown';
+import { order } from '~/rules/order';
+
+export const configCss = (): Config => ({
+  extends: ['stylelint-config-standard', 'stylelint-config-clean-order'],
+  plugins: ['stylelint-order', 'stylelint-selector-bem-pattern'],
+  rules: {
+    ...atRuleNoUnknownCSS(),
+    ...declarationBlockNoRedundantLonghandProperties,
+    ...functionNoUnknown(),
+    ...order(),
+  },
+});

package/src/configs/scss.test.ts

@@ -0,0 +1,9 @@
+import { assert, describe } from 'vitest';
+import { configScss } from './scss';
+import { testConfigValue } from '~/__tests__';
+
+describe('scss config', () => {
+  testConfigValue(configScss, config => {
+    assert(Array.isArray(config.extends));
+  });
+});

package/src/configs/scss.ts

@@ -0,0 +1,11 @@
+import type { Config } from 'stylelint';
+import { atRuleNoUnknownSCSS } from '~/rules/at-rule-no-unknown';
+import { dollarVariablePatternSCSS } from '~/rules/dollar-variable-pattern';
+
+export const configScss = (): Config => ({
+  extends: ['stylelint-config-standard-scss'],
+  rules: {
+    ...atRuleNoUnknownSCSS(),
+    ...dollarVariablePatternSCSS,
+  },
+});

package/src/configs/shared.test.ts

@@ -0,0 +1,9 @@
+import { assert, describe } from 'vitest';
+import { configShared } from './shared';
+import { testConfigValue } from '~/__tests__';
+
+describe('shared config', () => {
+  testConfigValue(configShared, config => {
+    assert(Array.isArray(config.extends));
+  });
+});

package/src/configs/shared.ts

@@ -0,0 +1,5 @@
+import type { Config } from 'stylelint';
+
+export const configShared = (): Config => ({
+  extends: ['stylelint-config-html'],
+});

package/src/configs/vue.test.ts

@@ -0,0 +1,18 @@
+import { assert, describe } from 'vitest';
+import { configVue } from './vue';
+import { testConfigValue } from '~/__tests__';
+
+describe('vue config', () => {
+  testConfigValue(
+    [{ hasSass: true }, { hasSass: false }],
+    configVue,
+    (config, options) => {
+      assert(Array.isArray(config.extends));
+      config.extends.includes(
+        options.hasSass
+          ? 'stylelint-config-standard-vue/scss'
+          : 'stylelint-config-standard-vue',
+      );
+    },
+  );
+});

package/src/configs/vue.ts

@@ -0,0 +1,10 @@
+import { hasSass } from '@culur/utils-packages';
+import type { Config } from 'stylelint';
+
+export const configVue = (): Config => ({
+  extends: [
+    hasSass()
+      ? 'stylelint-config-standard-vue/scss'
+      : 'stylelint-config-standard-vue',
+  ],
+});

package/src/factory.test.ts

@@ -0,0 +1,15 @@
+import { css, testLintAndFix } from './__tests__';
+import defineConfig from './factory';
+
+testLintAndFix(defineConfig, [
+  {
+    code: css`
+      a {
+        color: red;
+      }
+    `,
+    hasSass: true,
+    hasVue: true,
+    isError: false,
+  },
+]);

package/src/factory.ts

@@ -0,0 +1,23 @@
+import type { Packages } from '@culur/utils-packages';
+import { hasSass, hasVue, updateDefaultPackages } from '@culur/utils-packages';
+import type { Config } from 'stylelint';
+import { configCss } from './configs/css';
+import { configScss } from './configs/scss';
+import { configShared } from './configs/shared';
+import { configVue } from './configs/vue';
+import { mergeConfigs } from './utils';
+
+export default function defineConfig(
+  options?: Partial<Packages>,
+  config?: Config,
+): Config {
+  updateDefaultPackages(options);
+
+  return mergeConfigs(
+    configShared(),
+    configCss(),
+    hasSass() && configScss(),
+    hasVue() && configVue(),
+    config,
+  );
+}

package/src/index.test.ts

@@ -0,0 +1,9 @@
+import { describe, expectTypeOf, it } from 'vitest';
+import type { Config } from 'stylelint';
+import defineConfig from '.';
+
+describe('index', () => {
+  it('root config', () => {
+    expectTypeOf(defineConfig).toEqualTypeOf<Config>();
+  });
+});

package/src/index.ts

@@ -0,0 +1,3 @@
+import defineConfig from './factory';
+
+export default defineConfig();

package/src/rules/at-rule-no-unknown.test.ts

@@ -0,0 +1,43 @@
+import { assert, expect } from 'vitest';
+import { syntaxScss, testLintAndFix } from '~/__tests__';
+import { testRuleValue } from '~/__tests__/test-rule-or-config-value';
+
+testRuleValue(
+  [
+    { hasTailwind: false, length: 0 },
+    { hasTailwind: true, length: 7 },
+  ],
+  async () => {
+    const module = await import('./at-rule-no-unknown');
+    return module.atRuleNoUnknownRule();
+  },
+  (rule, options) => {
+    assert(Array.isArray(rule));
+    assert(typeof rule[1] === 'object');
+    expect(rule[1].ignoreAtRules).toHaveLength(options.length);
+  },
+);
+
+testLintAndFix(async () => {
+  const module = await import('./at-rule-no-unknown');
+  return {
+    rules: module.atRuleNoUnknownCSS(),
+  };
+}, [
+  { hasTailwind: false, code: '@unknown {}', isError: true },
+  { hasTailwind: false, code: '@media {}', isError: false },
+  { hasTailwind: true, code: '@tailwind {}', isError: false },
+]);
+
+testLintAndFix(async () => {
+  const module = await import('./at-rule-no-unknown');
+  return {
+    plugins: ['stylelint-scss'],
+    rules: module.atRuleNoUnknownSCSS(),
+    overrides: [syntaxScss],
+  };
+}, [
+  { ext: 'scss', hasTailwind: false, code: '@unknown {}', isError: true },
+  { ext: 'scss', hasTailwind: false, code: '@media {}', isError: false },
+  { ext: 'scss', hasTailwind: true, code: '@tailwind {}', isError: false },
+]);

package/src/rules/at-rule-no-unknown.ts

@@ -0,0 +1,33 @@
+import { hasTailwind } from '@culur/utils-packages';
+import { defineRule, defineRules } from '~/utils';
+
+// https://tailwindcss.com/docs/functions-and-directives
+const directives = [
+  'tailwind',
+  'layer',
+  'apply',
+  'config',
+
+  // https://v2.tailwindcss.com/docs/functions-and-directives
+  // backwards compatible for v2
+  'variants',
+  'responsive',
+  'screen',
+];
+
+export const atRuleNoUnknownRule = () =>
+  defineRule<boolean, { ignoreAtRules: (string | RegExp)[] }>([
+    true,
+    { ignoreAtRules: hasTailwind() ? directives : [] },
+  ]);
+
+export const atRuleNoUnknownCSS = () =>
+  defineRules({
+    'at-rule-no-unknown': atRuleNoUnknownRule(),
+  });
+
+export const atRuleNoUnknownSCSS = () =>
+  defineRules({
+    'at-rule-no-unknown': null,
+    'scss/at-rule-no-unknown': atRuleNoUnknownRule(),
+  });

package/src/rules/declaration-block-no-redundant-longhand-properties.test.ts

@@ -0,0 +1,38 @@
+import { assert, expect } from 'vitest';
+import {
+  declarationBlockNoRedundantLonghandProperties,
+  declarationBlockNoRedundantLonghandPropertiesRule,
+} from './declaration-block-no-redundant-longhand-properties';
+import { css, testLintAndFix, testRuleValue } from '~/__tests__';
+
+testRuleValue(
+  declarationBlockNoRedundantLonghandPropertiesRule, //
+  rule => {
+    assert(Array.isArray(rule));
+    assert(typeof rule[1] === 'object');
+    expect(rule[1].ignoreShorthands).toHaveLength(1);
+  },
+);
+
+testLintAndFix(
+  {
+    rules: declarationBlockNoRedundantLonghandProperties,
+  },
+  [
+    {
+      code: css`
+        a {
+          margin-top: 1px;
+          margin-right: 2px;
+          margin-bottom: 3px;
+          margin-left: 4px;
+        }
+      `,
+      fixedCode: css`
+        a {
+          margin: 1px 2px 3px 4px;
+        }
+      `,
+    },
+  ],
+);

package/src/rules/declaration-block-no-redundant-longhand-properties.ts

@@ -0,0 +1,11 @@
+import { defineRule, defineRules } from '~/utils';
+
+export const declarationBlockNoRedundantLonghandPropertiesRule = defineRule<
+  true,
+  { ignoreShorthands?: (string | RegExp)[] }
+>([true, { ignoreShorthands: ['grid-template'] }]);
+
+export const declarationBlockNoRedundantLonghandProperties = defineRules({
+  'declaration-block-no-redundant-longhand-properties':
+    declarationBlockNoRedundantLonghandPropertiesRule,
+});

package/src/rules/dollar-variable-pattern.test.ts

@@ -0,0 +1,27 @@
+import { assert, expectTypeOf } from 'vitest';
+import {
+  dollarVariablePatternRule,
+  dollarVariablePatternSCSS,
+} from './dollar-variable-pattern';
+import { scss, testLintAndFix, testRuleValue } from '~/__tests__';
+
+testRuleValue(
+  () => dollarVariablePatternRule,
+  rule => {
+    assert(Array.isArray(rule));
+    assert(typeof rule[1] === 'object');
+    expectTypeOf(rule[1].message).toBeString();
+  },
+);
+
+testLintAndFix(
+  {
+    extends: ['stylelint-config-standard-scss'],
+    rules: dollarVariablePatternSCSS,
+  }, //
+  [
+    { isError: false, code: scss`a { $kebab-case: 123; }` },
+    { isError: true, code: scss`a { $snake_case: 123; }` },
+    { isError: true, code: scss`a { $camelCase: 123; }` },
+  ],
+);

package/src/rules/dollar-variable-pattern.ts

@@ -0,0 +1,18 @@
+import { defineRule, defineRules } from '~/utils';
+
+type PrimaryOption = string;
+interface SecondaryOptions {
+  message: string;
+}
+
+export const dollarVariablePatternRule = defineRule<
+  PrimaryOption,
+  SecondaryOptions
+>([
+  '^(-{0,2}?[a-z][a-z0-9]*)(-[a-z0-9]+)*$',
+  { message: 'Expected variable to be kebab-case' },
+]);
+
+export const dollarVariablePatternSCSS = defineRules({
+  'scss/dollar-variable-pattern': dollarVariablePatternRule,
+});

package/src/rules/function-no-unknown.test.ts

@@ -0,0 +1,39 @@
+import { assert, expect } from 'vitest';
+import { testLintAndFix, testRuleValue } from '~/__tests__';
+
+testRuleValue(
+  [
+    { hasTailwind: true, hasSass: false, hasVue: false, length: 2 },
+    { hasTailwind: false, hasSass: true, hasVue: false, length: 1 },
+    { hasTailwind: false, hasSass: false, hasVue: true, length: 1 },
+  ],
+  async () => {
+    const module = await import('./function-no-unknown');
+    return module.functionNoUnknownRule();
+  },
+  (rule, options) => {
+    assert(Array.isArray(rule));
+    assert(typeof rule[1] === 'object');
+    expect(rule[1].ignoreFunctions).toHaveLength(options.length);
+  },
+);
+
+testLintAndFix(async () => {
+  const module = await import('./function-no-unknown');
+  return { rules: module.functionNoUnknown() };
+}, [
+  {
+    isError: true,
+    code: 'a { color: unknown(1); }',
+  },
+  {
+    hasTailwind: true,
+    isError: false,
+    code: 'a { color: theme(colors.blue.500); }',
+  },
+  {
+    hasVue: true,
+    isError: false,
+    code: 'a { color: v-bind(colors); }',
+  },
+]);