modyqyw / vite-plugin-stylelint Goto Github PK

🚨 Stylelint plugin for Vite.

License: MIT License

TypeScript 97.78% JavaScript 2.22%

vite-plugin-stylelint's Introduction

Hi there. I'm ModyQyW. 👋🏻

I'm a front-end developer using Vue and React (mostly Vue 😝). I'm also a TypeScript full-stack developer (mostly CRUD 🤣). I keep learning to make myself better. You can check out my GitHub profile, my website, or my resume to learn more about me.

Please consider sponsor me if you think my work are valuable. 🤩

Please consider hire me for your project and pay me by the hour if you find some of my work experience may do a great help. 🥹

vite-plugin-stylelint's People

Contributors

Stargazers

Watchers

Forkers

hawtinzeng

vite-plugin-stylelint's Issues

Update prettier to v3

Clear and concise description of the problem

Update prettier to v3

Alternative

No response

Additional context

No response

Validations

Follow our Code of Conduct
Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Lint some files twice

The plugin gets two kinds of id in transform hook.

First kind of id:

/Users/wurui/Documents/libraries/vite-plugin-stylelint/examples/vue/src/tailwind.css
/Users/wurui/Documents/libraries/vite-plugin-stylelint/examples/vue/src/components/hello-world.vue

Second kind of id (with ? and type=style following):

/Users/wurui/Documents/libraries/vite-plugin-stylelint/examples/vue/src/components/hello-world.vue?vue&type=style&index=0&scoped=071dd9ae&lang.css

The plugins will receive two kinds of id when first start and receive a second kind when update a vue file. So, the plugin logs twice for hello-world.vue when first start and logs once when update hello-world.vue.

I think we can distinguish between different files. For .vue files (maybe .svelte files too), lint when receiving a second kine of id. For other files, lint when receiving a first kind of id.

It will be launched in v4.2.0 likely. Please be patient. Thanks.

Vite 5 semver in `peerDependencies`

描述问题

Now that Vite ^5.0.0 is released, probably the peerDependencies should be updated:

from:

    "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || 5.0.0-0"

to:

    "vite": "^2.0.0 || ^3.0.0 || ^4.0.0 || ^5.0.0"

复现

n/a

系统信息

n/a

使用的包管理器

npm

核对

遵循我们的行为准则
检查是否已经有一个报告相同错误的问题，以避免重复创建。
这是一个具体的错误。请开启 GitHub 讨论你的疑问。
所提供的复现是这个问题的最小复现。

Better emit errors / warings handling

Wrong `StylelintPluginOptions` type

Describe the bug

Argument of type '{ fix: boolean; include: string[]; }' is not assignable to parameter of type 'StylelintPluginOptions'.
  Object literal may only specify known properties, and 'fix' does not exist in type 'StylelintPluginOptions'.ts(2345)

Reproduction

In nuxt.config.ts file (Nuxt 3):

export default defineNuxtConfig({
	// ...
	vite: {
		plugins: [
			stylelint({
				fix: true,
			}),
		],
	}
});

System Info

系统信息

System:
    OS: Windows 10 10.0.22000
    CPU: (8) x64 Intel(R) Core(TM) i5-8300H CPU @ 2.30GHz
    Memory: 6.33 GB / 15.88 GB
  Binaries:
    Node: 16.11.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 8.0.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22000.120.0), Chromium (107.0.1418.24)
    Internet Explorer: 11.0.22000.120

Used Package Manager

yarn

Validations

Follow our Code of Conduct
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

The plugin doesn't report the source of synax error

Describe the bug 描述问题

The plugin doesn't report the source of synax error .
But ，it's ok when i use CLI.

不知道来源，就不知道改哪里了。

Reproduction 复现

This is my console when use plugin.

 WARN  19:06:27 [vite] warning: Unexpected empty block (block-no-empty)                                                                                                       19:06:27  
  Plugin: vite:stylelint

This is my console when use Cli.

G:\PHPproject\eslint>npx stylelint src/app.vue
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

src/app.vue
 17:6  ‼  Unexpected empty block   block-no-empty

Cli状态下是有错误出处的。

