Describe the bug
I use storybook with windicss webpack plugin and use extractors option like on documentation but there's error like below.

this is my windicss config

export default defineConfig({
  extract: {
    include: [
      "./packages/**/**/**/*{.js,.jsx,.ts,.tsx}",
      "./packages/**/**/**/**/*{.js,.jsx,.ts,.tsx}",
    ],
    extractors: [
      {
        extractor: (content) => {
          return { classes: content.match(/(?<=class:)[!@\w-]+/g) ?? [] }
        },
        extensions: ["tsx"],
      },
    ],
  },
  darkMode: "class",
  theme: {
    extend: {
      colors: {
        primary: colors.teal,
        secondary: colors.zinc,
      },
    },
  },
  plugins: [require("windicss/plugin/forms")],
})

Describe the bug
Module not found: Can't resolve 'windi.css'

To Reproduce
None
Expected behavior
Normal start.

Screenshots

Additional context
Add any other context about the problem here.

version: v1.3.0
os: mac os 11.4

weback-windicss-plugin
webpack-windicss-plugin

Describe the bug
Can't start dev server

To Reproduce
Steps to reproduce the behavior:

1. Create a new Next.js App from create-next-app then follow the structure on the example
2. Run the dev server

Error: Cannot find module '../../dist/index.js'
Require stack:
- /Users/Clarence/Web and Course/2 - Learning/learn-windicss/next.config.js
- /Users/Clarence/Web and Course/2 - Learning/learn-windicss/node_modules/next/dist/next-server/server/config.js
- /Users/Clarence/Web and Course/2 - Learning/learn-windicss/node_modules/next/dist/server/next.js
- /Users/Clarence/Web and Course/2 - Learning/learn-windicss/node_modules/next/dist/server/lib/start-server.js
- /Users/Clarence/Web and Course/2 - Learning/learn-windicss/node_modules/next/dist/cli/next-dev.js
- /Users/Clarence/Web and Course/2 - Learning/learn-windicss/node_modules/next/dist/bin/next
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.mod._resolveFilename (/Users/Clarence/Web and Course/2 - Learning/learn-windicss/node_modules/next/dist/build/webpack/require-hook.js:4:1784)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/Clarence/Web and Course/2 - Learning/learn-windicss/next.config.js:1:31)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14) {
  code: 'MODULE_NOT_FOUND',
  requireStack: [
    '/Users/Clarence/Web and Course/2 - Learning/learn-windicss/next.config.js',
    '/Users/Clarence/Web and Course/2 - Learning/learn-windicss/node_modules/next/dist/next-server/server/config.js',
    '/Users/Clarence/Web and Course/2 - Learning/learn-windicss/node_modules/next/dist/server/next.js',
    '/Users/Clarence/Web and Course/2 - Learning/learn-windicss/node_modules/next/dist/server/lib/start-server.js',
    '/Users/Clarence/Web and Course/2 - Learning/learn-windicss/node_modules/next/dist/cli/next-dev.js',
    '/Users/Clarence/Web and Course/2 - Learning/learn-windicss/node_modules/next/dist/bin/next'
  ]
}
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

hi, how can I friend storybook with windicss-webpack-plugin?

#102
after update 1.5.8 ，the vue-i18n-loader custom block <i18n> dose not work。the vue-i18n-loader didn't run any code

Hello, I found a bug.
Version
0.5.0

Reproduction link
This is difficult to reproduce.
Because special circumstances are needed, such as when using vue3 to apply taro, and when using taro-plugin-tailwind to apply windicss, it can be reproduced when the target of the build application is weapp.

Steps to reproduce
In the above case, run the miniprogram DevTools, Vue program is not generated by connection. Because under normal circumstances, The Webpack-loaders is like this.

The first loader is taro-loader, so pitcher-loader cause this situation.

What is expected?
The plugin cannot affect other plugin.

What is actually happening?
The plugin affect other plugin.

#

