windicss / gridsome-plugin-windicss Goto Github PK

🍃 Windi CSS for Gridsome ⚡

License: MIT License

Shell 0.99% JavaScript 48.07% Vue 50.94%

gridsome-plugin-windicss's Introduction

⚠️ Windi CSS is Sunsetting ⚠️
We are sunsetting Windi CSS and we recommend new projects to seek for alternatives. Read the full blog post.

Windi CSS

Next generation utility-first CSS framework.

Why Windi CSS? 🤔

A quote from the author should illustrate his motivation to create Windi CSS:

When my project became larger and there were about dozens of components, the initial compilation time reached 3s, and hot updates took more than 1s with Tailwind CSS. - @voorjaar

By scanning your HTML and CSS and generating utilities on demand, Windi CSS is able to provide faster load times and a speedy HMR in development, and does not require purging in production.

Integrations

Windi CSS provides first-class integrations for your favorite tools, select yours and get started.

Frameworks	Package	Version
CLI	Built-in
VSCode Extension	windicss-intellisense
Vite	vite-plugin-windicss
Rollup	rollup-plugin-windicss
Webpack	windicss-webpack-plugin
Nuxt	nuxt-windicss
Svelte	svelte-windicss-preprocess
StencilJS	stencil-windicss^Community

Plugins 🛠

Check out plugins available for windicss.

Documentation 📖

Check the documentation website.

Discussions

We’re using GitHub Discussions as a place to connect with other members of our community. You are free to ask questions and share ideas, so enjoy yourself.

Contributing

If you're interested in contributing to windicss, please read our contributing docs before submitting a pull request.

Backers

License

Distributed under the MIT License.

gridsome-plugin-windicss's People

Contributors

Stargazers

Watchers

Forkers

michaelhthomas

gridsome-plugin-windicss's Issues

TypeError: Cannot read property '__expression' of undefined

After installing this plugin, chain webpack throws this error, along with an equally unhelpful stack trace.

TypeError: Cannot read property '__expression' of undefined
    at Object.toConfig (./node_modules/webpack-chain/src/Plugin.js:56:38)
    at ./node_modules/webpack-chain/src/Config.js:131:61
    at Array.map (<anonymous>)
    at module.exports.toConfig (./node_modules/webpack-chain/src/Config.js:131:40)
    at Compiler.resolveWebpackConfig (./node_modules/gridsome/lib/app/Compiler.js:53:38)
    at createWebpackConfig (./node_modules/gridsome/lib/develop.js:132:25)
    at async module.exports ./node_modules/gridsome/lib/develop.js:28:25)

Any ideas on what's causing this and how to fix it?

Steps to Replicate

Create new gridsome site
Install gridsome-plugin-windicss
Add plugin to configuration
Attempt to start dev server

Webpack build hangs

I have just been trying out this plugin, but it hangs when running gridsome develop or gridsome build:
49% building 333/334 modules 1 active ...ome/travis/projects/.../node_modules/windicss-webpack-plugin/dist/loaders/virtual-module.js!/home/travis/projects/.../virtual:windi.css

But weirdly, it deploys fine on Netlify, and works with a brand new project, so assume it is an issue with my current project. Don't know if you have any ideas that could help?

Details:

OS: Linux/Ubuntu
Node: v14.16.0
Gridsome: v0.7.23
gridsome-plugin-windicss: v1.0.2
Gridsome Template: adapted from https://github.com/thetre97/gridsome-starter-sanity-bulma

Thanks!

Migrating from tailwindcss

So i tried to migrate to windi from tailwindcss but some of the tailwind styles stopped working.

I did the following:

Removed tailwindcss and installed windicss
Installed the plugin gridsome-plugin-windicss
Renamed tailwind.config.js > windi.config.js
Removed @tailwind imports in my styles.scss

Any ideas?

TypeError: id.indexOf is not a function caused while working on development server

I am using gridsome-plugin-windicss version 1.0.2

I started having an error after starting the gridsome development server.

project/node_modules/@windicss/plugin-utils/dist/index.js:601
    if (files.includes(id) || files.includes(id.slice(0, id.indexOf("?"))))
                                                            ^

TypeError: id.indexOf is not a function
    at Object.isDetectTarget (project/node_modules/@windicss/plugin-utils/dist/index.js:601:61)
    at project/node_modules/windicss-webpack-plugin/dist/plugin.js:165:78
    at SyncHook.eval [as call] (eval at create (project/node_modules/webpack/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:7:1)
    at SyncHook.lazyCompileHook (project/node_modules/webpack/node_modules/tapable/lib/Hook.js:154:20)
    at Watchpack.<anonymous> (project/node_modules/webpack/lib/Watching.js:142:33)
    at Object.onceWrapper (events.js:422:26)
    at Watchpack.emit (events.js:315:20)
    at Watchpack._onChange (project/node_modules/watchpack/lib/watchpack.js:118:7)
    at Watchpack.<anonymous> (project/node_modules/watchpack/lib/watchpack.js:109:8)
    at Watcher.emit (events.js:315:20)
    at DirectoryWatcher.<anonymous> (project/node_modules/watchpack/lib/DirectoryWatcher.js:238:13)
    at processTicksAndRejections (internal/process/task_queues.js:75:11)

The error is caused isDetectTarget function in node_modules/@windicss/plugin-utils/dist/index.js. The error occurs when an id passed to the function is not a string.

A number looking like a timestamp (just numbers) is passed when the error occurs. Normally ids passed from gridsome to the function is a path.

Has anyone gotten an issue similar to this?

max-width classes not working

installed windicss plugin on a fresh install of gridsome. i am trying to set max-width of the page layout container mx-auto max-w-screen-lg not working. but width classes are working, if i use w-lg instead of max-w-screen-lg or max-w-lg its working.