System Info 系统信息

window10

Used Package Manager 使用的包管理器

yarn

Validations 核对

Follow our Code of Conduct 遵循我们的行为准则
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate. 检查是否已经有一个报告相同错误的问题，以避免重复创建。
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead. 这是一个具体的错误。如有疑问，请打开GitHub 讨论。
The provided reproduction is a minimal reproducible of the bug. 所提供的复现是这个问题的最小复现。

Passing `context` to `lintFiles` when enable `chokidar` breaks the build

I apologize that I may not have expressed my opinion correctly and completely before. And sorry I am late in response.

Normally, enabling lintInWorker would only show errors and warnings in the console, but otherwise in the console and the browser.

Now, with chokidar enabled and lintInWorker disabled, I can't pass the context to the function (see https://github.com/ModyQyW/vite-plugin-stylelint/blob/v5.1.1/src/index.ts#L78-L98 comments) because it causes an error and just quits the Vite process. This leads to the problem mentioned in nuxt-modules/stylelint#89, where the plugin only displays error and warning messages in the console, not in the browser.

I don't think adding an option called failOnError solves this problem. To fix this, we need to pass the context and avoid the error.

I think we only need to quit the process if the lintOnStart option is enabled and an error is checked, which would request the user to deal with the error that exists first to avoid caching issues ⬇️, which is exactly what this plugin currently behaves like.

Originally posted by @ModyQyW in #50 (comment)

nuxt 3 vs vite-plugin-stylelint 4.0.0

Describe the bug

for a reason I don't understand vite-plugin-stylelint 4.0.0 crashes nuxt 3 on start while 3.3.3 works fine

ERROR  Cannot start nuxt:  Cannot read properties of undefined (reading 'formatters')
at formatError (/home/amery/projects/xxxx/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40281:46)
  at Context.error (/home/amery/projects/xxxx/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40277:19)
  at L (/home/amery/projects/xxxx/node_modules/vite-plugin-stylelint/dist/index.js:2:1208)
  at async Context.buildStart (/home/amery/projects/xxx/node_modules/.pnpm/[email protected]_r2tgf73irdyaz3c772gabqao7i/node_modules/vite-plugin-stylelint/dist/index.js:2:2031)
  at async Promise.all (index 5)
  at async hookParallel (/home/amery/projects/xxxx/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40168:9)
  at async Object.buildStart (/home/amery/projects/xxxx/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:40439:13)
  at async /home/amery/projects/xxxx/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:62181:13
  at async Module.createServer (/home/amery/projects/xxxx/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-5605cfa4.js:62206:9)
  at async buildClient (/home/amery/projects/xxxx/node_modules/.pnpm/@[email protected]_qj7x6gp3rczsq4mh5nosxx3oaq/node_modules/@nuxt/vite-builder/dist/shared/vite-builder.1c88b3ee.mjs:299:24)

Reproduction

My integration is very simple, nuxt.config.ts looks like this:

import StylelintPlugin from "vite-plugin-stylelint";

const autoFix: boolean = false;

export default defineNuxtConfig({
  [...]

  vite: {
    server: {
      strictPort: true,
    },

    plugins: [
      StylelintPlugin({
        fix: autoFix,
      }),
    ],
  },
});

### System Info

