feat: add stylelint

Author: allohamora

src/categories/js/index.ts

@@ -3,6 +3,7 @@ import { commitlint } from './commitlint/commitlint.entrypoint';
 import { eslint } from './eslint/eslint.entrypoint';
 import { husky } from './husky/husky.entrypoint';
 import { lintStaged } from './lint-staged/lint-staged.entrypoint';
+import { stylelint } from './stylelint/stylelint.entrypoint';
 import { prettier } from './prettier/prettier.entrypoint';
 import { standardVersion } from './standard-version/standard-version.entrypoint';
 import { releaseWorkflow } from './release-workflow/release-worflow.entrypoint';
@@ -21,6 +22,7 @@ const options = {
   standardVersion,
   eslint,
   lintStaged,
+  stylelint,
   releaseWorkflow,
   // named jestEntrypoint because in test environment jest name is reserved
   jest: jestEntrypoint,

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

@@ -0,0 +1,8 @@
+import { NpmScript } from 'src/utils/npm';
+
+export interface Config {
+  devDependencies: string[];
+  scripts: NpmScript[];
+  stylelintConfig: string;
+  stylelintIgnore: string;
+}

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

@@ -0,0 +1,40 @@
+import { readableMultilineString } from 'src/utils/string';
+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"
+    ],
+    "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
+  build
+  dist
+`;
+
+export const defaultConfig: Config = {
+  stylelintConfig,
+  stylelintIgnore,
+  devDependencies: ['stylelint', 'stylelint-config-standard', 'stylelint-order', 'stylelint-config-rational-order-fix'],
+  scripts: [
+    { name: 'csslint', script: 'stylelint "src/**/*.css"' },
+    { name: 'csslint:fix', script: 'stylelint "src/**/*.css" --fix' },
+  ],
+};

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

@@ -0,0 +1,53 @@
+import { readableMultilineString } from 'src/utils/string';
+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"
+    ],
+    "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"
+      }
+    ]
+  }
+`;
+
+const stylelintIgnore = readableMultilineString`
+  node_modules
+  .next
+  build
+  dist
+`;
+
+export const reactTsConfig: Config = {
+  stylelintConfig,
+  stylelintIgnore,
+  devDependencies: [
+    'stylelint',
+    'stylelint-config-standard',
+    'stylelint-order',
+    'stylelint-config-rational-order-fix',
+    '@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' },
+  ],
+};

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

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

src/categories/js/stylelint/stylelint.const.ts

@@ -0,0 +1,2 @@
+export const STYLELINT_CONFIG_NAME = '.stylelintrc';
+export const STYLELINT_IGNORE_NAME = '.stylelintignore';

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

@@ -0,0 +1,14 @@
+import { addFileToRoot } from 'src/utils/fs';
+import { addScripts, installDevelopmentDependencies } from 'src/utils/npm';
+import { getConfig } from './stylelint.config';
+import { STYLELINT_CONFIG_NAME, STYLELINT_IGNORE_NAME } from './stylelint.const';
+
+export const stylelint = async () => {
+  const { stylelintConfig, stylelintIgnore, scripts, devDependencies } = getConfig();
+
+  await installDevelopmentDependencies(...devDependencies);
+  await addScripts(...scripts);
+
+  await addFileToRoot(STYLELINT_CONFIG_NAME, stylelintConfig);
+  await addFileToRoot(STYLELINT_IGNORE_NAME, stylelintIgnore);
+};