feat: add stylelint prettier mutation

Author: allohamora

src/categories/js/stylelint/config/config.interface.ts

@@ -1,8 +1,17 @@
+import { Mutation } from 'src/utils/mutation';
 import { NpmScript } from 'src/utils/npm';
 
+interface StylelintConfig {
+  extends: string[];
+  plugins: string[];
+  rules: Record<string, null | true | [] | [true, Record<string, boolean>]>;
+  overrides?: { files: string[]; customSyntax?: string }[];
+}
+
 export interface Config {
   devDependencies: string[];
   scripts: NpmScript[];
-  stylelintConfig: string;
+  stylelintConfig: StylelintConfig;
   stylelintIgnore: string;
+  mutations: Mutation<Config>[];
 }

src/categories/js/stylelint/config/default.config.ts

@@ -1,27 +1,23 @@
 import { readableMultilineString } from 'src/utils/string';
+import { prettierMutation } from '../stylelint.utils';
 import { Config } from './config.interface';
 
-const stylelintConfig = readableMultilineString`
-  {
-    "extends": [
-      "stylelint-config-standard",
-      "stylelint-config-rational-order-fix"
+const stylelintConfig: Config['stylelintConfig'] = {
+  extends: ['stylelint-config-standard', 'stylelint-config-rational-order-fix'],
+  plugins: ['stylelint-order', 'stylelint-config-rational-order-fix/plugin'],
+  rules: {
+    'declaration-empty-line-before': null,
+    'no-empty-first-line': null,
+    'order/properties-order': [],
+    'plugin/rational-order': [
+      true,
+      {
+        'border-in-box-model': false,
+        'empty-line-between-groups': false,
+      },
     ],
-    "plugins": [
-      "stylelint-order",
-      "stylelint-config-rational-order-fix/plugin"
-    ],
-    "rules": {
-      "declaration-empty-line-before": null,
-      "no-empty-first-line": null,  
-      "order/properties-order": [],
-      "plugin/rational-order": [true, {
-        "border-in-box-model": false,
-        "empty-line-between-groups": false
-      }]
-    }
-  }
-`;
+  },
+};
 
 const stylelintIgnore = readableMultilineString`
   node_modules
@@ -37,4 +33,5 @@ export const defaultConfig: Config = {
     { name: 'csslint', script: 'stylelint "src/**/*.css"' },
     { name: 'csslint:fix', script: 'stylelint "src/**/*.css" --fix' },
   ],
+  mutations: [prettierMutation],
 };

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

@@ -1,33 +1,29 @@
 import { readableMultilineString } from 'src/utils/string';
+import { prettierMutation } from '../stylelint.utils';
 import { Config } from './config.interface';
 
-const stylelintConfig = readableMultilineString`
-  {
-    "extends": [
-      "stylelint-config-standard",
-      "stylelint-config-rational-order-fix"
-    ],
-    "plugins": [
-      "stylelint-order",
-      "stylelint-config-rational-order-fix/plugin"
+const stylelintConfig: Config['stylelintConfig'] = {
+  extends: ['stylelint-config-standard', 'stylelint-config-rational-order-fix'],
+  plugins: ['stylelint-order', 'stylelint-config-rational-order-fix/plugin'],
+  rules: {
+    'declaration-empty-line-before': null,
+    'no-empty-first-line': null,
+    'order/properties-order': [],
+    'plugin/rational-order': [
+      true,
+      {
+        'border-in-box-model': false,
+        'empty-line-between-groups': false,
+      },
     ],
-    "rules": {
-      "declaration-empty-line-before": null,
-      "no-empty-first-line": null,  
-      "order/properties-order": [],
-      "plugin/rational-order": [true, {
-        "border-in-box-model": false,
-        "empty-line-between-groups": false
-      }]
+  },
+  overrides: [
+    {
+      files: ['**/*.{js,jsx,ts,tsx}'],
+      customSyntax: '@stylelint/postcss-css-in-js',
     },
-    "overrides": [
-      {
-        "files": ["**/*.{js,jsx,ts,tsx}"],
-        "customSyntax": "@stylelint/postcss-css-in-js"
-      }
-    ]
-  }
-`;
+  ],
+};
 
 const stylelintIgnore = readableMultilineString`
   node_modules
@@ -50,4 +46,5 @@ export const reactTsConfig: Config = {
     { name: 'csslint', script: 'stylelint "src/**/*.{css,js,jsx,ts,tsx}"' },
     { name: 'csslint:fix', script: 'stylelint "src/**/*.{css,js,jsx,ts,tsx}" --fix' },
   ],
+  mutations: [prettierMutation],
 };

src/categories/js/stylelint/stylelint.entrypoint.ts

@@ -9,6 +9,6 @@ export const stylelint = async () => {
   await installDevelopmentDependencies(...devDependencies);
   await addScripts(...scripts);
 
-  await addFileToRoot(STYLELINT_CONFIG_NAME, stylelintConfig);
+  await addFileToRoot(STYLELINT_CONFIG_NAME, JSON.stringify(stylelintConfig));
   await addFileToRoot(STYLELINT_IGNORE_NAME, stylelintIgnore);
 };

src/categories/js/stylelint/stylelint.utils.ts

@@ -0,0 +1,9 @@
+import { isPrettierInstalled } from '../prettier/prettier.utils';
+import { Config } from './config/config.interface';
+
+export const prettierMutation = async (config: Config) => {
+  if (await isPrettierInstalled()) {
+    config.devDependencies.push('stylelint-config-prettier', 'stylelint-prettier');
+    config.stylelintConfig.extends.push('stylelint-prettier/recommended');
+  }
+};