```Shell
$ pnpx envinfo --system --binaries --browsers
.../../../.pnpm-store/v3/tmp/dlx-21225   |   +1 +
.../../../.pnpm-store/v3/tmp/dlx-21225   | Progress: resolved 1, reused 1, downloaded 0, added 1, done

  System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i7-8665U CPU @ 1.90GHz
    Memory: 13.78 GB / 31.02 GB
    Container: Yes
    Shell: 5.1.16 - /bin/bash
  Binaries:
    Node: 16.18.1 - /usr/bin/node
    Yarn: 1.22.19 - /usr/bin/yarn
    npm: 8.9.0 - ~/projects/xxx/bin/npm

$ pnpm list
Legend: production dependency, optional only, dev only

xxxx@22.12.1+dev /home/amery/projects/xxxx/web/client (PRIVATE)

dependencies:
@xxx/xx-types link:../../src/packages/types
@nuxtjs-alt/proxy 2.1.2
@pinia/nuxt 0.4.6
@popperjs/core 2.11.6
bootstrap link:../../../../github.com/amery/bootstrap-ssr
bootstrap-vue-3 link:../../../../github.com/amery/bootstrap-vue-3-ssr/packages/bootstrap-vue-3
pinia 2.0.28

devDependencies:
@nuxtjs/eslint-config-typescript 12.0.0  nuxt 3.0.0                               stylelint-config-recommended-vue 1.4.0   
eslint 8.29.0                            postcss-html 1.5.0                       stylelint-prettier 2.0.0                 
eslint-config-prettier 8.5.0             prettier 2.8.1                           typescript 4.9.4                         
eslint-plugin-prettier 4.2.1             sass 1.56.2                              vite-plugin-eslint 1.8.1                 
eslint-plugin-ssr-friendly 1.2.0         stylelint 14.16.0                        vite-plugin-stylelint 4.0.0              
eslint-plugin-vue 9.8.0                  stylelint-config-prettier 9.0.4          
npm-run-all 4.1.5                        stylelint-config-recommended-scss 8.0.0  

[22:54:17] [amery@d4902d6312b5(pts/0)client]$ pnpm info vite

vite@4.0.0 | MIT | deps: 5 | versions: 391
Native-ESM powered web dev build tool
https://github.com/vitejs/vite/tree/main/#readme

bin: vite

dist
.tarball: https://registry.npmjs.org/vite/-/vite-4.0.0.tgz
.shasum: b81b88349a06b2faaa53ae14cf96c942548e3454
.integrity: sha512-ynad+4kYs8Jcnn8J7SacS9vAbk7eMy0xWg6E7bAhS1s79TK+D7tVFGXVZ55S7RNLRROU1rxoKlvZ/qjaB41DGA==
.unpackedSize: 3.2 MB

dependencies:
esbuild: ^0.16.3 fsevents: ~2.3.2 postcss: ^8.4.19 resolve: ^1.22.1 rollup: ^3.7.0   

maintainers:
- soda <npm@haoqun.me>
- vitebot <vitejs.twitter@gmail.com>
- yyx990803 <yyx990803@gmail.com>
- patak <matias.capeletto@gmail.com>
- antfu <anthonyfu117@hotmail.com>

dist-tags:
alpha: 4.0.0-alpha.6  beta: 4.0.0-beta.7    latest: 4.0.0         

published yesterday by vitebot <vitejs.twitter@gmail.com>

Used Package Manager

pnpm

Validations

Follow our Code of Conduct
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

Svelte example

I use React and Vue mostly and know little about Svelte. Also, I have no more time to learn about Svelte. Welcome PR. :)

No filename or line number?

Describe the bug

error when starting dev server:
Error: Unexpected duplicate "display" (declaration-block-no-duplicate-properties)
    at formatError (/Users/whatever/Documents/company/project/node_modules/vite/dist/node/chunks/dep-689425f3.js:39080:46)
    at Context.error (/Users/whatever/Documents/company/project/node_modules/vite/dist/node/chunks/dep-689425f3.js:39076:19)
    at /Users/whatever/Documents/company/project/node_modules/vite-plugin-stylelint/dist/index.js:1:2047
    at async S (/Users/whatever/Documents/company/project/node_modules/vite-plugin-stylelint/dist/index.js:1:1627)
    at async Context.buildStart (/Users/whatever/Documents/company/project/node_modules/vite-plugin-stylelint/dist/index.js:1:2404)
    at async Promise.all (index 15)
    at async Object.buildStart (/Users/whatever/Documents/company/project/node_modules/vite/dist/node/chunks/dep-689425f3.js:39230:13)
    at async Server.httpServer.listen (/Users/whatever/Documents/company/project/node_modules/vite/dist/node/chunks/dep-689425f3.js:60350:21)

This output is completely garbled, even with sourcemaps inlined into my build. Why is there no filename or even a line number included in the report?

Reproduction

Use SFC syntax in Vite. Add issue to the styles.

<template>
...
</template>
<script setup lang="ts">
// ...
});
</script>
<style lang="scss">
// ... errors in here
</style>

// my vite config
  // Note: Only For Production Build
  build: {
    sourcemap: 'inline',
    lib: {
      entry: path.resolve(__dirname, 'src/entry.ts'),
      formats: ['cjs', 'umd'],
      name: 'connect',
      fileName: 'connect',
    },
    rollupOptions: {
      output: {
        assetFileNames: 'connect.[ext]',
      },
    },
  },

  plugins: [
    vue(),
    checker({
      vueTsc: true,
    }),
    eslint({
      fix: true,
      lintOnStart: true,
      include: ['src/**/*.js', 'src/**/*.ts', '**/*.vue'],
    }),
    StylelintPlugin({
      lintOnStart: true,
      fix: true,
    }),
  ],

System Info

System:
    OS: macOS 12.0.1
    CPU: (10) arm64 Apple M1 Max
    Memory: 3.63 GB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.18.2 - ~/.nvm/versions/node/v14.18.2/bin/node
    Yarn: 1.22.17 - ~/.nvm/versions/node/v14.18.2/bin/yarn
    npm: 8.2.0 - ~/.nvm/versions/node/v14.18.2/bin/npm

Used Package Manager

yarn

Validations

Follow our Code of Conduct
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

Missing typescript definition for `fix` option

This option is not documented, but show in the first exemple.

This option is not included in the type definition export.

So if I try to use it, my app wont build and throw this error:

Argument of type '{ fix: boolean; }' is not assignable to parameter of type 'Options'. Object literal may only specify known properties, and 'fix' does not exist in type 'Options'.

Doesnt seem to work after buildStart

Describe the bug

I load up a simple app with a stylelint error (in this case I have added 0px as a value, so the Unexpected unit rule is triggered).
Saving the file after a change witht he error still there shows no console error. Adding a new styleint error into the file does not report any error.

On first load, I see an error in my console. If I create any other stylelint error, it will not output in my console.

If I start vite with no errors and then introduce one, it does not report any error.

Perhaps the issue is that I do not include any styles in my entry point at all?

I treat my scss as a seperate input:

build: {
	manifest: true,
	emptyOutDir: true,
	outDir: 'public',
	assetsDir: 'build',
	rollupOptions: {
		input: {
			js: `${env.VITE_SRC_DIR}/js/theme.js`,
			styles: `${env.VITE_SRC_DIR}/sass/style.scss`
		}
	}
},

Reproduction

This is my styleint config

{
    "extends": "stylelint-config-sass-guidelines",
    "rules": {
        "indentation": "tab",
        "string-quotes": null,
        "number-leading-zero": null,
        "no-missing-end-of-source-newline": null,
        "order/properties-alphabetical-order": null,
        "property-no-vendor-prefix": null,
        "max-nesting-depth": null,
        "selector-max-compound-selectors": 5,
        "selector-class-pattern": null,
        "selector-pseudo-element-colon-notation": "single",
        "declaration-property-value-disallowed-list": null,
        "color-named": [
            "never",
            {
                "ignore": ["inside-function"]
            }
        ],
        "selector-no-qualifying-type": [
            true,
            {
                "ignore": [
                    "attribute"
                ]
            }
        ]
    }
}

this is my plugin config:

stylelint({
	fix: false,
	include: ``${env.VITE_SRC_DIR}/sass/**/*.scss`,
	lintOnStart: false,
	lintInWorker: true
	// emitErrorAsWarning: true
})

