@culur/config-stylelint 0.0.0-dev-20240527064403

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

@@ -0,0 +1,35 @@
+import { hasSass, hasTailwind, hasVue } from '@culur/utils-packages';
+import { defineRule, defineRules } from '~/utils';
+
+export const functionNoUnknownRule = () => {
+  const ignoreFunctions = [
+    // https://tailwindcss.com/docs/functions-and-directives#functions
+    ...(hasTailwind() //
+      ? ['theme', 'screen']
+      : []),
+
+    // https://sass-lang.com/documentation/modules/list
+    // https://sass-lang.com/documentation/modules/math
+    // https://sass-lang.com/documentation/modules/color
+    ...(hasSass() //
+      ? [/^(list|math|color)\..+/]
+      : []),
+
+    // https://vuejs.org/api/sfc-css-features.html#v-bind-in-css
+    ...(hasVue() //
+      ? ['v-bind']
+      : []),
+  ];
+
+  return defineRule<boolean, { ignoreFunctions?: (string | RegExp)[] }>([
+    true,
+    ignoreFunctions.length > 0
+      ? { ignoreFunctions }
+      : { ignoreFunctions: undefined },
+  ]);
+};
+
+export const functionNoUnknown = () =>
+  defineRules({
+    'function-no-unknown': functionNoUnknownRule(),
+  });

package/src/rules/order.test.ts

@@ -0,0 +1,46 @@
+import { assert, expect } from 'vitest';
+import { scss, testLintAndFix, testRuleValue } from '~/__tests__';
+
+testRuleValue(
+  [
+    { hasTailwind: false, hasSass: false, length: 8 },
+    { hasTailwind: true, hasSass: false, length: 15 },
+    { hasTailwind: false, hasSass: true, length: 16 },
+    { hasTailwind: true, hasSass: true, length: 23 },
+  ],
+  async () => {
+    const module = await import('./order');
+    return module.orderRule();
+  },
+  (rule, options) => {
+    assert(Array.isArray(rule));
+
+    assert(Array.isArray(rule[0]));
+    expect(rule[0]).toHaveLength(options.length);
+
+    assert(typeof rule[1] === 'object');
+    expect(rule[1]).toStrictEqual({ unspecified: 'bottom' });
+  },
+);
+
+testLintAndFix(async () => {
+  const module = await import('./order');
+  return {
+    plugins: ['stylelint-order'],
+    rules: module.order(),
+  };
+}, [
+  {
+    hasTailwind: false,
+    hasSass: false,
+    code: scss`
+      a {
+        $variable: 1px;
+        --property: 3px;
+        @variable: 2px;
+        width: 4px;
+      }
+    `,
+    isError: false,
+  },
+]);

package/src/rules/order.ts

@@ -0,0 +1,108 @@
+import { hasSass, hasTailwind } from '@culur/utils-packages';
+import { defineRule, defineRules } from '~/utils';
+
+// https://github.com/hudochenkov/stylelint-order/blob/master/rules/order/README.md#options
+
+type Keyword =
+  | 'custom-properties' /**/ // Custom properties (e.g. --property: 10px;)
+  | 'dollar-variables' /***/ // Dollar variables (e.g. $variable)
+  | 'at-variables' /*******/ // At-variables (e.g. @variable available in Less syntax)
+  | 'declarations' /*******/ // CSS declarations (e.g. display: block)
+  | 'rules' /**************/ // Nested rules (e.g. a { span {} })
+  | 'at-rules' /***********/ // Nested at-rules (e.g. div { @media () {} })
+  | 'less-mixins'; /*******/ // Mixins in Less syntax (e.g. .mixin();)
+
+interface AtRule {
+  type: 'at-rule';
+  name?: string;
+  parameter?: string | RegExp;
+  hasBlock?: boolean;
+}
+
+interface Rule {
+  type: 'rule';
+  selector?: string | RegExp;
+  name?: string;
+}
+
+type PrimaryOption = Array<Keyword | AtRule | Rule>;
+interface SecondaryOptions {
+  unspecified?: 'top' | 'bottom' | 'ignore';
+}
+
+/**
+ * https://sass-lang.com/documentation/at-rules
+ */
+const atRuleScssImport: PrimaryOption = [
+  { type: 'at-rule', name: 'use' },
+  { type: 'at-rule', name: 'forward' },
+  { type: 'at-rule', name: 'import' },
+];
+const atRuleScss: PrimaryOption = [
+  { type: 'at-rule', name: 'function' },
+  { type: 'at-rule', name: 'mixin' },
+  { type: 'at-rule', name: 'extend' },
+  { type: 'at-rule', name: 'include' },
+  { type: 'at-rule', name: 'at-root' },
+];
+
+const variables: PrimaryOption = [
+  'dollar-variables', // $variable
+  'at-variables', // @variable
+  'custom-properties', // --property: 10px
+];
+
+/**
+ * https://tailwindcss.com/docs/functions-and-directives
+ */
+const atRuleTailwind: PrimaryOption = [
+  { type: 'at-rule', name: 'tailwind' },
+  { type: 'at-rule', name: 'layer' },
+  { type: 'at-rule', name: 'apply' },
+  { type: 'at-rule', name: 'config' },
+];
+
+/**
+ * https://v2.tailwindcss.com/docs/functions-and-directives
+ *
+ * backwards compatible for v2
+ */
+const atRuleTailwindV2: PrimaryOption = [
+  { type: 'at-rule', name: 'variants' },
+  { type: 'at-rule', name: 'responsive' },
+  { type: 'at-rule', name: 'screen' },
+];
+
+/**
+ * Nested rules (e.g. a { span {} })
+ */
+const rules: PrimaryOption = [
+  {
+    type: 'rule',
+    selector: /^&::[\w-]+/,
+  },
+  'rules',
+];
+
+export const orderRule = () =>
+  defineRule<PrimaryOption, SecondaryOptions>([
+    [
+      ...(hasSass() ? atRuleScssImport : []),
+      ...(hasTailwind() ? atRuleTailwind : []),
+      ...variables,
+      ...(hasSass() ? atRuleScss : []),
+      ...(hasTailwind() ? atRuleTailwindV2 : []),
+      'at-rules',
+      'less-mixins',
+      'declarations',
+      ...rules,
+    ],
+    {
+      unspecified: 'bottom',
+    },
+  ]);
+
+export const order = () =>
+  defineRules({
+    'order/order': orderRule(),
+  });

