@infernodesign/eslint-config 1.16.0 → 1.17.0

package/README.md

@@ -1,12 +1,12 @@
 # @infernodesign/eslint-config
 
-Shared ESLint flat config presets for Inferno Design projects.
+Shared ESLint flat config presets for Inferno Design projects. Orignally forked from [Antfu's eslint-config](https://github.com/antfu/eslint-config).
 
 - Autofix for formatting (aimed to be used standalone **without** Prettier)
 - Reasonable best practices and only one line of config.
 - Designed to work with TypeScript, JSX, Vue, JSON, YAML, Toml, Markdown, etc. Out-of-box.
 - Uses the [ESLint Flat Config](https://eslint.org/docs/latest/use/configure/configuration-files-new) for easy compilation.
-- Optional [React](#react), [Next.js](#nextjs), [Svelte](#svelte), [UnoCSS](#unocss), [Astro](#astro), [Solid](#solid) support.
+- Optional [React](#react), [Next.js](#nextjs), [Svelte](#svelte), [UnoCSS](#unocss), [Astro](#astro), [Storybook](#storybook), [Solid](#solid) support, [TailwindCSS](#tailwindcss) support.
 - Optional [formatters](#formatters) support for formatting CSS, HTML, XML, etc.
 - **Style principle**: Minimal for reading, stable for diff, consistent
   - Sorted imports, dangling commas
@@ -22,7 +22,7 @@ Shared ESLint flat config presets for Inferno Design projects.
 We provided a CLI tool to help you set up your project, or migrate from the legacy config to the new flat config with one command.
 
 ```bash
-bunx @infernodesign/eslint-config@latest
+npx @infernodesign/eslint-config@latest
 ```
 
 ### Manual Install
@@ -30,16 +30,16 @@ bunx @infernodesign/eslint-config@latest
 If you prefer to set up manually:
 
 ```bash
-bun add -D eslint @infernodesign/eslint-config
+npm i -D eslint @infernodesign/eslint-config
 ```
 
 And create `eslint.config.mjs` in your project root:
 
 ```js
 // eslint.config.mjs
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno()
+export default config()
 ```
 
 <details>
@@ -52,11 +52,11 @@ If you still use some configs from the legacy eslintrc format, you can use the [
 ```js
 // eslint.config.mjs
 import { FlatCompat } from '@eslint/eslintrc'
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
 const compat = new FlatCompat()
 
-export default inferno(
+export default config(
   {
     ignores: [],
   },
@@ -159,18 +159,18 @@ Normally you only need to import the `antfu` preset:
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno()
+export default config()
 ```
 
 And that's it! Or you can configure each integration individually, for example:
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
+export default config( {
   // Type of the project. 'lib' for libraries, the default is 'app'
   type: 'lib',
 
@@ -212,9 +212,9 @@ The `antfu` factory function also accepts any number of arbitrary custom config
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno(
+export default config(
   {
     // Configures for antfu's config
   },
@@ -292,17 +292,20 @@ Check out the [configs](https://github.com/antfu/eslint-config/blob/main/src/con
 
 Since flat config requires us to explicitly provide the plugin names (instead of the mandatory convention from npm package name), we renamed some plugins to make the overall scope more consistent and easier to write.
 
-| New Prefix | Original Prefix        | Source Plugin                                                                                         |
-| ---------- | ---------------------- | ----------------------------------------------------------------------------------------------------- |
-| `import/*` | `import-lite/*`        | [eslint-plugin-import-lite](https://github.com/9romise/eslint-plugin-import-lite)                     |
-| `nextjs/*` | `@next/next`           | [@next/eslint-plugin-next](https://github.com/vercel/next.js/tree/canary/packages/eslint-plugin-next) |
-| `node/*`   | `n/*`                  | [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n)                                |
-| `yaml/*`   | `yml/*`                | [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml)                                   |
-| `ts/*`     | `@typescript-eslint/*` | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint)            |
-| `style/*`  | `@stylistic/*`         | [@stylistic/eslint-plugin](https://github.com/eslint-stylistic/eslint-stylistic)                      |
-| `test/*`   | `vitest/*`             | [@vitest/eslint-plugin](https://github.com/vitest-dev/eslint-plugin-vitest)                           |
-| `test/*`   | `no-only-tests/*`      | [eslint-plugin-no-only-tests](https://github.com/levibuzolic/eslint-plugin-no-only-tests)             |
-| `next/*`   | `@next/next`           | [@next/eslint-plugin-next](https://github.com/vercel/next.js/tree/canary/packages/eslint-plugin-next) |
+| New Prefix                | Original Prefix                   | Source Plugin                                                                                         |
+| ------------------------- | --------------------------------- | ----------------------------------------------------------------------------------------------------- |
+| `import`                  | `import-lite`                     | [eslint-plugin-import-lite](https://github.com/9romise/eslint-plugin-import-lite)                     |
+| `nextjs`                  | `@next/next`                      | [@next/eslint-plugin-next](https://github.com/vercel/next.js/tree/canary/packages/eslint-plugin-next) |
+| `node`                    | `n`                               | [eslint-plugin-n](https://github.com/eslint-community/eslint-plugin-n)                                |
+| `react`                   | `@eslint-react`                   | [@eslint-react/eslint-plugin](https://github.com/eslint-react/eslint-plugin)                          |
+| `react-dom`               | `@eslint-react/dom`               | [@eslint-react/eslint-plugin](https://github.com/eslint-react/eslint-plugin)                          |
+| `react-hooks-extra`       | `@eslint-react/hooks-extra`       | [@eslint-react/eslint-plugin](https://github.com/eslint-react/eslint-plugin)                          |
+| `react-naming-convention` | `@eslint-react/naming-convention` | [@eslint-react/eslint-plugin](https://github.com/eslint-react/eslint-plugin)                          |
+| `style`                   | `@stylistic`                      | [@stylistic/eslint-plugin](https://github.com/eslint-stylistic/eslint-stylistic)                      |
+| `tailwindcss/*`           | `better-tailwindcss/*`            | [eslint-plugin-better-tailwindcss](https://github.com/unjs/eslint-plugin-better-tailwindcss)          |
+| `test`                    | `vitest`                          | [@vitest/eslint-plugin](https://github.com/vitest-dev/eslint-plugin-vitest)                           |
+| `ts`                      | `@typescript-eslint`              | [@typescript-eslint/eslint-plugin](https://github.com/typescript-eslint/typescript-eslint)            |
+| `yaml`                    | `yml`                             | [eslint-plugin-yml](https://github.com/ota-meshi/eslint-plugin-yml)                                   |
 
 When you want to override rules, or disable them inline, you need to update to the new prefix:
 
@@ -317,9 +320,9 @@ type foo = { bar: 2 }
 If you really want to use the original prefix, you can revert the plugin renaming by:
 
 ```ts
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno()
+export default config()
   .renamePlugins( {
     node: 'n',
     ts: '@typescript-eslint',
@@ -334,9 +337,9 @@ Certain rules would only be enabled in specific files, for example, `ts/*` rules
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno(
+export default config(
   {
     typescript: true,
     vue: true
@@ -361,9 +364,9 @@ We also provided the `overrides` options in each integration to make it easier:
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
+export default config( {
   typescript: {
     overrides: {
       'ts/consistent-type-definitions': [ 'error', 'interface' ],
@@ -384,19 +387,19 @@ export default inferno( {
 
 ### Config Composer
 
-Since v2.10.0, the factory function `inferno()` returns a [`FlatConfigComposer` object from `eslint-flat-config-utils`](https://github.com/antfu/eslint-flat-config-utils#composer) where you can chain the methods to compose the config even more flexibly.
+Since v2.10.0, the factory function `config()` returns a [`FlatConfigComposer` object from `eslint-flat-config-utils`](https://github.com/antfu/eslint-flat-config-utils#composer) where you can chain the methods to compose the config even more flexibly.
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno()
+export default config()
   .prepend(
     // some configs before the main config
   )
   // overrides any named configs
   .override(
-    'antfu/stylistic/rules',
+    'config/stylistic/rules',
     {
       rules: {
         'style/generator-star-spacing': [ 'error', { after: true, before: false } ],
@@ -411,70 +414,38 @@ export default inferno()
 // ...
 ```
 
-### Vue
-
-Vue support is detected automatically by checking if `vue` is installed in your project. You can also explicitly enable/disable it:
-
-```js
-// eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
-
-export default inferno( {
-  vue: true
-} )
-```
-
-#### Vue 2
-
-We have limited support for Vue 2 (as it's already [reached EOL](https://v2.vuejs.org/eol/)). If you are still using Vue 2, you can configure it manually by setting `vueVersion` to `2`:
-
-```js
-// eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
-
-export default inferno( {
-  vue: {
-    vueVersion: 2
-  },
-} )
-```
+### Optional Configs
 
-As it's in maintenance mode, we only accept bug fixes for Vue 2. It might also be removed in the future when `eslint-plugin-vue` drops support for Vue 2. We recommend upgrading to Vue 3 if possible.
+We provide some optional configs for specific use cases, that we don't include their dependencies by default.
 
-#### Vue Accessibility
+#### Astro
 
-To enable Vue accessibility support, you need to explicitly turn it on:
+To enable astro support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
-  vue: {
-    a11y: true
-  },
+export default config( {
+  astro: true,
 } )
 ```
 
 Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
 ```bash
-npm i -D eslint-plugin-vuejs-accessibility
+npm i -D eslint-plugin-astro
 ```
 
-### Optional Configs
-
-We provide some optional configs for specific use cases, that we don't include their dependencies by default.
-
 #### Formatters
 
 Use external formatters to format files that ESLint cannot handle yet (`.css`, `.html`, etc). Powered by [`eslint-plugin-format`](https://github.com/antfu/eslint-plugin-format).
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
+export default config( {
   formatters: {
     /**
      * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
@@ -508,9 +479,9 @@ To enable React support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
+export default config( {
   react: true,
 } )
 ```
@@ -527,13 +498,27 @@ To enable Next.js support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
+export default config( {
   nextjs: true,
 } )
 ```
 
+To configure Next.js, you can pass an object with the following options:
+
+```js
+// eslint.config.js
+import { config } from '@infernodesign/eslint-config'
+
+export default config( {
+  nextjs: {
+    // Specify the root directory for Next.js. Defaults to the cwd() of the Node.js process.
+    rootDir: 'src',
+  },
+} )
+```
+
 Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
 ```bash
@@ -546,9 +531,9 @@ To enable storybook support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
+export default config( {
   storybook: true,
 } )
 ```
@@ -565,9 +550,9 @@ To enable svelte support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
+export default config( {
   svelte: true,
 } )
 ```
@@ -578,42 +563,59 @@ Running `npx eslint` should prompt you to install the required dependencies, oth
 npm i -D eslint-plugin-svelte
 ```
 
-#### Astro
+#### Solid
 
-To enable astro support, you need to explicitly turn it on:
+To enable Solid support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
-  astro: true,
+export default config( {
+  solid: true,
 } )
 ```
 
 Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
 ```bash
-npm i -D eslint-plugin-astro
+npm i -D eslint-plugin-solid
 ```
 
-#### Solid
+#### TailwindCSS
 
-To enable Solid support, you need to explicitly turn it on:
+To enable TailwindCSS support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
-  solid: true,
+export default config( {
+  tailwindcss: true,
+} )
+```
+
+To configure the TailwindCSS support, you can pass an object with the following options:
+
+```js
+// eslint.config.js
+import { config } from '@infernodesign/eslint-config'
+
+export default config( {
+  tailwindcss: {
+    // Enable component class detection
+    detectComponentClasses: true,
+    // Specify the entry point for Tailwind CSS
+    // If not provided, the config will try to find the `global.css` or `globals.css` file in the project.
+    entryPoint: 'src/styles/globals.css',
+  },
 } )
 ```
 
 Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
 
 ```bash
-npm i -D eslint-plugin-solid
+npm i -D eslint-plugin-better-tailwindcss
 ```
 
 #### UnoCSS
@@ -622,9 +624,9 @@ To enable UnoCSS support, you need to explicitly turn it on:
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
+export default config( {
   unocss: true,
 } )
 ```
@@ -635,6 +637,57 @@ Running `npx eslint` should prompt you to install the required dependencies, oth
 npm i -D @unocss/eslint-plugin
 ```
 
+### Vue
+
+Vue support is detected automatically by checking if `vue` is installed in your project. You can also explicitly enable/disable it:
+
+```js
+// eslint.config.js
+import { config } from '@infernodesign/eslint-config'
+
+export default config( {
+  vue: true
+} )
+```
+
+#### Vue 2
+
+We have limited support for Vue 2 (as it's already [reached EOL](https://v2.vuejs.org/eol/)). If you are still using Vue 2, you can configure it manually by setting `vueVersion` to `2`:
+
+```js
+// eslint.config.js
+import { config } from '@infernodesign/eslint-config'
+
+export default config( {
+  vue: {
+    vueVersion: 2
+  },
+} )
+```
+
+As it's in maintenance mode, we only accept bug fixes for Vue 2. It might also be removed in the future when `eslint-plugin-vue` drops support for Vue 2. We recommend upgrading to Vue 3 if possible.
+
+#### Vue Accessibility
+
+To enable Vue accessibility support, you need to explicitly turn it on:
+
+```js
+// eslint.config.js
+import { config } from '@infernodesign/eslint-config'
+
+export default config( {
+  vue: {
+    a11y: true
+  },
+} )
+```
+
+Running `npx eslint` should prompt you to install the required dependencies, otherwise, you can install them manually:
+
+```bash
+npm i -D eslint-plugin-vuejs-accessibility
+```
+
 ### Optional Rules
 
 This config also provides some optional plugins/rules for extended usage.
@@ -679,9 +732,9 @@ You can optionally enable the [type aware rules](https://typescript-eslint.io/li
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
+export default config( {
   typescript: {
     tsconfigPath: 'tsconfig.json',
   },
@@ -702,9 +755,9 @@ This is to prevent unused imports from getting removed by the editor during refa
 
 ```js
 // eslint.config.js
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
+export default config( {
   isInEditor: false
 } )
 ```
@@ -716,7 +769,7 @@ If you want to apply lint and auto-fix before every commit, you can add the foll
 ```json
 {
   "simple-git-hooks": {
-    "pre-commit": "bun lint-staged"
+    "pre-commit": "npx lint-staged"
   },
   "lint-staged": {
     "*": "eslint --fix"
@@ -771,9 +824,9 @@ You can opt-in to the [`formatters`](#formatters) feature to format your CSS. No
 If you want to disable the opinionated rules, you can disable them with:
 
 ```ts
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '@infernodesign/eslint-config'
 
-export default inferno( {
+export default config( {
   lessOpinionated: true
 } )
 ```

package/dist/cli.js

@@ -1,3 +1,4 @@
+import { t as PACKAGE_NAME } from "./constants-DjBrEP6N.js";
 import fs from "node:fs/promises";
 import fs$1 from "node:fs";
 import path from "node:path";
@@ -8,7 +9,7 @@ import parse from "parse-gitignore";
 import { execSync } from "node:child_process";
 
 //#region package.json
-var version = "1.16.0";
+var version = "1.17.0";
 
 //#endregion
 //#region src/cli/constants.ts
@@ -89,10 +90,18 @@ const frameworkOptions = [
 		label: c.cyan("Solid"),
 		value: "solid"
 	},
+	{
+		label: c.magenta("Storybook"),
+		value: "storybook"
+	},
 	{
 		label: c.red("Svelte"),
 		value: "svelte"
 	},
+	{
+		label: c.yellow("TailwindCSS"),
+		value: "tailwindcss"
+	},
 	{
 		label: c.green("Vue"),
 		value: "vue"
@@ -121,7 +130,9 @@ const dependenciesMap = {
 	],
 	slidev: ["prettier-plugin-slidev"],
 	solid: ["eslint-plugin-solid"],
+	storybook: ["eslint-plugin-storybook"],
 	svelte: ["eslint-plugin-svelte", "svelte-eslint-parser"],
+	tailwindcss: ["eslint-plugin-better-tailwindcss"],
 	unocss: ["@unocss/eslint-plugin"],
 	vue: []
 };
@@ -130,9 +141,9 @@ const dependenciesMap = {
 //#region src/cli/utils.ts
 function getEslintConfigContent(mainConfig, additionalConfigs) {
 	return `
-import { inferno } from '@infernodesign/eslint-config'
+import { config } from '${PACKAGE_NAME}'
 
-export default inferno({
+export default config({
 ${mainConfig}
 }${additionalConfigs?.map((config) => `,{\n${config}\n}`).join("")})
 `.trimStart();
@@ -187,10 +198,12 @@ const versionsMap = {
 	"astro-eslint-parser": "^1.2.2",
 	"eslint": "^10.0.0",
 	"eslint-plugin-astro": "^1.5.0",
+	"eslint-plugin-better-tailwindcss": "^4.2.0",
 	"eslint-plugin-format": "^1.4.0",
 	"eslint-plugin-react-hooks": "^7.0.1",
 	"eslint-plugin-react-refresh": "^0.5.0",
 	"eslint-plugin-solid": "^0.14.5",
+	"eslint-plugin-storybook": "^10.2.8",
 	"eslint-plugin-svelte": "^3.15.0",
 	"prettier-plugin-astro": "^0.14.1",
 	"prettier-plugin-slidev": "^1.0.5",
@@ -202,11 +215,11 @@ const versionsMap = {
 async function updatePackageJson(result) {
 	const cwd = process.cwd();
 	const pathPackageJSON = path.join(cwd, "package.json");
-	p.log.step(c.cyan`Bumping @infernodesign/eslint-config to v${version}`);
+	p.log.step(c.cyan`Bumping ${PACKAGE_NAME} to v${version}`);
 	const pkgContent = await fs.readFile(pathPackageJSON, "utf-8");
 	const pkg = JSON.parse(pkgContent);
 	pkg.devDependencies ??= {};
-	pkg.devDependencies["@infernodesign/eslint-config"] = `^${version}`;
+	pkg.devDependencies[PACKAGE_NAME] = `^${version}`;
 	pkg.devDependencies.eslint ??= versionsMap.eslint;
 	const addedPackages = [];
 	if (result.extra.length) result.extra.forEach((item) => {
@@ -328,9 +341,9 @@ async function run(options = {}) {
 //#region src/cli/index.ts
 function header() {
 	console.log("\n");
-	p.intro(`${c.green`@infernodesign/eslint-config `}${c.dim`v${version}`}`);
+	p.intro(`${c.green`${PACKAGE_NAME} `}${c.dim`v${version}`}`);
 }
-const cli = cac("@infernodesign/eslint-config");
+const cli = cac(PACKAGE_NAME);
 cli.command("", "Run the initialization or migration").option("--yes, -y", "Skip prompts and use default values", { default: false }).option("--template, -t <template>", "Use the framework template for optimal customization: vue / react / svelte / astro", { type: [] }).option("--extra, -e <extra>", "Use the extra utils: formatter / perfectionist / unocss", { type: [] }).action(async (args) => {
 	header();
 	try {

package/dist/constants-DjBrEP6N.js

@@ -0,0 +1,5 @@
+//#region src/constants.ts
+const PACKAGE_NAME = "@infernodesign/eslint-config";
+
+//#endregion
+export { PACKAGE_NAME as t };