windicss / nuxt-windicss Goto Github PK

View Code? Open in Web Editor NEW

331.0 6.0 24.0 6.5 MB

🍃 Windi CSS for Nuxt ⚡

JavaScript 6.70% TypeScript 41.33% HTML 0.80% Vue 49.33% Sass 0.11% CSS 1.55% SCSS 0.18%

nuxt-windicss's Introduction

Windi CSS for Nuxt.js! ⚡️
^{Next generation utility-first CSS framework.}

Status: Stable v2 ✅ , bridge ✅, v3 ✅
_{Made possible by my Sponsor Program 💖
Follow me @harlan_zw 🐦}

Features

🧩 On-demand CSS utilities (Compatible with Tailwind CSS v2) and native elements style resetting
📄 Use directives in any CSS lang @apply, @variants, @screen, @layer, theme() (Note: Vite / Nuxt v3 has limited support)
🎳 Support Utility Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)
🧑‍🤝‍🧑 Plays nicely with Nuxt v3, Nuxt v2, @nuxt/vite and @nuxt/content
🔎 Integrated with windicss-analysis

Getting Started

Try it Online

Install

yarn add nuxt-windicss -D
# npm i nuxt-windicss -D

Usage

Within your nuxt.config.js add the following.

// nuxt.config.js
export default {
  buildModules: [
    'nuxt-windicss',
  ],
}

Nuxt 3

import { defineNuxtConfig } from 'nuxt3'

export default defineNuxtConfig({
  modules: [
    'nuxt-windicss',
  ],
})

Typescript

For Nuxt config typescript support, add the module within your tsconfig.json.

{
  "compilerOptions": {
    "types": [
      "nuxt-windicss"
    ]
  }
}

Windi Design In DevTools

Add the import with your existing windi imports and you'll have autocompletion in your Chrome DevTools! See "Design in DevTools" for more information.

export default {
  // ...  
  css: [
    'virtual:windi.css',
    'virtual:windi-devtools',
  ],
}

Windi Analyzer

An analyser tool for Windi CSS. Browse your utilities usages, have an overview of your design system, identify "bad practices", and more!

You can enable Windi Analzyer using the Nuxt config. The analyser is only available in development mode.

export default defineNuxtConfig({
  buildModules: [
    'nuxt-windicss',
  ],
  windicss: {
    analyze: true
  }
})

Alternatively, you can provide an object to control the analysis or the server.

windicss: {
  analyze: {
    analysis: {
      interpretUtilities: false,
    },
    // see https://github.com/unjs/listhen#options
    server: {
      port: 4444,
      open: true,
    }
  }
}

Migrating from tailwind

This module won't work with @nuxtjs/tailwindcss, you will need to remove it.

buildModules: [
-  '@nuxtjs/tailwindcss',
],

If you have a tailwind.config.js, please rename it to windi.config.js or windi.config.ts.

Follow the migration guide for other change details.

Ordering (optional)

By default, this all windi layers will be automatically imported for you.

If you'd like to change the layout ordering you can include the layers in any order you like.

For example, if you had a main.css which had h1 { margin-bottom: 30px; }, you might do something like this:

// nuxt.config.js
export default {
  // ...
  css: [
    // windi preflight
    'virtual:windi-base.css',
    // your stylesheets which overrides the preflight
    '@/css/main.css', 
    // windi extras
    'virtual:windi-components.css',
    'virtual:windi-utilities.css',
  ],
}

Documentation

Read the documentation for more details.

Credits

Windy team
@antfu Based on his Rollup / Vite implementation & his util package

License

nuxt-windicss's People

Contributors

Stargazers

Watchers

nuxt-windicss's Issues

Module leads to global SASS files being ignored.

Describe the bug
Using the nuxt-windicss-module within a nuxt project, leads to SASS files being ignored.
Changing the order of css files loaded via virtual entries at the nuxt.config.js css property doesn't solve it.
SCSS files are working fine tho.

To Reproduce

Setup nuxt, add the nuxt-windicss-module. (Ether automated, or separated - tested both)
Add a global sass file via nuxt.config.js

Version
Nuxt: 2.15.7
nuxt-windicss-module: 1.2.3

tv-toast error

https://github.com/acidjazz/tv-toast