And this is an offending scss file:

pre {
	margin-top: 0px;
	// top: 0px;
}

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700KF
    Memory: 40.96 GB / 63.86 GB
  Binaries:
    Node: 16.14.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.3.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.22621.963.0), Chromium (108.0.1462.76)
    Internet Explorer: 11.0.22621.1



### Used Package Manager

npm

### Validations

- [X] Follow our [Code of Conduct](https://github.com/ModyQyW/.github/blob/main/CODE_OF_CONDUCT.md)
- [X] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- [X] Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
- [X] The provided reproduction is a [minimal reproducible](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.

`output` is deprecated. Use `report` or `code` instead.

Describe the bug

The new version of stylelint shows that.
I think it's because of this line

const result = { ...linterResult };

Reproduction

Try to use it with stylelint@16

System Info

oh come on

Used Package Manager

pnpm

Validations

Follow our Code of Conduct
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

Update package for rollup v4 support

Describe the bug

Not compatible with rollup v4. Please update. Thank you.

─┬ vite-plugin-stylelint 5.1.1
  └── ✕ unmet peer rollup@"^2.0.0 || ^3.0.0": found 4.1.4

Reproduction

https://github.com/webdevnerdstuff/vuetify-color-picker-field

System Info

System:
    OS: macOS 13.5.2
    CPU: (10) arm64 Apple M1 Max
    Memory: 4.69 GB / 64.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 20.4.0 - ~/.nvm/versions/node/v20.4.0/bin/node
    Yarn: 1.22.19 - ~/node_modules/.bin/yarn
    npm: 9.7.2 - ~/.nvm/versions/node/v20.4.0/bin/npm
    pnpm: 8.6.9 - ~/.nvm/versions/node/v20.4.0/bin/pnpm

Used Package Manager

pnpm

Validations

Follow our Code of Conduct
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

Error: Dynamic require of "tty" is not supported

描述问题

failed to load config from /home/ian/acte/roomzz-v1/admin_ts/vite.config.ts
error when starting dev server:
Error: Dynamic require of "tty" is not supported
at file:///home/ian/acte/roomzz-v1/admin_ts/node_modules/.pnpm/[email protected]_hdr6qhp2cp4t47liatlblyjedi/node_modules/vite-plugin-stylelint/dist/index.js:1:376
at file:///home/ian/acte/roomzz-v1/admin_ts/node_modules/.pnpm/[email protected]_hdr6qhp2cp4t47liatlblyjedi/node_modules/vite-plugin-stylelint/dist/index.js:1:853
at file:///home/ian/acte/roomzz-v1/admin_ts/node_modules/.pnpm/[email protected]_hdr6qhp2cp4t47liatlblyjedi/node_modules/vite-plugin-stylelint/dist/index.js:1:491
at file:///home/ian/acte/roomzz-v1/admin_ts/node_modules/.pnpm/[email protected]_hdr6qhp2cp4t47liatlblyjedi/node_modules/vite-plugin-stylelint/dist/index.js:1:2468
at ModuleJob.run (node:internal/modules/esm/module_job:193:25)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
at async loadConfigFromBundledFile (file:///home/ian/acte/roomzz-v1/admin_ts/node_modules/.pnpm/[email protected]_p56klvi3zg3u723wp3set4h7pe/node_modules/vite/dist/node/chunks/dep-2285ba4f.js:63052:21)
at async loadConfigFromFile (file:///home/ian/acte/roomzz-v1/admin_ts/node_modules/.pnpm/[email protected]_p56klvi3zg3u723wp3set4h7pe/node_modules/vite/dist/node/chunks/dep-2285ba4f.js:62937:28)
at async resolveConfig (file:///home/ian/acte/roomzz-v1/admin_ts/node_modules/.pnpm/[email protected]_p56klvi3zg3u723wp3set4h7pe/node_modules/vite/dist/node/chunks/dep-2285ba4f.js:62558:28)
ELIFECYCLE Command failed with exit code 1.

复现

my vite.config.ts setting is

import react from "@vitejs/plugin-react-swc";
import { resolve } from 'path';
import eslintPlugin from 'vite-plugin-eslint';
import stylelintPlugin from 'vite-plugin-stylelint';
import { defineConfig } from 'vitest/config';

export default defineConfig({
test: {
globals: true,
environment: 'happy-dom',
},
plugins: [
react(),
stylelintPlugin(),
eslintPlugin()
],
resolve: {
alias: {
src: resolve(__dirname, 'src'),
},
},
});

系统信息

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
    Memory: 5.60 GB / 7.69 GB
    Container: Yes
    Shell: 5.8.1 - /usr/bin/zsh
  Binaries:
    Node: 18.12.0 - ~/.local/share/pnpm/node
    npm: 8.19.2 - ~/.local/share/pnpm/npm

使用的包管理器

pnpm

核对

遵循我们的行为准则
检查是否已经有一个报告相同错误的问题，以避免重复创建。
这是一个具体的错误。请开启 GitHub 讨论你的疑问。
所提供的复现是这个问题的最小复现。

Error: Dynamic require of "stylelint" is not supported

pnpm create vite my-vue-app --template vue-ts
pnpm install stylelint@^14 -D
pnpm install vite-plugin-stylelint -D
plugins: [vue(), StylelintPlugin()]
pnpm run dev

details:

Doesn't lint `@import` scss in Vue SFC <style> block

Importing a test.scss in that scope doesn't lint that test.scss still (it does compile!)

index.vue:

<style lang="scss" scoped>
@import "test";
</style>

test.scss:

.glorp {
  margin: 0;
  font-size: 40px;
      padding: 12px;
        clor: yellow;
}

test.scss DOES compile; but does NOT lint

Bare in mind: Running my linter via NPM does pickup the error:
script in package.json:
"lint:css": "stylelint ./**/*.{vue,scss} --fix",

npm run lint:css

> [email protected] lint:css
> stylelint ./**/*.{vue,scss} --fix


src/views/Home/test.scss
 5:9  ✖  Unexpected unknown property "clor"  property-no-unknown

Originally posted by @timenengwerda in #8 (comment)

SyntaxError: Named export 'formatters' not found

Describe the bug

file [email protected]_ngd3nnoldxv7gfhbrkt64hq3pu/node_modules/vite-plugin-stylelint/dist/index.mjs:2

SyntaxError: Named export 'formatters' not found. The requested module 'stylelint' is a CommonJS module, which may not support all module.exports as named exports.

Reproduction

Step 1: Create a vite project by use pnpm create vite my-vue-app --template vue-ts, cd my-vue-app , and pnpm install
Step 2: pnpm install stylelint vite-plugin-stylelint@^3.1.0 -D
Step 3: in the vite.config.js file, set as follows:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import StylelintPlugin from 'vite-plugin-stylelint';

export default defineConfig({
  plugins: [vue(),StylelintPlugin({fix:true})]
})

Step 4: pnpm run dev

Note: when replace the vite-plugin-stylelint@^3.1.0 by vite-plugin-stylelint@~3.0.10, the SyntaxError( Named export 'formatters' not found) does not occur

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i5-10210U CPU @ 1.60GHz   
    Memory: 7.50 GB / 15.84 GB
  Binaries:
    Node: 16.18.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.19 - C:\Program Files (x86)\Yarn\bin\yarn.CMD 
    npm: 8.19.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (107.0.1418.56)
    Internet Explorer: 11.0.19041.1566

Used Package Manager

pnpm

Validations

Follow our Code of Conduct
Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
Check that this is a concrete bug. For Q&A, please open a GitHub Discussion instead.
The provided reproduction is a minimal reproducible of the bug.

Failed to configure automatic recovery parameters

Option configuration does not provide fix detection interface.

missing parameter

No files matching the pattern "/__uno.css" were found.

Prompt "No files matching the pattern "/__uno.css" were found."
And I can't close or ignore it.

Switch to rollup and named export

Motivation

This plugin is using tsup to bundle for now. tsup is great. Bundling is fast with esbuild under the hood.

Dynamic require

I have stuck into dynamic require issues twice #16 #31.

how to fix dynamic require problem

// tsup.config.ts
import { defineConfig } from 'tsup';

export default defineConfig({
  ...,
  banner: ({ format }) => {
    if (format === 'esm') {
      return {
        // eslint-disable-next-line no-useless-escape
        js: `import {createRequire as __createRequire} from 'module';var require=__createRequire(import\.meta.url);`,
      };
    }
  },
});

The fix is simple. But I need to confirm if I need to add the fix, and the fix increases the package size.

Named export with `default`

module.exports.default is generated for now. But module.exports (default export) and module.exports.xxx (named export without default) are better to use.

Also, the fix is simple. But I have to add it everywhere. It is annoying.

how to fix module.exports.default problem

// tsup.config.ts
import { defineConfig } from 'tsup';

export default defineConfig({
  ...,
  footer: ({ format }) => {
    if (format === 'cjs') {
      return {
        js: `if (module.exports.default) module.exports = module.exports.default;`,
      };
    }
  },
});

Solutions

Dynamic require

This issue can be possibly solved by switching to another bundler.

There are some bundlers, such as webpack, rollup, unbuild and vite.

webpack is too complex to use and I don't want to spend much time on this.
unbuild is like tsup, but unbuild has less docs and minify issues.
vite library mode is based on rollup. So why not rollup directly?

I prefer rollup personally. Let me know if you have better choices.

Named export without `default`

We can keep named export with default, and add another named export with default. This is easy I think. Let me know if you have more ideas.

how does this plugin work with scss module?

the scss module source code is:
.myClassName {
background-color: grey;
}

the error I got while using this plugin:
[vite] Internal server error: Expected class selector to be kebab-case
Plugin: vite:stylelint
File: /home/ian/templates/react/src/components/MyComponent/style.module.scss
1 | ._myClassName_1x6hz_1 {
| ^
2 | background-color: grey;
3 | }
at formatError (/home/ian/templates/react/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38663:46)
at TransformContext.error (/home/ian/templates/react/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38659:19)
at /home/ian/templates/react/node_modules/.pnpm/[email protected]_wtr3vw7wiz4253njg4veakonmm/node_modules/vite-plugin-stylelint/dist/index.js:1:2442
at Array.forEach ()
at /home/ian/templates/react/node_modules/.pnpm/[email protected]_wtr3vw7wiz4253njg4veakonmm/node_modules/vite-plugin-stylelint/dist/index.js:1:2320
at Array.forEach ()
at /home/ian/templates/react/node_modules/.pnpm/[email protected]_wtr3vw7wiz4253njg4veakonmm/node_modules/vite-plugin-stylelint/dist/index.js:1:2275
at async TransformContext.transform (/home/ian/templates/react/node_modules/.pnpm/[email protected]_wtr3vw7wiz4253njg4veakonmm/node_modules/vite-plugin-stylelint/dist/index.js:1:2103)
at async Object.transform (/home/ian/templates/react/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:38900:30)
at async doTransform (/home/ian/templates/react/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-59dc6e00.js:55857:29)

V4 roadmap

I am preparing v4 and I want your opinions and suggestions.

Async mode default

Maybe in v4, or in v5.

This plugin lints files synchronously for now and slows down Vite a lot. Vite means quick in French but this plugin breaks the meaning.

I want to add async mode and make it the default mode. This can make the plugin faster, without slowing down Vite. However, the async mode will most likely no longer stop the serve or build process. Since errors and warnings can be found in the IDE while developing, I don't think this is a serious problem.

In the meantime, you may want vite-plugin-checker.

Apply during serve default

Done

This plugin is invoked for both serve and build for now. Since almost everyone uses this plugin during serve, it is meaningless to apply this plugin during build.

cacheLocation update

Done

To be more out of box, cacheLocation defaults to .stylelintcache.

Support vite@4

Done

See Vite 4 discussion. Support vite@3 if possible, but drop vite@2.

Support stylelint@15

Maybe in a minor version since stylelint@15 is not released

See stylelint preparing 15.0.0. Support stylelint@14 if possible, but drop stylelint@13.

Require node >= 14.18

Done

See Node.js realease schedule.

ESM default

Done

node >= 14.18 has full support for esm. Can remove esm bundle banner too.

Scss errors are shown only after manual reload or .vue file change

I have a pretty vanilla Vite+Vue3+Eslint+Stylelint project running at the moment to see how the setup works.

I've got everything working properly now except for the stylelinter:

Whenever I make an inline scss error and save it; nothing happens. No error is shown in my terminal or my server HMR overlay.
Only after I refresh my browser manually the error is shown. When I fix the error HMR kicks back in and reloads my page without any issue.

Making another change in my .vue file seems to do the trick aswell to fire off the error belatedly.

Since it's pretty annoying to manually refresh or to make another change in my vue file I'd like stylelint to just show me my error right off the bat.

This is my .vue file with the faulty scss:

<template>
  <div class="glorp">
    <h1>Home index</h1>
  </div>
</template>
<script>
export default {
  name: 'HomeIndex',
};
</script>
<style lang="scss" scoped>
.glorp {
  background: #avc;
}
</style>

Obviously #avc is incorrect; so it shows me the warning(after refresh or other change):

Internal server error: Unexpected invalid hex color "#avc" (color-no-invalid-hex)

My vite.config.js (Located in root, I've tried turning off other plugins etc one-by-one without results)

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import eslintPlugin from 'vite-plugin-eslint';
import StylelintPlugin from 'vite-plugin-stylelint';
import babel from 'vite-plugin-babel';
import { fileURLToPath } from "url";

const esLintConfig = eslintPlugin({
  fix: true,
  cache: false // when cache is true modules are only linted once on startup and when fixed it won't check for errors in the entire file again
});

const styleLintConfig = StylelintPlugin({
  fix: true,
  cache: false
});

export default defineConfig({
  server: {
    host: true
  },
  plugins: [
    styleLintConfig,
    esLintConfig,
    babel(),
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL("./src", import.meta.url)),
    },
  },
})

And my stylelint.config.js (located in root)

module.exports = {
  extends: [
    'stylelint-config-standard-scss', // Load the standard stylelint configuration
    'stylelint-config-recommended-vue',
    'stylelint-config-rational-order',
  ],
  plugins: [
    'stylelint-declaration-block-no-ignored-properties', // This plugin checks for ignored properties and throws error if so
  ],
};

And (for what it's worth) my package.json:

{
  "name": "piniata",
  "private": true,
  "version": "0.0.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "lint:css": "stylelint ./**/*.{vue,scss} --fix",
    "lint:js": "cross-env NODE_ENV=production eslint src --ext .js --ext .vue --fix"
  },
  "dependencies": {
    "vue": "^3.2.25",
    "vue-router": "^4.0.15"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^2.3.3",
    "@vue/eslint-config-airbnb": "^6.0.0",
    "cross-env": "^7.0.3",
    "eslint-plugin-vue": "^8.7.1",
    "sass": "^1.51.0",
    "sass-loader": "^12.6.0",
    "stylelint": "^14.8.2",
    "stylelint-config-rational-order": "^0.1.2",
    "stylelint-config-recommended-vue": "^1.4.0",
    "stylelint-config-standard-scss": "^3.0.0",
    "stylelint-declaration-block-no-ignored-properties": "^2.5.0",
    "vite": "^2.9.9",
    "vite-plugin-babel": "^1.0.0",
    "vite-plugin-eslint": "^1.6.0",
    "vite-plugin-stylelint": "^2.2.2"
  }
}

As an aside: Importing .scss files in my .vue file or just having existing .scss files aren't even detected by my config at all (although it does function and compile properly)

Vite 3.0.0 support

Hello, thank you for your package! Any plans to bump to [email protected]? :)

modyqyw / vite-plugin-stylelint Goto Github PK

vite-plugin-stylelint's Introduction

vite-plugin-stylelint's People

Contributors

Stargazers

Watchers

Forkers

vite-plugin-stylelint's Issues

Clear and concise description of the problem

Suggested solution

Alternative

Additional context

Validations

描述问题

复现

系统信息

使用的包管理器

核对

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

Describe the bug 描述问题

Reproduction 复现

System Info 系统信息

Used Package Manager 使用的包管理器

Validations 核对

Describe the bug

Reproduction

Used Package Manager

Validations

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

Describe the bug

Reproduction

System Info

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

描述问题

复现

系统信息

使用的包管理器

核对

Describe the bug

Reproduction

System Info

Used Package Manager

Validations

Motivation

Dynamic require

Named export with default

Solutions

Dynamic require

Named export without default

Async mode default

Apply during serve default

cacheLocation update

Support vite@4

Support stylelint@15

Require node >= 14.18

ESM default

Recommend Projects

Recommend Topics

Recommend Org

Named export with `default`

Named export without `default`