When I upgraded to the latest 0.5.3 version, I found that my hmr slowed down. It used to be at most 2 seconds and now it takes about 10 seconds.
Then I started to downgrade until 0.5.0 when it became normal.

Reproduce:
Head for ./example/vue2/package.json and change all versions of vue-cli tools to 5.0.0-alpha.8 (latest).
Run npm run build, an error occurred:
Syntax Error: Thread Loader (Worker 0) Cannot read property '$windyCSSService' of undefined

Hi, I'm trying to create a react repo without any cli.

I try your example and everything is fine.

But when I try to implement it with babel-loader, It only generated the class first time.

If I modify the class in code later, it will rebuild without any style change.

Here's my config

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");
const webpack = require("webpack");
const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
const dotenv = require("dotenv");

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const WindiCSSWebpackPlugin = require('windicss-webpack-plugin').default;

dotenv.config();

module.exports = (argvs) => {
  return {
    entry: "./src/index.js",
    module: {
      rules: [
        {
          test: /\.(ts|js)x?$/,
          exclude: /node_modules/,
          use: {
            loader: "babel-loader",
          },
        },
        {
          test: /\.css$/,
          use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
      ],
    },
    resolve: {
      extensions: [".tsx", ".ts", ".js", ".jsx"],
      alias: {},
    },
    plugins: [
      new CleanWebpackPlugin(),
      new HtmlWebpackPlugin({
        minify: false,
        template: "public/index.html",
        filename: "index.html",
        inject: "body",
        scriptLoading: "defer",
      }),
      new ForkTsCheckerWebpackPlugin({
        async: false,
        eslint: {
          files: "./src/**/*",
        },
      }),
      new MiniCssExtractPlugin({
        filename: "css/[name].[contenthash:8].css",
        chunkFilename: "css/[name].[contenthash:8].css",
      }),
      new webpack.HotModuleReplacementPlugin(),
      new ReactRefreshWebpackPlugin(),
      new WindiCSSWebpackPlugin(),
    ],
    output: {
      filename: "[name].[contenthash].js",
      path: path.resolve(__dirname, "../dist"),
    },
    devServer: {
      host: "0.0.0.0",
      overlay: true,
      disableHostCheck: true,
      port: 8081,
      historyApiFallback: {
        rewrites: [{ from: /./, to: "/index.html" }],
      },
    },
  };
};

.babelrc

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-typescript",
    ["@babel/preset-react", {
      "runtime": "automatic"
    }]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "regenerator": true
      }
    ]
  ]
}

I think problem might be something with babel-loader.
When I replace it with svelte-loader, it works well.

Describe the bug
When I change something in a page, be it some JSX, className value, some text, anything, the CSS stops working, and never recovers. It seems to occur whenever ANY sort of page gets built after an edit is made, prior to the page build. It doesn't even have to be a user-made page in /pages. It can even be the build page: /next/dist/pages/_error.

To Reproduce

1. Clone repository https://github.com/windicss/windicss-webpack-plugin
2. Run npm run dev:nextjs
3. Edit example/next/pages/index.jsx and change the top "Should be Yellow" to "Should be Yellow123". Hit save and see the change appear.
4. Go to any other page (force a 404 if needed, this works too, but do Step 2 to 4 quickly before it prebuilds).
5. Now go back to https://localhost:3000 and see the "Should be Yellow123", notice how it's clearly white BG and black text, default font-family, and the rest of the page is seemingly relatively blank CSS.

Expected behavior
The CSS should still have applied like normal.

Screenshots
Before:

After:

Additional context
Even refreshing the page multiple times, going back and forth between pages, etc. won't do anything. Only fix? Stop and restart the next dev.

xl:w-[calc(50%-(140px/2))] is not parsed
w-[calc(50%-(140px/2))] is not parsed
w-[calc(50%-(140px*2))] is not parsed
w-[calc(50%-(140px+2))] is not parsed
w-[calc(50%-(140px-2))] is not parsed