export default defineConfig({
extract: {
include: ['**/.{vue,html,jsx,tsx}', 'node_modules/tv-/dist/tv-*.umd.min.js'],
exclude: ['node_modules', '.git'],
},


windicss: {
  options(options:any) {
    options.scanOptions.exclude = ['.git', '.github', '.nuxt/**/*']
    options.scanOptions.dirs = [
      './node_modules/vue-tailwind-color-picker/src',
      './components',
      './pages',
      './layouts',
      './node_modules/tv-*/dist/tv-*.umd.min.js'
    ]
    return options
  },
},

client.js?1b93:196 ./node_modules/tv-toast/dist/tv-toast.umd.min.js 1:12099Module parse failed: Unexpected token (1:12099)File was processed with these loaders: * ./node_modules/windicss-webpack-plugin/dist/loaders/pitcher.js * ./node_modules/windicss-webpack-plugin/dist/loaders/transform-template.jsYou may need an additional loader to handle the result of these loaders.> (function(t,a){"object"===typeof exports&&"object"===typeof module?module.exports=a():"function"===typeof define&&define.amd?define([],a):"object"===typeof exports?exports["tv-toast"]=a():t["tv-toast"]=a()})("undefined"!==typeof self?self:this,(function(){return function(t){var a={};function r(n){if(a[n])return a[n].exports;var e=a[n]={i:n,l:!1,exports:{}};return t[n].call(e.exports,e,e.exports,r),e.l=!0,e.exports}return r.m=t,r.c=a,r.d=function(t,a,n){r.o(t,a)||Object.defineProperty(t,a,{enumerable:!0,get:n})},r.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},r.t=function(t,a){if(1&a&&(t=r(t)),8&a)return t;if(4&a&&"object"===typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&a&&"string"!=typeof t)for(var e in t)r.d(n,e,function(a){return t[a]}.bind(null,e));return n},r.n=function(t){var a=t&&t.__esModule?function(){return t["default"]}:function(){return t};return r.d(a,"a",a),a},r.o=function(t,a){return Object.prototype.hasOwnProperty.call(t,a)},r.p="",r(r.s="fb15")}({8875:function(t,a,r){var n,e,l;(function(r,s){e=[],n=s,l="function"===typeof n?n.apply(a,e):n,void 0===l||(t.exports=l)})("undefined"!==typeof self&&self,(function(){function t(){var a=Object.getOwnPropertyDescriptor(document,"currentScript");if(!a&&"currentScript"in document&&document.currentScript)return document.currentScript;if(a&&a.get!==t&&document.currentScript)return document.currentScript;try{throw new Error}catch(v){var r,n,e,l=/.*at [^(]*\((.*):(.+):(.+)\)$/gi,s=/@([^@]*):(\d+):

[suggestion] rename npm package to nuxt-windicss

Hi! Thanks for this amazing module. I've a small suggestion to rename npm package from nuxt-windicss-module to nuxt-windicss to be consistent with 3rd party module naming convention.

increased time to launch development server after updating

hello! thanks for this module =)

Describe the bug

I don't think its a bug, but i'm experiencing increased loading time to launch the development server in nuxt when update nuxt-windicss module from 0.7.5 (windi 2) to 1.2.4 (windi 3)

using 0.7.5 (with nuxt-vite) the project runs in ~30 seconds

updating to 1.2.4, jumps to ~1 minute and 30 seconds

is this expected behavior?

in both situations, after loading, everything runs normal and really fast!

To Reproduce

udpdate from 0.7.5 to any after 0.8.0

cc: @harlan-zw

Error when using create-nuxt-app with Windi CSS

? Project name: webtest
? Programming language: JavaScript
? Package manager: Yarn
? UI framework: Windi CSS
? Nuxt.js modules: Axios - Promise based HTTP client
? Linting tools: ESLint, Prettier
? Testing framework: None
? Rendering mode: Universal (SSR / SSG)
? Deployment target: Server (Node.js hosting)
? Development tools: jsconfig.json (Recommended for VS Code if you're not using typescript)
? Continuous integration: None
? Version control system: Git

C:\Users\Admin\Desktop\test\webtest\.eslintrc.js
  0:0  error  Parsing error: No Babel config file detected for C:\Users\Admin\Desktop\test\webtest\.eslintrc.js. Either disable config file checking 
with requireConfigFile: false, or configure Babel so that it can find the config files

C:\Users\Admin\Desktop\test\webtest\components\NuxtLogo.vue
  0:0  error  Parsing error: No Babel config file detected for C:\Users\Admin\Desktop\test\webtest\components\NuxtLogo.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files

C:\Users\Admin\Desktop\test\webtest\components\Tutorial.vue
  0:0  error  Parsing error: No Babel config file detected for C:\Users\Admin\Desktop\test\webtest\components\Tutorial.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files

C:\Users\Admin\Desktop\test\webtest\nuxt.config.js
  0:0  error  Parsing error: No Babel config file detected for C:\Users\Admin\Desktop\test\webtest\nuxt.config.js. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files

C:\Users\Admin\Desktop\test\webtest\pages\index.vue
  0:0  error  Parsing error: No Babel config file detected for C:\Users\Admin\Desktop\test\webtest\pages\index.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files

Cause the @nuxt/content *.json file to be unusable

Describe the bug
Could not parse or query @nuxt/content *.json files

To Reproduce
Steps to reproduce the behavior:

visit https://codesandbox.io/s/nuxt-windi-m65mf
See error

Expected behavior
@nuxt/content .json files can be parse or query

Screenshots

Additional context
version:
nuxt: 2.15.14
@nuxt/content: 1.14.0
nuxt/windicss: 1.0.0

Not sure about this condition

https://github.com/windicss/nuxt-windicss-module/blob/master/src/index.ts#L49

I don't know how a hook could actually update the reference of options to be null or false 🤔

Not working with prefix

I'm using windicss along with Vuetify to avoid conflicting classes , so I need to add prefix in tailwind.config.js, but it's not working

Animations don't work with @apply

My animation classes don't work when used in an @apply statement:
Works:

<template>
  <div class="relative w-40 h-40 rounded-full bg-teal-500 opacity-60 animate-pulse"></div>
</template>

Doesn't work:

<template>
  <div class="pulse-class"></div>
</template>

<style scoped>
.pulse-class {
  @apply relative w-40 h-40 rounded-full bg-teal-500 opacity-60 animate-pulse;
}
</style>

postcss warnings on local dev environment

Describe the bug
Getting multiple warning messages thrown from postcss while running the latest nuxt-windicss-module.

WARN  You did not set any plugins, parser, or stringifier. Right now, PostCSS does nothing. Pick plugins for your case on https://www.postcss.parts/ and use them in postcss.config.js.

To Reproduce
Steps to reproduce the behavior:

Install nuxt-windicss-module in any nuxt project
Run npm run dev to start local dev environment
See error

Expected behavior
This behavior/warning message thrown from postcss can be turned off. Refer discussion in postcss repo here: postcss/postcss#1375

Screenshots

Additional context
I migrated from TailwindCSS to WindiCSS and removed postcss dependency - so this might be exactly coming from windicss module deps.

design flaws

"nuxt": "2.15.2",
"nuxt-windicss-module": "^0.2.1",

tailwind.config.js

const defaultTheme = require('windicss/defaultTheme')
const colors = require('windicss/colors')
module.exports = {
  darkMode: 'media', // or 'media' or 'class'
  theme: {
    container: {
      center: true
    },
    extend: {
      transitionProperty: {
        spacing: 'padding',
        search: 'padding box-shadow'
      },
      fontFamily: {
        sans: ['DM Sans', ...defaultTheme.fontFamily.sans]
      },
      colors: {
        cyan: colors.cyan,
        teal: colors.teal,
        amber: colors.amber,
        emerald: colors.emerald,
        rose: colors.rose
      }
    }
  },
  variants: {
    extend: {
      placeholderColor: ['hover', 'focus'],
      padding: ['hover', 'focus'],
      cursor: ['hover', 'focus'],
      height: ['hover', 'focus', 'focus-within'],
    }
  },
  plugins: [
    require('windicss/plugin/forms'),
    require('windicss/plugin/typography'),
    require('windicss/plugin/aspect-ratio')
  ]
}

nuxt.config.ts

import type { NuxtConfig } from '@nuxt/types'

const config: NuxtConfig = {
  build: {},
  buildModules: [
    '@nuxtjs/composition-api',
    '@nuxt/typescript-build',
    'nuxt-use-motion',
    'nuxt-i18n',
    'nuxt-windicss-module'
  ],
  components: true,
  css: [],
  env: {},
  vite: {
    optimizeDeps: {
      exclude: ['@vueuse/motion'],
    },
  },
  ssr: false,
  loading: { color: '#0c64c1' },
  modules: [['nuxt-tailvue', { toast: true }]],
  plugins: [
    '~/plugins/truncate',
    '~/plugins/debounce',
    '~/plugins/timeUtils',
    '~/plugins/v-emoji-picker',
    '~/plugins/vue-tailwind-color-picker',
  ],
}

export default config

and color problem
It breaks the tailwindcss of the libraries I use.
etc: https://github.com/mcoop320/vue-tailwind-color-picker
Problem

real design

Scanning third-party code from node_modules

I think is related with windicss/vite-plugin-windicss#76

So, it doesn't work when I want to add dirs to scan by third-party nuxt module.

const contentToPurge = [
  resolve(__dirname, '../components/'),
  resolve(__dirname, '../directives/')
]

  this.nuxt.hook('windicss:config', function (config) {
    config.scan.dirs = [...config.scan.dirs, ...contentToPurge]
  })

it works ideally with tailwind module.

Wrong hook name

https://github.com/windicss/nuxt-windicss-module/blob/1463cbdbe4007e25cf2f1d0f0e76fe8b22150fea/src/index.ts#L36

Nice work BTW :)

app.html causing loader issues

When the project has an app.html, there seems to be a parsing issue; (https://nuxtjs.org/docs/2.x/concepts/views/#document-apphtml)

Module parse failed: Unexpected token (1:0)                                                   friendly-errors 09:57:16
File was processed with these loaders:
 * ./node_modules/html-webpack-plugin/lib/loader.js
 * ./node_modules/windicss-webpack-plugin/dist/loaders/transform-template.js
You may need an additional loader to handle the result of these loaders.
> <!DOCTYPE html>
| <html {{ HTML_ATTRS }} class="overflow-y-scroll antialiased font-body">
|   <head {{ HEAD_ATTRS }}>

Workaround

windicss: {
    scan: {
      dirs: ['./'],
      exclude: [
        '.nuxt/**/*',
+       'app.html'
      ],
    },
    transformCSS: 'pre',
    preflight: {
      alias: {
        // add nuxt aliases
        'nuxt-link': 'a',
      },
    },
  },```

Compatibility with nuxt content

I'm using the content module with some html inside the markdown files and I'd love to use windi classes there.
Right now the classes are included only when I run nuxt generate but not when I'm in nuxt dev mode so I cant see the changes live when I'm editing the content. Is it there any hook or option to scan the classes inside the markdown files in the content directory?

I dont understand fully how windicss module works but if I'm not mistaken I think that it needs a rebuild for including new classes. Maybe one partial solution would be to include all default windicss classes into dev mode. The only flaw I see with this approach is that it would not work with auto-inferred values. Maybe in this case I could try to detect this classes and target a rebuild.

Thanks in advance and sorry if I'm not posting this issue in the right place or format (It's the first issue that I open in github).

Cannot build some components, Webpack error ?

Hello and thank you for your work on this module @loonpwn 👍

I'm trying to switch my project from @nuxtjs/tailwind to nuxt-windicss.

I've updated every of the imports from tailwind/ to windicss/.

The build seem to be passing fine, but components are breaking it.

It seem to be related with Webpack, but this project cannot switch on nuxt-vite yet. 😞

Here is a link to a reproduction: https://github.com/Tahul/nuxt-windicss-issue-repro

The stack trace:

ERROR  in ./components/atoms/CodeGroup.vue                                                                  friendly-errors 11:44:38
Module build failed (from ./node_modules/windicss-webpack-plugin/dist/loaders/transform-template.js):        friendly-errors 11:44:38
TypeError: Cannot convert undefined or null to object
    at Function.keys (<anonymous>)
    at Object.background [as bg] (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/windicss/lib/index.js:7041:16)
    at extract (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/windicss/lib/index.js:7638:42)
    at Processor.extract (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/windicss/lib/index.js:8164:16)
    at _gStyle (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/windicss/lib/index.js:8320:32)
    at /Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/windicss/lib/index.js:8359:21
    at Array.forEach (<anonymous>)
    at Processor.compile (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/windicss/lib/index.js:8355:13)
    at _loop_1 (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/@windicss/plugin-utils/dist/index.js:2644:47)
    at CSSParser3.parse (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/@windicss/plugin-utils/dist/index.js:2683:23)
    at _loop_1 (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/@windicss/plugin-utils/dist/index.js:2631:32)
    at CSSParser3.parse (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/@windicss/plugin-utils/dist/index.js:2683:23)
    at _loop_1 (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/@windicss/plugin-utils/dist/index.js:2631:32)
    at CSSParser3.parse (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/@windicss/plugin-utils/dist/index.js:2683:23)
    at _loop_1 (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/@windicss/plugin-utils/dist/index.js:2631:32)
    at CSSParser3.parse (/Users/tahul/Projets/nuxt/nuxtjs.com/node_modules/@windicss/plugin-utils/dist/index.js:2683:23)

Thank you a lot for your help! 😃

Error during build: Cannot convert undefined or null to object

When running npm run dev, I get this error after nuxt logs ✔ Nuxt files generated:

ERROR  Cannot convert undefined or null to object                                                          10:03:51

  at Function.entries (<anonymous>)
  at generateStaticStyle (node_modules/windicss/lib/index.js:7542:34)
  at extract (node_modules/windicss/lib/index.js:7559:16)
  at Processor.extract (node_modules/windicss/lib/index.js:8099:16)
  at _gStyle (node_modules/windicss/lib/index.js:8143:32)
  at node_modules/windicss/lib/index.js:8198:25
  at Array.forEach (<anonymous>)
  at Processor.interpret (node_modules/windicss/lib/index.js:8191:13)
  at Object.generateCSS (node_modules/@windicss/plugin-utils/dist/index.js:44609:32)
  at async safeStartService (node_modules/windicss-webpack-plugin/dist/plugin.js:194:78)
  at async node_modules/windicss-webpack-plugin/dist/plugin.js:207:13

Any idea on how to fix?

.pcss files are ignored from the compilation although extract is specified

Describe the bug
.pcss files are ignored from the compilation although extract is specified

To Reproduce

Go to this repository https://codesandbox.io/s/stupefied-bird-qyvqv?file=/assets/style/index.pcss
Inspect page and see that @apply styles from index.pcss file are not compiling

Expected behavior

@apply should work inside .pcss files along with other .pcss plugins installed such as postcss-import or postcss-nested

Additional context

In tailwind there is a way to control that compilation ordering via nuxt postcss property, like so:

postcss: {
    plugins: {
      'postcss-import': {},
      tailwindcss: {},
      'postcss-nested': {},
    }
  },

but for Windi I haven't seen anything like that described in docs, just changing tailwindcss with windicss in that array doesn't do the trick

[vite] avoid depending on buildModules existence

Ref: #5

It should be strictly avoided to depend on nuxt-vite existence to detect viteMode and only using hooks since module name can change and it is not same condition for nuxt3. (PS: It is masked now with nuxt-vite@30 so module will be broken with 29+)

Error: Module build failed: Expected an opening square bracket

Module build failed (from ./node_modules/css-loader/dist/cjs.js): CssSyntaxError (3173:26) /Development/nuxt-windicss-demo/@virtual/windi.css Expected an opening square bracket. �[90m 3171 | �[39m --tw-ring-opacity�[33m:�[39m 0.5�[33m;�[39m �[90m 3172 | �[39m�[33m}�[39m �[1m�[31m>�[39m�[22m�[90m 3173 | �[39m�[33m.dark�[39m �[33m.dark�[39m\[focus-within�[33m]�[39m\:border-brand-400�[33m[�[39mfocus-within�[33m]�[39m �[33m{�[39m �[90m | �[39m �[1m�[31m^�[39m�[22m �[90m 3174 | �[39m --tw-border-opacity�[33m:�[39m 1�[33m;�[39m �[90m 3175 | �[39m border-color�[33m:�[39m �[36mrgba�[39m�[36m(�[39m251, 191, 36, �[36mvar�[39m�[36m(--tw-border-opacity)�[39m�[36m)�[39m�[33m;�[39m

What other info can I provide to help here?

Updating the docs

I think we could remove this part: https://windicss.org/guide/vue.html#nuxt

And add a Nuxt page, what do you think?

Hot-reload does not work

Hello.
I've been struggling with windicss problem for a month now.
Hot-reload doesn't work with nuxt js.
All configuration is in windi.config.js.
In custom nuxt, empty config.
With the same build, tailwind supported hot development, without constantly reloading the page when the file was updated.

Only works with nuxt-vite

I think it is confusing that this plugin only works with nuxt-vite installed. I would like to use the nuxt-windicss module, but don't want to have nuxt-vite in all my project so I have to stay with the documented implementation (https://windicss.org/guide/vue.html#nuxt).
It would be great to also support nuxt installations besides nuxt-vite enabled ones.

To verify, I just tried to install it into an untouched npx create-nuxt-app app and it doesn't load windicss. As soon as I added nuxt-vite, everything started to work as expected.

Requiring the config before the Nuxt hook

We need a way to resolves the config before calling windicss:config hook to properly extend based on user defaults.

First attempt in #27 but lead to #28 and #29

shadow-color not working

i use shadow shadow-lime-500 in class. but not working

can't find shadow-lime-500 from page when yarn dev and yarn build && yarn start also.
how can i fix it?

[vite] Internal server error: /@windicss/windi.css: Unclosed bracket

Describe the bug
Seems like it's trying to compile a class named .ring, but I don't have that class for a while now, so it's gone. I don't know what the issue is, I'm using nuxt-vite and my repository is [eggsy/website](https://github.com/eggsy/website).

To Reproduce
Steps to reproduce the behavior:

Clone repository "eggsy/website"
Run it in dev mode (remove all .ring classes if you really want to make sure)
Try to visit the site
See error

Expected behavior
Should have built all classes with no issues.

Screenshots

Additional context
I tried clearing cache, upgrading modules and making sure that I don't have a .ring. I still have one on my repo, I remove it completely to see if it was the real problem, no luck, it didn't work, it still said .ring had problems.

TypeError: this.getOptions is not a function

reproduction https://github.com/productfrontenddeveloper/bug

yarn dev

ERROR Failed to compile with 1 errors friendly-errors 21:21:41

ERROR in ./virtual:windi.css friendly-errors 21:21:41

Module build failed (from ./node_modules/postcss-loader/dist/cjs.js): friendly-errors 21:21:41
TypeError: this.getOptions is not a function
at Object.loader (/ts/node_modules/postcss-loader/dist/index.js:40:24)
friendly-errors 21:21:41
@ ./virtual:windi.css 4:14-232 15:3-20:5 16:22-240
@ ./node_modules/nuxt-windicss/dist/template/windicss.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi ./.nuxt/composition-api/register.js ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

Editing global styles results in windicss not working

Describe the bug
When editing global css in nuxt in development mode, after hot reloading, windicss appears to not work.

To Reproduce
Steps to reproduce the behavior:

Use any nuxt/windicss project with global css specified in nuxt config
Run nuxt dev mode
Edit Global styles
Wait for hot reload
Observe page

Expected behavior
Windicss Works
Additional Context

Nuxt Config

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: 'ava-frontend',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' },
      { name: 'format-detection', content: 'telephone=no' },
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '~/assets/styles/global',
    '~/assets/styles/normalize'
  ],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    '@nuxtjs/eslint-module',
    "@nuxtjs/svg",
    'nuxt-windicss',
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    '@nuxtjs/axios',
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {},

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
  }
}

Some node_modules files aren't parsed since 0.7.x

Seems like WindiCSS breaks Nuxt PostCSS support and/or does not parse files correctly using latest versions.

Only happens when files are nested into node_modules.

We discussed this with @harlan-zw via Discord.

Reproduction:
https://github.com/Tahul/image

This repository uses 0.5.4.

Try using this into image/docs/package.json:

  "resolutions": {
    "nuxt-windicss": "0.8.0-2" // or 0.7.x
  }

windicss and sass doesn't work

Hello @loonpwn ,

My project uses lang sass inside components, but nothing is compiled anymore.

Exemple code:

<style lang="sass">
.container
  display: flex
  @apply bg-gray-500
</style>

The package is compatible with sass ?

Have a good day,
Florian

can't use filters plugin

Describe the bug
open nuxt project and run nuxt command
with error message:
segmentation fault (core dumped)
error Command failed with exit code 139.

nuxt: 2.15.4
nuxt-windicss: 0.7.1

To Reproduce
Steps to reproduce the behavior:

open https://codesandbox.io/s/mystifying-cloud-m65mf?file=/windi.config.js
restart sandbox
See error

Value Auto-infer calc function is not working

Describe the bug
use w-[calc(400px*var(--foo))] in https://windicss.org/play is working, but nuxt-windicss-module is not working

env:
nuxt: 2.15.4
nuxt-windicss: 1.1.3

To Reproduce
Steps to reproduce the behavior:

open codesandbox link
see error
open windi play link
see working state

Expected behavior
if working then you can see a red block

Screenshots

Additional context
w-[calc(400px)] if not calculate in calc function it's working

Error when using with DaisyUI

Describe the bug
I tried adding DaisyUI as a plugin for WindiCSS as per the following instructions: https://daisyui.com/docs/install/windicss/

This results in an error:

 ERROR  in ./virtual:windi.css                                friendly-errors 09:26:52

Module build failed (from ./node_modules/postcss-loader/src/index.js):
ParserError: Syntax Error at line: 1, column 19
    at /Users/stuartclark/Projects/nuxt-windicss-daisyui/virtual:windi.css:995:3
    at Parser.error (/Users/stuartclark/Projects/nuxt-windicss-daisyui/node_modules/postcss-values-parser/lib/parser.js:127:11)
    at Parser.operator (/Users/stuartclark/Projects/nuxt-windicss-daisyui/node_modules/postcss-values-parser/lib/parser.js:162:20)

I'm not certain that the responsibility lies here, but it seems the best place to start looking.

To Reproduce
Steps to reproduce the behavior:

Clone repository 'https://github.com/Decipher/nuxt-windicss-daisyui'
Run 'npm i && npm run dev'
See error

Alternatively, you can use the following GitPod snapshot: https://gitpod.io#snapshot/819f90a9-b16c-44a9-8d25-bccf84767634

Expected behavior
DaisyUI enabled within Nuxt, no errors.

Screenshots

Additional context

Some classes are not generated

The latest release does not generate some classes on a clean build
i am going back to nuxt/tailwindcss until a stable release has been released.

Thanks for your hard work!

Please support windicss 3

Is your feature request related to a problem? Please describe.
Please support windicss 3

Nuxt build fails

Since updating to the most current version (0.4.5), the build fails:

 FATAL  Nuxt build error                                                                                         15:49:55

  at WebpackBundler.webpackCompile (node_modules\@nuxt\webpack\dist\webpack.js:2127:21)
  at processTicksAndRejections (internal/process/task_queues.js:93:5)
  at async WebpackBundler.build (node_modules\@nuxt\webpack\dist\webpack.js:2076:5)
  at async Builder.build (node_modules\@nuxt\builder\dist\builder.js:327:5)
  at async Object.run (node_modules\@nuxt\cli\dist\cli-build.js:110:7)
  at async NuxtCommand.run (node_modules\@nuxt\cli\dist\cli-index.js:413:7)


   ╭─────────────────────────────╮
   │                             │
   │   ✖ Nuxt Fatal Error        │
   │                             │
   │   Error: Nuxt build error   │
   │                             │
   ╰─────────────────────────────╯

error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

As also mentioned in #29, this leads to the following error when running yarn dev:

 ERROR  Failed to compile with 2 errors                                                          friendly-errors 18:37:45


 ERROR  in ./.nuxt/views/app.template.html                                                       friendly-errors 18:37:45

Module parse failed: Unexpected token (1:0)                                                      friendly-errors 18:37:45
File was processed with these loaders:
 * ./node_modules/html-webpack-plugin/lib/loader.js
 * ./node_modules/windicss-webpack-plugin/dist/loaders/transform-template.js
You may need an additional loader to handle the result of these loaders.
> <!DOCTYPE html>
| <html {{ HTML_ATTRS }}>
|   <head {{ HEAD_ATTRS }}>
                                                                                                 friendly-errors 18:37:45
error                                                                                            friendly-errors 18:37:45
                                                                                                 friendly-errors 18:37:45

Steps to reproduce:

git clone https://github.com/itpropro/nuxt-windicss.git
cd nuxt-windicss
yarn
yarn build (or yarn dev)

EDIT:
Added the respective error when running yarn dev as mentioned in #29

Error: Cannot find module './middleware/viewer'

Hi loonpwn,

Thank you for this module.

However I have a problem with tailwind css viewer.

My error:

You have an idea ?

Thx 🙏

Add support for @layer base styles

Is your feature request related to a problem? Please describe.
TailwindCSS allows to specify base layer styles in external css/pcss file which will compile before components and utilities.
Why is it important to have such feature? Imagine a website that has base styles in external css files along with WindiCSS styles for different reasons, such as migrating to Windi or usage of LESS/SASS of some other CSS lib, or just having a way to specify base styles in usual css like syntax (not using config)

Describe the solution you'd like
https://tailwindcss.com/docs/adding-base-styles#using-css

Describe alternatives you've considered
An alternative would be a use of config, but it's not as convenient as plain CSS for base styles

Additional context
I would suggest having a property inside nuxt.config windicss object that would allow to specify base styles array of files without a need to create explicit tailwind.css file. It could look something like this:
nuxt.config.js

...
windicss: {
    base: ['./assets/css/base1', './assets/css/base2']
  }
...

Strange tailwind.config.js behaviour

I'm getting weird bugs when customizing tailwind.config.js ... changes don't get picked up in dev mode (build seems OK).

Cache is corrupted when run module with 'nuxt-build-optimisations' module

Describe the bug
Cache is corrupted when run module with 'nuxt-build-optimisations'. This force build-optimisation re-create the cache.

To Reproduce
Steps to reproduce the behavior:

Clone repository '...'
https://github.com/sondh0127/nuxt-windi-optimize
Run yarn dev
Close dev server (Ctrl+C)
Run yarn dev
See error

Expected behavior
Windi module will work well with module (nuxt-build-optimisations)

Screenshots
If applicable, add screenshots to help explain your problem.

Additional context

Preflight issue

Hey guys, I tried to migrate to WindiCSS on Nuxt and seems it does the job, build speed looks amazing and really fast, but I have one issue with preflight in tailwind.config.js it was easy to disable it as simple as this:
corePlugins: { preflight: false }
but seems that it does not work with windi, I'm not sure if I'm doing something wrong or it's not yet implemented.

Thanks for the help in advance.

Nuxt dev failed

On a fresh install, lunching yarn dev, I've got this error:

 ERROR  Failed to compile with 2 errors                                                                                                           friendly-errors 16:57:52


 ERROR  in ./.nuxt/views/app.template.html                                                                                                        friendly-errors 16:57:52

Module parse failed: Unexpected token (1:0)                                                                                                       friendly-errors 16:57:52
File was processed with these loaders:
 * ./node_modules/html-webpack-plugin/lib/loader.js
 * ./node_modules/windicss-webpack-plugin/dist/loaders/transform-template.js
You may need an additional loader to handle the result of these loaders.
> <!DOCTYPE html>
| <html {{ HTML_ATTRS }}>
|   <head {{ HEAD_ATTRS }}>
                                                                                                                                                  friendly-errors 16:57:52
error

Is this normal ?

version 0.4.4 and 0.4.5

increased memory usage from version 0.7.5 to 1.0.0

Hello, thanks for this module!

When I update from 0.7.5 to 1.0.0 and run pnpm dev

Memory usage jumps from 120 MB to 970 MB

Is this the expected behavior? If is I go back to 0.7.5.

I am worried about this because I dont have so much memory in my computer.

I'm using Nuxt 2.15.6, Nuxt Vite 0.1.1, Node 14.16.0

Build stalls when using <style> in .vue files

Similarily to windicss/vue-windicss-preprocess#3, when using <style> in .vue files, the build stalls.

package.json:

"nuxt": "^2.15.3",
...
"nuxt-windicss": "^0.3.1",`

@nuxt/content support assumes all files are markdown

By appending a style string to any files other than markdown causes the build to fail.

https://github.com/windicss/nuxt-windicss-module/blob/13e0659bac61933435548c7e3be380598f6fc01b/src/index.ts#L116-L128

.

vercel deploy error

hi,

vercel deploy gets stuck, doesn't building.
if i turn off nuxt-windicss on buildModules, that's fine.

vercel.json:

{
	"version": 2,
	"builds": [
	{
			"src": "nuxt.config.js",
			"use": "@nuxtjs/vercel-builder"
		}
	]
}

vercel log:

15:43:04.099  	Cloning github.com/xy/xy (Branch: main, Commit: xy)
15:43:04.954  	Cloning completed: 854.628ms
15:43:04.978  	Analyzing source code...
15:43:04.983  	Warning: Due to `builds` existing in your configuration file, the Build and Development Settings defined in your Project Settings will not apply. Learn More: https://vercel.link/unused-build-settings
15:43:06.184  	Installing build runtime...
15:43:09.035  	Build runtime installed: 2.850s
15:43:11.798  	Looking up build cache...
15:43:11.839  	Build cache not found
15:43:13.113  	[log] Running with @nuxt/vercel-builder version 0.21.2
15:43:13.113  	[log]  ----------------- Prepare build ----------------- 
15:43:13.113  	[log] Downloading files...
15:43:13.114  	[log] Working directory: /vercel/path0
15:43:13.116  	[log] Using yarn
15:43:13.143  	[info] Prepare build took: 30.081334 ms
15:43:13.143  	[log]  ----------------- Install devDependencies ----------------- 
15:43:13.490  	yarn install v1.22.10
15:43:13.508  	info No lockfile found.
15:43:13.512  	[1/5] Resolving packages...
15:43:14.171  	warning nuxt > @nuxt/babel-preset-app > [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
15:43:16.487  	warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
15:43:16.491  	warning nuxt > @nuxt/webpack > webpack > watchpack > watchpack-chokidar2 > chokidar > [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
15:43:17.209  	warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > [email protected]: https://github.com/lydell/resolve-url#deprecated
15:43:17.212  	warning nuxt > @nuxt/webpack > webpack > micromatch > snapdragon > source-map-resolve > [email protected]: Please see https://github.com/lydell/urix#deprecated
15:43:18.022  	warning nuxt-vite > vite-plugin-vue2 > babel-preset-env > babel-plugin-transform-es2015-arrow-functions > babel-runtime > [email protected]: core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
15:43:18.737  	[2/5] Fetching packages...
15:43:30.611  	info [email protected]: The platform "linux" is incompatible with this module.
15:43:30.611  	info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
15:43:30.616  	info [email protected]: The platform "linux" is incompatible with this module.
15:43:30.616  	info "[email protected]" is an optional dependency and failed compatibility check. Excluding it from installation.
15:43:30.620  	[3/5] Linking dependencies...
15:43:30.622  	warning "nuxt > @nuxt/[email protected]" has unmet peer dependency "consola@*".
15:43:30.623  	warning "@nuxtjs/svg > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
15:43:30.624  	warning "@nuxtjs/svg > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
15:43:30.627  	warning "@nuxtjs/svg > [email protected]" has unmet peer dependency "vue-template-compiler@^2.0.0".
15:43:30.627  	warning "@nuxtjs/svg > [email protected]" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".
15:43:30.627  	warning "@nuxtjs/svg > vue-svg-loader > [email protected]" has unmet peer dependency "vue-template-compiler@^2.0.0".
15:43:30.628  	warning "nuxt-vite > [email protected]" has unmet peer dependency "postcss@^8.0.0".
15:43:30.628  	warning "nuxt-vite > [email protected]" has unmet peer dependency "postcss@^8.0.0".
15:43:30.628  	warning "nuxt-windicss > [email protected]" has unmet peer dependency "vite@^2.0.1".
15:43:38.715  	[4/5] Building fresh packages...
15:43:40.165  	[5/5] Cleaning modules...
15:43:41.780  	Done in 28.29s.
15:43:41.812  	[info] Install devDependencies took: 28668.791013 ms
15:43:41.813  	[log]  ----------------- Nuxt build ----------------- 
15:43:42.028  	[log] Running nuxt build --standalone --no-lock --config-file "nuxt.config.js" /vercel/path0

13:00:13.642 | [fatal] Nuxt build error
-- | --
13:00:13.642 | ERROR in ./virtual:windi.css (./node_modules_dev/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules_dev/postcss-loader/src??ref--3-oneOf-1-2!./node_modules_dev/windicss-webpack-plugin/dist/loaders/virtual-module.js!./virtual:windi.css)
13:00:13.642 | Module Error (from ./node_modules_dev/windicss-webpack-plugin/dist/loaders/virtual-module.js):
13:00:13.642 | (Emitted value instead of an instance of Error) [Windi CSS] Failed to generate CSS. Error: {
13:00:13.642 | "errno": -24,
13:00:13.642 | "code": "EMFILE",
13:00:13.642 | "syscall": "open",
13:00:13.642 | "path": "node_modules_dev/core-js/library/fn/parse-int.js"
13:00:13.642 | }
13:00:13.643 | @ ./virtual:windi.css 4:14-245
13:00:13.643 | @ ./node_modules_dev/nuxt-windicss/dist/template/windicss.js
13:00:13.643 | @ ./.nuxt/index.js
13:00:13.643 | @ ./.nuxt/client.js
13:00:13.643 | @ multi ./.nuxt/client.js
13:00:13.643 |  
13:00:13.643 | ERROR in ./virtual:windi.css (./node_modules_dev/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules_dev/postcss-loader/src??ref--3-oneOf-1-2!./node_modules_dev/windicss-webpack-plugin/dist/loaders/virtual-module.js!./virtual:windi.css)
13:00:13.643 | Module build failed (from ./node_modules_dev/windicss-webpack-plugin/dist/loaders/virtual-module.js):
13:00:13.643 | Error: EMFILE: too many open files, open 'node_modules_dev/core-js/library/fn/parse-int.js'
13:00:13.643 | @ ./virtual:windi.css 4:14-245
13:00:13.643 | @ ./node_modules_dev/nuxt-windicss/dist/template/windicss.js
13:00:13.643 | @ ./.nuxt/index.js
13:00:13.643 | @ ./.nuxt/client.js
13:00:13.643 | @ multi ./.nuxt/client.js
13:00:13.645 | ╭─────────────────────────────╮
13:00:13.645 | │                             │
13:00:13.645 | │   ✖ Nuxt Fatal Error        │
13:00:13.645 | │                             │
13:00:13.645 | │   Error: Nuxt build error   │
13:00:13.645 | │                             │
13:00:13.646 | ╰─────────────────────────────╯
13:00:13.688 | Error: Command failed with exit code 1: npx nuxt build --standalone --no-lock --config-file "nuxt.config.js" /vercel/path0
13:00:13.688 | at makeError (/vercel/b3a3026e4d524981/.build-utils/.builder/node_modules/execa/lib/error.js:59:11)
13:00:13.688 | at handlePromise (/vercel/b3a3026e4d524981/.build-utils/.builder/node_modules/execa/index.js:114:26)
13:00:13.688 | at processTicksAndRejections (internal/process/task_queues.js:93:5)
13:00:13.688 | at Object.build (/vercel/b3a3026e4d524981/.build-utils/.builder/node_modules/@nuxtjs/vercel-builder/lib/index.js:343:3)
13:00:13.688 | at buildStep (/var/task/webpack:/@zeit/api/scripts/build-container/src/utils/purpose-build.ts:166:1) {
13:00:13.688 | shortMessage: 'Command failed with exit code 1: npx nuxt build --standalone --no-lock --config-file "nuxt.config.js" /vercel/path0',
13:00:13.688 | command: 'npx nuxt build --standalone --no-lock --config-file "nuxt.config.js" /vercel/path0',
13:00:13.688 | exitCode: 1,
13:00:13.689 | signal: undefined,
13:00:13.689 | signalDescription: undefined,
13:00:13.689 | stdout: undefined,
13:00:13.689 | stderr: undefined,
13:00:13.689 | failed: true,
13:00:13.689 | timedOut: false,
13:00:13.689 | isCanceled: false,
13:00:13.689 | killed: false
13:00:13.689 | }

vecel default build and deploy settings.

@apply doesn't work inside imported files.

Describe the bug
@apply will compiled on Global CSS which if directed to a stand-alone CSS file, but it will not work on files that import other files (wrapper file).

To Reproduce
Steps to reproduce the behavior:

Setup nuxt-windicss just like the docs instruction.
Define wrapper file for global CSS.

css: ['~/assets/css/windi.css'],

Inside windi.css

@import './navbar.css';
@import './footer.css';
@import './themes.css';
@import './effects.css';

Expected behavior
I expect @apply would work / compiled in the others files but the result was @apply doesn't work / compiled when others imported css except @apply are working.

Screenshots

Additional context
@apply works if we import the files like this

css: [
  '~/assets/css/navbar.css',
  '~/assets/css/footer.css',
  '~/assets/css/themes.css',
  '~/assets/css/effects.css',
],

not load config file

hi,

if i enable nuxt-vite, the windi.config.js file will not load.

with nuxt-vite:

yarn dev
yarn run v1.22.10
warning package.json: No license field
$ nuxt
🧪  Vite mode is experimental and some nuxt modules might be incompatible                                                          20:34:09
    If found a bug, please report via https://github.com/nuxt/vite/issues with a minimal reproduction.
    You can enable unstable server-side rendering using `vite: { ssr: true }` in `nuxt.config`

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.6                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:4200/   │
   │                                       │
   │   ⚡  Vite Mode Enabled (v0.1.0)      │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                                20:34:11
ℹ Initial build may take a while                                                                                                   20:34:11
✔ Builder initialized                                                                                                              20:34:11
✔ Nuxt files generated                                                                                                             20:34:11
ℹ [email protected] running with inline config.                                                                        nuxt:windicss 20:34:12
ℹ Vite warmed up in 312ms                                                                                                          20:34:12
ℹ Waiting for file changes                                                                                                         20:34:12
ℹ Memory usage: 91 MB (RSS: 171 MB)                                                                                                20:34:12
ℹ Listening on: http://localhost:4200/

without nuxt-vite:

yarn dev
yarn run v1.22.10
warning package.json: No license field
$ nuxt

   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.6                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   server-side          │
   │   ▸ Target:      server               │
   │                                       │
   │   Listening: http://localhost:4200/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                                20:41:58
ℹ Initial build may take a while                                                                                                   20:41:58
✔ Builder initialized                                                                                                              20:41:58
✔ Nuxt files generated                                                                                                             20:41:59
ℹ [email protected] running with config: windi.config.js                                                               nuxt:windicss 20:42:00

✔ Client
  Compiled successfully in 4.09s

✔ Server
  Compiled successfully in 3.60s

ℹ Waiting for file changes                                                                                                         20:42:04
ℹ Memory usage: 147 MB (RSS: 234 MB)                                                                                               20:42:05
ℹ Listening on: http://localhost:4200/

why does windi.config.js not load with nuxt-vite?

nuxt.config.js

export default {
	server: {
		port: 4200
	},
	buildModules: [
		'nuxt-vite',
		'nuxt-windicss',
	],
}

Vuetify config not working

import minifyTheme from 'minify-css-string';

export default {
  /*
   ** Nuxt target
   ** See https://nuxtjs.org/api/configuration-target
   */
  target: 'server',

  /*
   ** Loading configuration
   ** See https://nuxtjs.org/api/configuration-loading
   */
  loading: false,
  /*
   ** Headers of the page
   ** See https://nuxtjs.org/api/configuration-head
   */
  head: {
    titleTemplate: '%s - Hello',
    title: 'Hello',
    htmlAttrs: { lang: 'en' },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
  plugins: ['~/plugins/vee-validate.ts'],
  /*
   ** Auto import components
   ** See https://nuxtjs.org/api/configuration-components
   */
  components: [{ path: '~/components', prefix: 's' }],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: ['@nuxt/typescript-build', '@nuxt/image', '@nuxtjs/vuetify', 'nuxt-windicss'],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
  /*
   ** Public Runtime Config
   */
  publicRuntimeConfig: {
  },
  /*
   ** Private Runtime Config
   */
  privateRuntimeConfig: {},
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    baseURL: process.env.API_ENDPOINT_URL,
  },
  /*
   ** Router configuration
   */
  router: {
  },
  /*
   ** Vuetify configuration
   ** See https://github.com/nuxt-community/vuetify-module
   */
  vuetify: {
    customVariables: ['~/assets/scss/vuetify.scss'],
    treeShake: true,
    defaultAssets: {
      icons: false,
    },
    theme: {
      themes: {
        light: {
          primary: {
            base: '#6415ff',
            100: '#e5d9ff',
            200: '#c5aaff',
            300: '#8344ff',
            400: '#742cff',
            500: '#6415ff',
            600: '#5a13e6',
            700: '#5011cc',
            800: '#460fb3',
            900: '#3c0d99',
            lighten4: '#e5d9ff',
            lighten3: '#c5aaff',
            lighten2: '#8344ff',
            lighten1: '#742cff',
            darken1: '#5a13e6',
            darken2: '#5011cc',
            darken3: '#460fb3',
            darken4: '#3c0d99',
          },
          secondary: {
            base: '#243E63',
            100: '#7c8ba1',
            200: '#667892',
            300: '#506582',
            400: '#3a5173',
            500: '#243E63',
            600: '#203859',
            700: '#1d324f',
            800: '#192b45',
            900: '#16253b',
            lighten4: '#7c8ba1',
            lighten3: '#667892',
            lighten2: '#506582',
            lighten1: '#3a5173',
            darken1: '#203859',
            darken2: '#1d324f',
            darken3: '#192b45',
            darken4: '#16253b',
          },
          error: {
            base: '#f56565',
            100: '#fff5f5',
            200: '#fed7d7',
            300: '#feb2b2',
            400: '#fc8181',
            500: '#f56565',
            600: '#e53e3e',
            700: '#c53030',
            800: '#9b2c2c',
            900: '#742a2a',
            lighten4: '#fff5f5',
            lighten3: '#fed7d7',
            lighten2: '#feb2b2',
            lighten1: '#fc8181',
            darken1: '#e53e3e',
            darken2: '#c53030',
            darken3: '#9b2c2c',
            darken4: '#742a2a',
          },
          info: {
            base: '#4299e1',
            100: '#ebf8ff',
            200: '#bee3f8',
            300: '#90cdf4',
            400: '#63b3ed',
            500: '#4299e1',
            600: '#3182ce',
            700: '#2b6cb0',
            800: '#2c5282',
            900: '#2a4365',
            lighten4: '#ebf8ff',
            lighten3: '#bee3f8',
            lighten2: '#90cdf4',
            lighten1: '#63b3ed',
            darken1: '#3182ce',
            darken2: '#2b6cb0',
            darken3: '#2c5282',
            darken4: '#2a4365',
          },
          success: {
            base: '#48bb78',
            100: '#f0fff4',
            200: '#c6f6d5',
            300: '#9ae6b4',
            400: '#68d391',
            500: '#48bb78',
            600: '#38a169',
            700: '#2f855a',
            800: '#276749',
            900: '#22543d',
            lighten4: '#f0fff4',
            lighten3: '#c6f6d5',
            lighten2: '#9ae6b4',
            lighten1: '#68d391',
            darken1: '#38a169',
            darken2: '#2f855a',
            darken3: '#276749',
            darken4: '#22543d',
          },
          warning: {
            base: '#ed8936',
            100: '#fffaf0',
            200: '#feebc8',
            300: '#fbd38d',
            400: '#f6ad55',
            500: '#ed8936',
            600: '#dd6b20',
            700: '#c05621',
            800: '#9c4221',
            900: '#7b341e',
            lighten4: '#fffaf0',
            lighten3: '#feebc8',
            lighten2: '#fbd38d',
            lighten1: '#f6ad55',
            darken1: '#dd6b20',
            darken2: '#c05621',
            darken3: '#9c4221',
            darken4: '#7b341e',
          },
        },
      },
      options: {
        minifyTheme,
      },
    },
  },
  /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/
   */
  build: {
    transpile: ['vee-validate/dist/rules'],
    analyze: false,
    extractCSS: {
      ignoreOrder: true,
    },
    optimizeCSS: true,
    html: {
      minify: {
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeEmptyAttributes: true,
        removeRedundantAttributes: true,
        trimCustomFragments: true,
        useShortDoctype: true,
        preserveLineBreaks: false,
        collapseWhitespace: true,
      },
    },
  },
};

And this is tailwind.config.js

const typography = require('windicss/plugin/typography');
const forms = require('windicss/plugin/forms');
const aspectRatio = require('windicss/plugin/aspect-ratio');
const lineClamp = require('windicss/plugin/line-clamp');

module.exports = {
  prefix: 'tw-',
  darkMode: 'class',
  theme: {
    fontFamily: {
      sans: ['Roboto', 'sans-serif'],
    },
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      primary: {
        100: '#e5d9ff',
        200: '#c5aaff',
        300: '#8344ff',
        400: '#742cff',
        500: '#6415FF',
        600: '#5a13e6',
        700: '#5011cc',
        800: '#460fb3',
        900: '#3c0d99',
      },
      secondary: {
        100: '#7c8ba1',
        200: '#667892',
        300: '#506582',
        400: '#3a5173',
        500: '#243E63',
        600: '#203859',
        700: '#1d324f',
        800: '#192b45',
        900: '#16253b',
      },
      gray: {
        100: '#f7fafc',
        200: '#edf2f7',
        300: '#e2e8f0',
        400: '#cbd5e0',
        500: '#a0aec0',
        600: '#718096',
        700: '#4a5568',
        800: '#2d3748',
        900: '#1a202c',
      },
      red: {
        100: '#fff5f5',
        200: '#fed7d7',
        300: '#feb2b2',
        400: '#fc8181',
        500: '#f56565',
        600: '#e53e3e',
        700: '#c53030',
        800: '#9b2c2c',
        900: '#742a2a',
      },
      orange: {
        100: '#fffaf0',
        200: '#feebc8',
        300: '#fbd38d',
        400: '#f6ad55',
        500: '#ed8936',
        600: '#dd6b20',
        700: '#c05621',
        800: '#9c4221',
        900: '#7b341e',
      },
      yellow: {
        100: '#fffff0',
        200: '#fefcbf',
        300: '#faf089',
        400: '#f6e05e',
        500: '#ecc94b',
        600: '#d69e2e',
        700: '#b7791f',
        800: '#975a16',
        900: '#744210',
      },
      green: {
        100: '#f0fff4',
        200: '#c6f6d5',
        300: '#9ae6b4',
        400: '#68d391',
        500: '#48bb78',
        600: '#38a169',
        700: '#2f855a',
        800: '#276749',
        900: '#22543d',
      },
      teal: {
        100: '#e6fffa',
        200: '#b2f5ea',
        300: '#81e6d9',
        400: '#4fd1c5',
        500: '#38b2ac',
        600: '#319795',
        700: '#2c7a7b',
        800: '#285e61',
        900: '#234e52',
      },
      blue: {
        100: '#ebf8ff',
        200: '#bee3f8',
        300: '#90cdf4',
        400: '#63b3ed',
        500: '#4299e1',
        600: '#3182ce',
        700: '#2b6cb0',
        800: '#2c5282',
        900: '#2a4365',
      },
      indigo: {
        100: '#ebf4ff',
        200: '#c3dafe',
        300: '#a3bffa',
        400: '#7f9cf5',
        500: '#667eea',
        600: '#5a67d8',
        700: '#4c51bf',
        800: '#434190',
        900: '#3c366b',
      },
      purple: {
        100: '#faf5ff',
        200: '#e9d8fd',
        300: '#d6bcfa',
        400: '#b794f4',
        500: '#9f7aea',
        600: '#805ad5',
        700: '#6b46c1',
        800: '#553c9a',
        900: '#44337a',
      },
      pink: {
        100: '#fff5f7',
        200: '#fed7e2',
        300: '#fbb6ce',
        400: '#f687b3',
        500: '#ed64a6',
        600: '#d53f8c',
        700: '#b83280',
        800: '#97266d',
        900: '#702459',
      },
    },
  },
  variants: {},
  plugins: [typography, forms, aspectRatio, lineClamp],
};

Originally posted by @izundo-viennv in #25 (comment)

windicss / nuxt-windicss Goto Github PK

nuxt-windicss's Introduction

Features

Getting Started

Try it Online

Install

Usage

Nuxt 3

Typescript

Windi Design In DevTools

Windi Analyzer

Migrating from tailwind

Ordering (optional)

Documentation

Credits

Sponsors

License

nuxt-windicss's People

Contributors

Stargazers

Watchers

Forkers

nuxt-windicss's Issues

Workaround

Recommend Projects

Recommend Topics

Recommend Org

Jobs