fix: change stylelint configs to correct

Author: allohamora

src/categories/js/lint-staged/config/default.config.ts

@@ -3,5 +3,5 @@ import { Config } from './config.interface';
 
 export const defaultConfig: Config = {
   config: {},
-  mutations: [prettierMutation, stylelintMutation, eslintMutation('*.js'), jestMutation('*.js')],
+  mutations: [prettierMutation, stylelintMutation('*.css'), eslintMutation('*.js'), jestMutation('*.js')],
 };

src/categories/js/lint-staged/config/node:ts.config.ts

@@ -3,5 +3,5 @@ import { Config } from './config.interface';
 
 export const nodeTsConfig: Config = {
   config: {},
-  mutations: [prettierMutation, stylelintMutation, eslintMutation('*.ts'), jestMutation('*.ts')],
+  mutations: [prettierMutation, stylelintMutation('*.css'), eslintMutation('*.ts'), jestMutation('*.ts')],
 };

src/categories/js/lint-staged/config/react:ts.config.ts

@@ -0,0 +1,12 @@
+import { eslintMutation, jestMutation, prettierMutation, stylelintMutation } from '../lint-staged.utils';
+import { Config } from './config.interface';
+
+export const reactTsConfig: Config = {
+  config: {},
+  mutations: [
+    prettierMutation,
+    stylelintMutation('*.{ts,tsx}'),
+    eslintMutation('*.{ts,tsx}'),
+    jestMutation('*.{ts,tsx}'),
+  ],
+};

src/categories/js/lint-staged/lint-staged.config.ts

@@ -1,8 +1,10 @@
 import { jsCategoryState } from 'src/states/categories';
 import { defaultConfig } from './config/default.config';
 import { nodeTsConfig } from './config/node:ts.config';
+import { reactTsConfig } from './config/react:ts.config';
 
 export const [getConfig] = jsCategoryState.useConfigState({
   default: defaultConfig,
   'node:ts': nodeTsConfig,
+  'react:ts': reactTsConfig,
 });

src/categories/js/lint-staged/lint-staged.utils.ts

@@ -8,10 +8,9 @@ import { CLI_NAME as ESLINT_CLI_NAME } from '../eslint/eslint.const';
 import { isJestInstalled } from '../jest/jest.utils';
 import { isEslintInstalled } from '../eslint/eslint.utils';
 import { isStylelintInstalled } from '../stylelint/stylelint.utils';
-import { getPackageJson } from 'src/utils/npm';
 import { STYLELINT_CLI_NAME } from '../stylelint/stylelint.const';
 
-type ScriptFileExtension = '*.js' | '*.ts';
+type ScriptFileExtension = '*.js' | '*.ts' | '*.css' | '*.{ts,tsx}';
 
 interface OptionMutation {
   check: (config: LintStagedConfig, key: string, value: string) => boolean;
@@ -43,13 +42,13 @@ const undefinedOptionMutation: OptionMutation = {
 const optionMutations: OptionMutation[] = [arrayOptionMutation, stringOptionMutation, undefinedOptionMutation];
 
 export const addOptionToLintStagedConfig = (config: LintStagedConfig, key: string, value: string) => {
-  const finded = optionMutations.find(({ check }) => check(config, key, value));
+  const found = optionMutations.find(({ check }) => check(config, key, value));
 
-  if (!finded) {
+  if (!found) {
     throw new Error('option mutator is not found!');
   }
 
-  finded.mutate(config, key, value);
+  found.mutate(config, key, value);
 };
 
 export const huskyIntegration = async () => {
@@ -76,12 +75,10 @@ export const prettierMutation = async (config: LintStagedConfig) => {
   }
 };
 
-export const stylelintMutation = async (config: LintStagedConfig) => {
-  if (await isStylelintInstalled()) {
-    const packageJson = await getPackageJson();
-    const react = packageJson?.dependencies?.['react'];
-    const extensions = react ? '*.{css,js,jsx,ts,tsx}' : '*.css';
-
-    addOptionToLintStagedConfig(config, extensions, `${STYLELINT_CLI_NAME} --fix`);
-  }
+export const stylelintMutation = (fileExtension: ScriptFileExtension) => {
+  return async (config: LintStagedConfig) => {
+    if (await isStylelintInstalled()) {
+      addOptionToLintStagedConfig(config, fileExtension, `${STYLELINT_CLI_NAME} --fix`);
+    }
+  };
 };

src/categories/js/stylelint/config/react:ts.config.ts

@@ -43,8 +43,8 @@ export const reactTsConfig: Config = {
     '@stylelint/postcss-css-in-js',
   ],
   scripts: [
-    { name: 'csslint', script: 'stylelint "src/**/*.{css,js,jsx,ts,tsx}"' },
-    { name: 'csslint:fix', script: 'stylelint "src/**/*.{css,js,jsx,ts,tsx}" --fix' },
+    { name: 'csslint', script: 'stylelint "src/**/*.{css,ts,tsx}"' },
+    { name: 'csslint:fix', script: 'stylelint "src/**/*.{css,ts,tsx}" --fix' },
   ],
   mutations: [prettierMutation],
 };