package/src/utils/index.ts

@@ -0,0 +1 @@
+export * from './utils';

package/src/utils/utils.test.ts

@@ -0,0 +1,46 @@
+import { assert, describe, expect, expectTypeOf, it } from 'vitest';
+import { defineRule, defineRules, mergeConfigs } from './utils';
+
+describe('rules', () => {
+  it('defineRule & rules', () => {
+    type PrimaryOption = true;
+    interface SecondaryOptions {
+      ignore: ['comments'];
+    }
+
+    const blockNoEmptyRule = defineRule<PrimaryOption, SecondaryOptions>([
+      true,
+      { ignore: ['comments'] },
+    ]);
+    const blockNoEmpty = defineRules({ 'block-no-empty': blockNoEmptyRule });
+
+    assert(Array.isArray(blockNoEmptyRule));
+    expectTypeOf(blockNoEmpty).toBeObject();
+  });
+});
+
+describe('merge configs', () => {
+  it('should merge plugins', () => {
+    const mergedConfigs = mergeConfigs(
+      { plugins: ['plugin-a'] }, //
+      { plugins: ['plugin-b'] },
+      { plugins: [] },
+      {},
+    );
+
+    assert(Array.isArray(mergedConfigs.plugins));
+    expect(mergedConfigs.plugins).toHaveLength(2);
+  });
+
+  it('should merge overrides', () => {
+    const mergedConfigs = mergeConfigs(
+      { overrides: [{ files: 'a.css' }] },
+      { overrides: [{ files: 'b.css' }] },
+      { overrides: [] },
+      {},
+    );
+
+    assert(Array.isArray(mergedConfigs.overrides));
+    expect(mergedConfigs.overrides).toHaveLength(2);
+  });
+});

package/src/utils/utils.ts

@@ -0,0 +1,44 @@
+import type { Config, ConfigRuleSettings } from 'stylelint';
+
+export type ConfigRulePrimaryOption =
+  | boolean
+  | number
+  | string
+  | Array<boolean | number | string | object>;
+export type ConfigRuleSecondaryOptions = object;
+
+export const defineRule = <
+  PrimaryOption extends ConfigRulePrimaryOption,
+  SecondaryOptions extends ConfigRuleSecondaryOptions,
+>(
+  rule: ConfigRuleSettings<PrimaryOption, SecondaryOptions>,
+) => rule;
+
+export const defineRules = <TRules extends Config['rules']>(rule: TRules) =>
+  rule;
+
+// clone function mergeConfigs from stylelint repository
+export const mergeConfigs = (
+  ...configsOrNull: (Config | undefined | null | false)[]
+) => {
+  const configs = configsOrNull.filter((c): c is Config => !!c);
+
+  return {
+    plugins: [...new Set(configs.flatMap(c => c.plugins ?? []))],
+    overrides: [...new Set(configs.flatMap(c => c.overrides ?? []))],
+    extends: configs
+      .flatMap(c => c.extends ?? [])
+      .filter((item, index, arr) => arr.lastIndexOf(item) === index),
+    rules: configs.reduce(
+      (acc, config) => ({ ...acc, ...config.rules }),
+      {} as Config['rules'],
+    ),
+    ...configs.reduce(
+      (
+        acc,
+        { plugins: _p, overrides: _o, extends: _e, rules: _r, ...config },
+      ) => ({ ...acc, ...config }),
+      {} as Config,
+    ),
+  };
+};