Git Product home page Git Product logo

gridsome-plugin-windicss's Issues

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.

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?

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:

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

Any ideas?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.