w-[calc(50%-70px)] is parsed
w-[calc(50%-(140px%2))] is parsed
xl:w-[calc(50%-(140px%2))] is parsed

Everything works fine on https://windicss.org/play so I suspect it is a webpack plugin issue. This forces me to calculate by hand where possible and to write custom CSS where not possible. This is a breaking bug.

Need to catch the exception from this line

          compiler.$windyCSSService.init();
          compiler.$windyCSSService.requestVirtualModuleUpdate("init", await compiler.$windyCSSService.generateCSS());

and pass on to the compiler OR don't run this code

Describe the bug
A clear and concise description of what the bug is.

replace code in example/next/pages/layout.jsx with

export default function Layout({ title, children }) {
  return (
-    <div id="layout-wrapper" className="bg-gray-100 text-gray-900 dark:(bg-gray-900 text-gray-100)">
+    <div id="layout-wrapper" className="bg-gray-100 text-gray-900">
      {children}
      <style jsx global>{`
        body {
          @apply m-0 p-0 w-100vw h-100vh overflow-hidden hover:(bg-blue-500 text-xs);
          font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI',
            'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
            'Helvetica Neue', 'sans-serif';
          -webkit-font-smoothing: antialiased;
          -moz-osx-font-smoothing: grayscale;
        }
      `}</style>
    </div>
  )
}

To Reproduce
Steps to reproduce the behavior:

1. Clone this repository
2. Run yarn in root && cd example/next && yarn && yarn dev
3. See error

Expected behavior
css in styled jsx should be translated

Screenshots

Can someone show me an example when this plugin is being used with Angular & Webpack?

Hi guys,

Thanks for your work on windicss.

I tried to add windicss in a Phoenix App. I've modified the webpack.config.js file by adding the WindiCSSWebpackPlugin.
When I add the import "windi.css"; in the app.js entry file, I get this error :
Module not found: Error: Can't resolve 'windi.css'

