windicss / windicss-webpack-plugin Goto Github PK
View Code? Open in Web Editor NEW🍃 Windi CSS for webpack ⚡
Home Page: https://windicss.org/integrations/webpack.html
🍃 Windi CSS for webpack ⚡
Home Page: https://windicss.org/integrations/webpack.html
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:
Expected behavior
Build pass
Additional context
Add any other context about the problem here.
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:
yarn create next-app
yarn add -D windicss-webpack-plugin
Expected behavior
As windicss-webpack-plugin depends on lodash it should also be installed accordingly.
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
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:
yarn
in root && cd example/next
&& yarn
&& yarn dev
Expected behavior
css in styled jsx should be translated
Screenshots
Describe the bug
Can't start dev server
To Reproduce
Steps to reproduce the behavior:
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.
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?
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.
#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
weback-windicss-plugin
webpack-windicss-plugin
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)
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
npm run dev:nextjs
example/next/pages/index.jsx
and change the top "Should be Yellow" to "Should be Yellow123". Hit save and see the change appear.Expected behavior
The CSS should still have applied like normal.
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
.
Describe the bug
I got an error when I try to build Next example.
To Reproduce
Steps to reproduce the behavior:
windicss-webpack-plugin
repositoryyarn && yarn build
in the rootwindicss-webpack-plugin/example/next
and run yarn
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,
},
}
yarn build
and see the errorExpected behavior
Build succeeded.
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.
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
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:
Expected behavior
A clear and concise description of what you expected to happen.
To Reproduce
Steps to reproduce the behavior:
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
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:
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
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.
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 !
Describe the bug
I use storybook with windicss webpack plugin and use extractors option like on documentation but there's error like below.
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")],
})
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?
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.
#
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:
yarn
yarn start
If you run with debug on, the last line that logs out is this one
windicss-webpack-plugin/src/plugin.ts
Line 150 in 3c5c6b1
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.
error - ./components/Layout.jsx:13:8
Syntax error: Unexpected token, expected "}"
11 | `
12 | body {
> 13 | margin: 0;
| ^
14 | padding: 0;
15 | font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI',
16 | 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
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.
Describe the bug
The module seems to not recognize the class.
To Reproduce
Steps to reproduce the behavior:
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
Importing css from videojs
breaks build
import videojs from "video.js";
import "video.js/dist/video-js.css";
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
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
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
的错误。
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:
yarn dev
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.
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"
}
}
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
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 core
folder 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:
import './virtual:windi-devtools'
to index.tsx fileExpected behavior
I can change the class in the dev tools and reflect in the UI
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:
Expected behavior
I want the custom style to be displayed normally
Additional context
Add any other context about the problem here.
hi, how can I friend storybook with windicss-webpack-plugin?
Describe the bug
@layer The command does not work
Screenshots
Describe the bug
Node.js crashed when using windicss
and mdx-bundler
in Next.js dev mode.
To Reproduce
Steps to reproduce the behavior:
pnpm dev
http://localhost:3000/posts/hello-world
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.
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.
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?
Can someone show me an example when this plugin is being used with Angular & Webpack?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.