From 3aae1928927bfa3d3d8bcadb40433814a67a3eae Mon Sep 17 00:00:00 2001
From: Rui Wu <wurui.dev@gmail.com>
Date: Sun, 14 Jul 2024 09:37:45 +0800
Subject: [PATCH] feat: introduce `extensionsWithStyleElement` option

---
 CHANGELOG.md    |  3 ++-
 README.md       |  7 +++++++
 README.zh-CN.md |  7 +++++++
 src/types.ts    |  8 ++++++++
 src/utils.ts    | 23 +++++++++++++++--------
 5 files changed, 39 insertions(+), 9 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 79405bc..14630de 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,7 +2,8 @@
 
 ## Unreleased
 
-- feat: support `astro` by default
+- feat!: remove `chokidar`
+- feat: introduce `extensionsWithStyleElement` option
 
 ## 4.4.0 (2024-02-24)
 
diff --git a/README.md b/README.md
index 7891ed4..4edec13 100644
--- a/README.md
+++ b/README.md
@@ -130,6 +130,13 @@ If you're using the plugin defaults, the plugin will only call [eslint.lintFiles
 
 If you enable the `lintOnStart` option or disable the `lintDirtyOnly` option, the option value will not take effect. You need to change `include` value to include this option value.
 
+### `extensionsWithStyleElement`
+
+- Type: `string[]`
+- Default: `['.vue', '.svelte']`
+
+The file extensions that may have `<style>` element. Used to determine if a file changes only CSS styles without being linted by ESLint.
+
 ### `eslintPath`
 
 - Type: `string`
diff --git a/README.zh-CN.md b/README.zh-CN.md
index 1da7ab5..23bdc01 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -130,6 +130,13 @@ export default defineConfig({
 
 如果你启用了 `lintOnStart` 选项或者禁用了 `lintDirtyOnly` 选项，这个选项值不会生效。你需要调整 `include` 值以包含该选项值。
 
+### `extensionsWithStyleElement`
+
+- 类型：`string[]`
+- 默认值：`['.vue', '.svelte']`
+
+可能带有 `<style>` 元素的文件扩展名。用于判断文件是否只更改了 CSS 样式而无需被 ESLint 校验。
+
 ### `eslintPath`
 
 - 类型：`string`
diff --git a/src/types.ts b/src/types.ts
index 5747754..2bec178 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -129,6 +129,14 @@ export interface ESLintPluginOptions extends ESLint.ESLint.Options {
    * 值以包含该选项值。
    */
   exclude: FilterPattern;
+  /**
+   * File extensions that may have `<style>` element.
+   *
+   * 可能包含 `<style>` 元素的扩展名。
+   *
+   * @default ['.vue', '.svelte']
+   */
+  extensionsWithStyleElement: string[];
   /**
    * Path to ESLint that will be used for linting. Use [dynamic
    * import](https://javascript.info/modules-dynamic-imports) under the hood.
diff --git a/src/utils.ts b/src/utils.ts
index 6643a38..c809099 100644
--- a/src/utils.ts
+++ b/src/utils.ts
@@ -26,6 +26,7 @@ export const getOptions = ({
   cacheLocation,
   include,
   exclude,
+  extensionsWithStyleElement,
   eslintPath,
   formatter,
   lintInWorker,
@@ -44,6 +45,7 @@ export const getOptions = ({
   cacheLocation: cacheLocation ?? '.eslintcache',
   include: include ?? ['src/**/*.{js,jsx,ts,tsx,vue,svelte}'],
   exclude: exclude ?? ['node_modules', 'virtual:'],
+  extensionsWithStyleElement: extensionsWithStyleElement ?? ['.vue', '.svelte'],
   eslintPath: eslintPath ?? 'eslint',
   formatter: formatter ?? 'stylish',
   lintInWorker: lintInWorker ?? false,
@@ -71,6 +73,7 @@ export const getESLintConstructorOptions = (
           'build',
           'include',
           'exclude',
+          'extensionsWithStyleElement',
           'eslintPath',
           'formatter',
           'lintInWorker',
@@ -120,11 +123,17 @@ export const isVirtualModule = (id: string) =>
 
 export const getFilePath = (id: string) => normalizePath(id).split('?')[0];
 
-export const shouldIgnoreModule = async (
-  id: string,
-  filter: Filter,
-  eslintInstance?: ESLintInstance,
-) => {
+export const shouldIgnoreModule = async ({
+  id,
+  filter,
+  eslintInstance,
+  extensionsWithStyleElement,
+}: {
+  id: string;
+  filter: Filter;
+  eslintInstance?: ESLintInstance;
+  extensionsWithStyleElement: string[];
+}) => {
   // virtual module
   if (isVirtualModule(id)) return true;
   // not included
@@ -132,9 +141,7 @@ export const shouldIgnoreModule = async (
   // style modules like xxx.vue?type=style
   const filePath = getFilePath(id);
   if (
-    ['.vue', '.svelte', '.astro'].some((extname) =>
-      filePath.endsWith(extname),
-    ) &&
+    extensionsWithStyleElement.some((extname) => filePath.endsWith(extname)) &&
     id.includes('?') &&
     id.includes('type=style')
   ) {