[vue-windicss-preprocess] Loader breaks scoped css in component

[regenrek]

Hi

some of my vue components fail when the vue-windicss-preprocess loader is configured.

https://github.com/regenrek/nuxt-storyblok-starter/blob/windicss/nuxt.config.js#L123

  build: {
    extend(config) {
      config.module.rules.push({
        test: /\.vue$/,
        loader: 'vue-windicss-preprocess',
        options: {
          config: 'tailwind.config.js', // tailwind config file path (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: 'windi-' // set compilation mode style prefix
        }
      })
    }
  }

https://github.com/regenrek/nuxt-storyblok-starter/blob/master/components/organisms/Hero.vue#L109

 ERROR  in ./components/organisms/Hero.vue?vue&type=style&index=1&id=26a9e983&scoped=true&lang=css&

Syntax Error: SyntaxError                                                 friendly-errors 22:26:43

(233:1) Unclosed block

  231 |   grid-column: 1 / span 6;
  232 | }
> 233 | .image-style-2 {
      | ^
  234 |   .image-stack__item--bottom {
  235 |       grid-column: 4 / -1;

                                                                          friendly-errors 22:26:43
 @ ./node_modules/vue-style-loader??ref--3-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--3-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--3-oneOf-1-2!./node_modules/@nuxt/components/dist/loader.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/vue-windicss-preprocess??ref--12!./components/organisms/Hero.vue?vue&type=style&index=1&id=26a9e983&scoped=true&lang=css& 4:14-465 14:3-18:5 15:22-473
 @ ./components/organisms/Hero.vue?vue&type=style&index=1&id=26a9e983&scoped=true&lang=css&
 @ ./components/organisms/Hero.vue
 @ ./components/bloks/BlokHero.js
 @ ./.nuxt/components/plugin.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/@nuxt/components/lib/installComponents.js eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

[Yee1014]

I have the same problem!

[hannoeru]

Try npm i -D postcss-nested Then add this to nuxt config

build: {
  postcss: {
    plugins: {
      'postcss-nested': {}
    }
  }
}

[regenrek]

Try npm i -D postcss-nested Then add this to nuxt config

build: {
  postcss: {
    plugins: {
      'postcss-nested': {}
    }
  }
}

The postcss-nested plugins are already added within @nujek module. It does work if the vue-windicss-preprocess loader is disabled.

[reslear]

@regenrek same

[reslear]

@voorjaar maybe move this issue to https://github.com/windicss/vue-windicss-preprocess

[hannoeru]

Fixed in v2.1.0