Where does this windi.css comes from ? (Sorry I'm not a webpack expert)
It seems to be a virtual module generated by the plugin, right ?
Is there a way to tell webpack to not look for it ?

Thanks !

"windicss": "3.0.12",
"windicss-webpack-plugin": "0.6.1"

Describe the bug
types: default exports doesn't work in commonjs.

Steps
Enable ts-check in next.config.js

// @ts-check

Then, ts-check error occurs:

When I change a template file nothing happens.

I'm using webpack and twig as a template engine.
I've tried both windicss-webpack-plugin and postcss-windicss.

The behavior is the same for both of these integration methods:
It extracts only on startup and never runs extraction again.

I understand that webpack doesn't know about my templates, so I've added 'webpack-watch-files-plugin' to trigger rebuild.

Any workarounds in that case?

Describe the bug
The loader removal operation was performed in the windicss-style-pitcher of the plug-in, which would cause other loaders to fail to get the loader options value configured in module.rules correctly, resulting in abnormal packing

To Reproduce
Steps to reproduce the behavior:

1. Clone repository 'https://github.com/keuby/unplugin-bug-demo'
2. Run 'yarn install && yarn build'
3. See error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots

Hi there,

The Next.js example doesn't seem to work. I've tried fixing the const require to not error, but even then it will not work.

Any help here would be appreciated, it seems like windi.css is not being imported?

Describe the bug
Sorry for my English I'm french :/
When upgrading from Next 11.1.2 to Next 12 this plugin seems to break on Vercel build :
[Error: ENOENT: no such file or directory, lstat '/vercel/path0/virtual:windi.css']

To Reproduce
Steps to reproduce the behavior:

1. Create a Next 12 project, implement windicss-webpack-plugin using

next.config.js

webpack(config) {
    config.plugins.push(new WindiCSSWebpackPlugin())
    return config
  },

in module.exports and
import 'windi.css'in _app.js
2. Deploy it to Vercel
3. See error

Expected behavior
No build error

Describe the bug
Optional chaining (?.) in dist/plugin.cjs make build crash while in Node.js version lower than 14

To Reproduce
Steps to reproduce the behavior:

1. Clone repository '...'
2. Run '....'
3. See error

Expected behavior
Build pass

Screenshots

Additional context
Add any other context about the problem here.

Describe the bug
As title. It seems windi.config.js change doesn't cause HMR on a next.js project.

To Reproduce
Steps to reproduce the behavior:

1. Clone repository: https://github.com/donrsh/issue-NextJS-HMR-on-windi-config-change
2. Run yarn dev
3. Visit http://localhost:3000
4. Modify extend color in windi.config.js (e.g. red: "#f00" -> red: "#0f0")

Expected behavior
Observe that the title that consumes text-red (pages/index.js - line15) class didn't change color. Even reload doesn't trigger the update. One needs to rerun the dev server for the change to apply.

Screenshots
The color of highlighted texts should change.

Additional context
I work on Windows.

Hey, trying to setup WindiCSS with Nuxt content for Cypress's documentation.

I followed the setup docs on this repo as well as the ones on the nuxt plugin, but after cutting over, my build hangs midway through.

The project is OSS so I have a failing branch here

Steps to reproduce are:

1. yarn
2. yarn start

If you run with debug on, the last line that logs out is this one

Describe the bug

AssertionError [ERR_ASSERTION]: [MFSU] package.json not found for dep windi.css which is imported from @/app.js

umi3 项目配置开启 msfu 时，会报找不到 windi.css 的错误。

this is my gridsome.config.js file

module.exports = {
  siteName: 'Gridsome',
  configureWebpack: (config) => {
    config.module.rules.push({
      test: /\.vue$/,
      use: [
        {
          loader: 'vue-windicss-preprocess',
          options: {
            config: 'tailwind.config.js', // tailwind config file path OR config object (optional)
            compile: false, // false: interpretation mode; true: compilation mode
            globalPreflight: true, // set preflight style is global or scoped
            globalUtility: true, // set utility style is global or scoped
            prefix: 'change-', // set compilation mode style prefix
          },
        },
      ],
    })
  },
  plugins: [
    {
      use: '@gridsome/source-strapi',
      options: {
        apiURL: `${process.env.API_URL || 'http://localhost:1337'}`,
        queryLimit: 1000, // Defaults to 100
        contentTypes: [`albums`],
      },
    },
  ],
}

i set compile to false but it still runs with Compilation Mode
i changed the prefix to change- to see if it reads my config but the result is still windi-

Describe the bug
Got error after following all of the instruction to install windi from webpack v1.7.5:
[eslint] No files matching '/Users/****/Documents/Code/*****/src/virtual:windi-devtools.js' were found.

in my src/index.tsx I already append:

import './virtual:windi.css'
import './virtual:windi-devtools'

Also when I tried to update some class using dev tools, my react app stop working with this error:
Error: ENOENT: no such file or directory, open '/Users/****/Documents/Code/****/node_modules/windicss-webpack-plugin/dist/core/dev-tools-update.js'
and from node_modules folder, I cannot find corefolder in the node_modules/windicss-webpack-plugin/dist

Is devtools feature is already supported for webpack?
I saw the PR #110 by @await-ovo already merged and released since v1.7.0

Thank you

To Reproduce
Steps to reproduce the behavior:

1. Create react app v5 with typescript
2. yarn eject
3. follow instruction on installing windicss from documentation for webpack
4. add import './virtual:windi-devtools' to index.tsx file

Expected behavior
I can change the class in the dev tools and reflect in the UI

Screenshots

Additional context

Describe the bug
I follow the tutorial "https://windicss.org/integrations/webpack.html" then when I run the "npm run dev"

"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",

terminal throw the error:
TypeError: Cannot read property 'afterCompile' of undefined
at WindiCSSWebpackPlugin.apply (F:\learn\windicss-tutorial\node_modules_windicss-webpack-plugin@1.6.4@windicss-webpack-plugin\dist\plugin.cjs:130:20)
at Compiler.apply (F:\learn\windicss-tutorial\node_modules.pnpm\[email protected]\node_modules\tapable\lib\Tapable.js:375:16)
at webpack (F:\learn\windicss-tutorial\node_modules.pnpm\[email protected]\node_modules\webpack\lib\webpack.js:33:19)
at startDevServer (F:\learn\windicss-tutorial\node_modules.pnpm\[email protected][email protected]\node_modules\webpack-dev-server\bin\webpack-dev-server.js:367:16)
at processOptions (F:\learn\windicss-tutorial\node_modules.pnpm\[email protected][email protected]\node_modules\webpack-dev-server\bin\webpack-dev-server.js:350:5)
at processTicksAndRejections (internal/process/task_queues.js:95:5)

Additional context

vue.config.js
when 0.2.7 I can use

new WebpackWindiCSSPlugin({
        scan: {
          dirs: [path.resolve(__dirname, "./src/"), path.resolve(__dirname, "../core/src/")],// this line
          fileExtensions: ["vue", "tsx"],
          exclude: ["node_modules", ".git", "public/**/*"],
        },
      }),

but 0.3.2,it does not work, I should change the 'dirs' to

new WebpackWindiCSSPlugin({
        scan: {
          dirs: ["./src", "../core/src/"], // [path.resolve(__dirname, "./src/"), path.resolve(__dirname, "../core/src/")],
          fileExtensions: ["vue", "tsx"],
          exclude: ["node_modules", ".git", "public/**/*"],
        },
      }),

Describe the bug
Node.js crashed when using windicss and mdx-bundler in Next.js dev mode.

To Reproduce
Steps to reproduce the behavior:

1. Clone repository https://github.com/tmkx/next-windi
2. Run pnpm dev
3. Open http://localhost:3000/posts/hello-world
4. See error

Behavior
mdx-bundler + dev/build = ✅
windi + dev/build = ✅
windi + mdx-bundler + build = ✅
windi + mdx-bundler + dev = ❌

Additional context
postcss-windicss has the same problem.
Tested in Node v14.17.3.

To Reproduce
Steps to reproduce the behavior:

1. Clone repository https://github.com/windicss/windicss-webpack-plugin/blob/main/example/umijs/README.md
2. Run '....'
3. See error

Following the installation guide here https://windicss.org/integrations/webpack.html for webpack, I get the following error:

[webpack-cli] Promise rejection: TypeError: WindiCSS is not a constructor
[webpack-cli] TypeError: WindiCSS is not a constructor
    at Object.<anonymous> (/home/webpack-5/webpack.common.js:237:5)
    at Module._compile (/home/webpack-5/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (/home/webpack-5/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/home/webpack-5/webpack.development.js:2:16)
    at Module._compile (/home/webpack-5/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1114:10)
    at Module.load (internal/modules/cjs/loader.js:950:32)
    at Function.Module._load (internal/modules/cjs/loader.js:790:14)
    at Module.require (internal/modules/cjs/loader.js:974:19)
    at require (/home/webpack-5/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.<anonymous> (/home/webpack-5/webpack.config.js:1:89)
    at Module._compile (/home/webpack-5/node_modules/v8-compile-cache/v8-compile-cache.js:194:30)

Why?

I am using webpack 5.

Describe the bug
The module seems to not recognize the class.

To Reproduce
Steps to reproduce the behavior:

1. Install Next@latest
2. Add windicss-webpack-plugin
3. Import it in next.config.js
4. See it's not recognized as a class

Expected behavior
When I started the project, the plugin was at version 1.4.10 and that seems to be working fine.
The issue breaks on the latest 1.5.5 version.

Here's my next.config.js

const WindiCSSWebpackPlugin = require("windicss-webpack-plugin").default;

module.exports = {
	reactStrictMode: true,
	webpack(config) {
		config.plugins.push(new WindiCSSWebpackPlugin());
		return config;
	},
	images: {
		deviceSizes: [828, 1080, 1200, 1920, 2048, 3840],
	},
};

I've also looked at the package in node_modules for both v1.4.10 and v1.5.5 and they both seem to export the same Class with a constructor.

EDIT:
I've created a simple Repo for the issue: https://github.com/HenrijsS/windicss-nextjs-bug
Try switching from v1.4.10 and v1.5.5

Describe the bug
Genetate duplicated css in dev mode

To Reproduce
I could provide a repository if you need.

Screenshots

<div p="t-10">This is a WindiCss Demo</div>

it's ok when first render.

then I change p="t-10" to p="t-15", it's still ok

but when I change p="t-15" back to p="t-10", code for p="t-10" is duplicated.

Describe the bug

I got an error when I try to build Next example.

To Reproduce

Steps to reproduce the behavior:

1. Clone windicss-webpack-plugin repository
2. Run yarn && yarn build in the root
3. Go into windicss-webpack-plugin/example/next and run yarn
4. Update next.config.js (add eslint field)

// const WindiCSS = require('windicss-webpack-plugin').default
const WindiCSS = require('../../dist').default

module.exports = {
  webpack: config => {
    config.plugins.push(new WindiCSS())
    return config
  },
  eslint: {
    ignoreDuringBuilds: true,
  },
}

5. Run yarn build and see the error

Expected behavior

Build succeeded.

Describe the bug
Production environment, scoped generates different dom id and style id; When I use the windicss plugin

To Reproduce
Steps to reproduce the behavior:

1. Clone repository '...'
2. Run '....'
3. See error

Expected behavior
I want the custom style to be displayed normally

Screenshots

Additional context
Add any other context about the problem here.

In my entry point

import 'windi.css';
import 'windi-devtools';

windi is imported correctly, but windi-devtools results in an empty virtual module being imported. if import 'windi.css'; works I expect import 'windi-devtools'; to work too.

import 'virtual:windi-devtools' breaks with

UnhandledSchemeError: Reading from "virtual:windi-devtools" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "virtual:" URIs.

No further information is provided by the readme.

Describe the bug

Failed to use in a TypeScript-format webpack configuration.

To Reproduce

An example for webpack.config.ts: (Note that it's .ts, not .js)

import * as webpack from 'webpack'
import WindiCSSWebpackPlugin from 'windicss-webpack-plugin'

const config: webpack.Configuration = {
  plugins: [new WindiCSSWebpackPlugin()]
}

Expected behavior

No type-check errors.

Actual behavior

With the code example above, TypeScript will complain:

Type 'WindiCSSWebpackPlugin' is not assignable to type '((this: Compiler, compiler: Compiler) => void) | WebpackPluginInstance'.
  Type 'WindiCSSWebpackPlugin' is not assignable to type 'WebpackPluginInstance'.
    Types of property 'apply' are incompatible.
      Type '(compiler: import("./node_modules/windicss-webpack-plugin/dist/plugin").Compiler) => void' is not assignable to type '(compiler: import("./node_modules/webpack/types").Compiler) => void'.
        Types of parameters 'compiler' and 'compiler' are incompatible.
          Type 'import("./node_modules/webpack/types").Compiler' is not assignable to type 'import("./node_modules/windicss-webpack-plugin/dist/plugin").Compiler'.
            Property '$windi' is missing in type 'Compiler' but required in type '{ $windi: WindiPluginUtils & { dirty: Set<string>; root: string; virtualModules: Map<string, string>; initException?: Error | undefined; invalidateCssModules: (resource: string, modules: string[]) => void; server: Server; }; }'.ts(2322)
plugin.d.ts(24, 5): '$windi' is declared here.

The reason I think is WindiCSSWebpackPlugin uses a extended Compiler type with additional property $windi, not the type Compiler directly from 'webpack', but for users' webpack configuration, it only can be the Compiler type from 'webpack'. This $windi property is assigned in the WindiCSSWebpackPlugin internally, so it shouldn't be exposed to users.

Importing css from videojs breaks build

Steps to reproduce

import videojs from "video.js";
import "video.js/dist/video-js.css";

Actual result

ERROR  in ./node_modules/video.js/dist/video-js.css 

Syntax Error: SyntaxError                                                

(1:1) Unclosed block

> 1 | @font-face {
    | ^
  2 |   font-family: VideoJS;
  3 |   src: url(data:application/font-woff;

 @ ./node_modules/video.js/dist/video-js.css
 @ ./node_modules/babel-loader/lib??ref--2-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/windicss-webpack-plugin/dist/loaders/transform-template.js!./components/TVideoPlayer.vue?vue&type=script&lang=js&

It seems that windicss is trying to process imported css.

That's a huge drawback as it stops you from using almost any existing component, which requires css.

Might be related to windicss/windicss#102 and windicss/windicss#199

Describe the bug
@layer The command does not work
Screenshots

Describe the bug
Appear error when run the example of next
windicss-webpack-plugin/example/next/node_modules/windicss-webpack-plugin/dist/plugin.cjs:45 const root = this.options.root ?? compiler.options.resolve?.alias?.["~"] ?? compiler.context; ^

Describe the bug
Lodash is used in src/loaders/transform-template.ts but it is not listed as a dependency in package.json. When using this plugin w. Next.js like described in the documentation I get this error:

yarn run v1.22.11
$ next dev
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
error - ./pages/_app.tsx
Error: Cannot find module 'lodash'
Require stack:
- /home(...)/node_modules/windicss-webpack-plugin/dist/loaders/transform-template.js
- /home/(...)/node_modules/next/dist/compiled/webpack/bundle5.js
- /home/(...)/node_modules/next/dist/compiled/webpack/webpack.js
(...)

To Reproduce
Steps to reproduce the behavior:

1. Create a new Next.js app using yarn create next-app
2. Add windicss-webpack-plugin using yarn add -D windicss-webpack-plugin
3. Configure windicss as described
4. Observe error (lodash is not installed)

Expected behavior
As windicss-webpack-plugin depends on lodash it should also be installed accordingly.

I just came to know about windicss and tried to use it with webpack - but receiving this below error.

[webpack-cli] TypeError: Cannot read property '~' of undefined
    at WindiCSSWebpackPlugin.apply (/Users/codekid/dev/windi-test/node_modules/windicss-webpack-plugin/dist/plugin.js:31:116)
    at createCompiler (/Users/codekid/dev/windi-test/node_modules/webpack/lib/webpack.js:71:12)
    at create (/Users/codekid/dev/windi-test/node_modules/webpack/lib/webpack.js:118:16)
    at webpack (/Users/codekid/dev/windi-test/node_modules/webpack/lib/webpack.js:142:32)
    at WebpackCLI.f [as webpack] (/Users/codekid/dev/windi-test/node_modules/webpack/lib/index.js:54:15)
    at WebpackCLI.createCompiler (/Users/codekid/dev/windi-test/node_modules/webpack-cli/lib/webpack-cli.js:1847:29)
    at async Command.<anonymous> (/Users/codekid/dev/windi-test/node_modules/@webpack-cli/serve/lib/index.js:68:30)
    at async Promise.all (index 1)
    at async Command.<anonymous> (/Users/codekid/dev/windi-test/node_modules/webpack-cli/lib/webpack-cli.js:1284:13)

Here is the package.json

{
  "devDependencies": {
    "html-webpack-plugin": "^5.3.1",
    "webpack": "^5.31.2",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^3.11.2",
    "windicss-webpack-plugin": "^0.3.3"
  },
  "scripts": {
    "dev": "webpack serve"
  }
}

And webpack.config.js file

const WebpackWindiCSSPlugin = require('windicss-webpack-plugin').default;

module.exports = {
  plugins: [new WebpackWindiCSSPlugin()],
};

Environment:

OS : macOS Big Sur

I tried to create a sample project in different level of webpack.config.js code but, it always breaks at this level. Am I missing anything?

Describe the bug
When installing windicss-webpack-plugin I get that error :

error - ./node_modules/next/dist/build/webpack/loaders/css-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[1]!./node_modules/next/dist/build/webpack/loaders/postcss-loader/src/index.js??ruleSet[1].rules[2].oneOf[8].use[2]!./node_modules/windicss-webpack-plugin/dist/loaders/virtual-module.js!./virtual:windi.css
Error: Cannot find module 'tailwindcss'
Require stack:
- E:\JEEBIE.ME\Projets\Clavier\dev\NEXT\eea-admin\node_modules\next\dist\build\webpack\config\blocks\css\plugins.js
- E:\JEEBIE.ME\Projets\Clavier\dev\NEXT\eea-admin\node_modules\next\dist\build\webpack\config\blocks\css\index.js
- E:\JEEBIE.ME\Projets\Clavier\dev\NEXT\eea-admin\node_modules\next\dist\build\webpack\config\index.js
- E:\JEEBIE.ME\Projets\Clavier\dev\NEXT\eea-admin\node_modules\next\dist\build\webpack-config.js
- E:\JEEBIE.ME\Projets\Clavier\dev\NEXT\eea-admin\node_modules\next\dist\server\dev\hot-reloader.js
- E:\JEEBIE.ME\Projets\Clavier\dev\NEXT\eea-admin\node_modules\next\dist\server\dev\next-dev-server.js
- E:\JEEBIE.ME\Projets\Clavier\dev\NEXT\eea-admin\node_modules\next\dist\server\next.js
- E:\JEEBIE.ME\Projets\Clavier\dev\NEXT\eea-admin\node_modules\next\dist\server\lib\start-server.js
- E:\JEEBIE.ME\Projets\Clavier\dev\NEXT\eea-admin\node_modules\next\dist\cli\next-dev.js
- E:\JEEBIE.ME\Projets\Clavier\dev\NEXT\eea-admin\node_modules\next\dist\bin\next
    at Array.map (<anonymous>)

next.config.ts

const WindiCSSWebpackPlugin = require('windicss-webpack-plugin')

module.exports = {
  reactStrictMode: true,
  images: {
    domains: ['media.graphcms.com'],
  },
  webpack(config) {
    config.plugins.push(new WindiCSSWebpackPlugin())
    return config
  },
}

_app.tsx

import { SessionProvider } from 'next-auth/react'
import Layout from "../components/Layout"
import 'windi.css'

function MyApp({
  Component,
  pageProps: { session, ...pageProps }
}) {
  return (
    <SessionProvider session={session}>
      <Layout>
        <Component {...pageProps} />
      </Layout>
    </SessionProvider>
  )
}

export default MyApp

windi.config.ts

import { defineConfig } from 'windicss/helpers'

export default defineConfig({
  extract: {
    include: ['**/*.{jsx,tsx,css}'],
    exclude: ['node_modules', '.git', '.next'],
  },
})

package.json

{
  "name": "eea-admin",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "bcrypt": "^5.0.1",
    "graphql": "^16.3.0",
    "graphql-request": "^4.0.0",
    "next": "12.0.10",
    "next-auth": "^4.0.0-beta.7",
    "react": "17.0.2",
    "react-dom": "17.0.2"
  },
  "devDependencies": {
    "@iconify/react": "^3.1.3",
    "@types/node": "^17.0.16",
    "@types/react": "^17.0.39",
    "eslint": "8.8.0",
    "eslint-config-next": "12.0.10",
    "windicss-webpack-plugin": "^1.6.4"
  }
}