feat: introduce extensionsWithStyleElement option

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)
 

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`

README.zh-CN.md

@@ -130,6 +130,13 @@ export default defineConfig({
 
 如果你启用了 `lintOnStart` 选项或者禁用了 `lintDirtyOnly` 选项，这个选项值不会生效。你需要调整 `include` 值以包含该选项值。
 
+### `extensionsWithStyleElement`
+
+- 类型：`string[]`
+- 默认值：`['.vue', '.svelte']`
+
+可能带有 `<style>` 元素的文件扩展名。用于判断文件是否只更改了 CSS 样式而无需被 ESLint 校验。
+
 ### `eslintPath`
 
 - 类型：`string`

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.

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,21 +123,25 @@ 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
   if (!filter(id)) return true;
   // 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')
   ) {