Vite, Tailwindcss and postcss do not work together

rowild commented 2 years ago

`Details`

On tailwindcss.com there is, among thers, an installation guide for vite and tailwindcss: https://tailwindcss.com/docs/guides/vue-3-vite The page also offers more information on how to integrate postcss: https://tailwindcss.com/docs/using-with-preprocessors

I added up all these to this postcss.config.js:

module.exports = {
  plugins: {
    require('postcss-import'),
    require('tailwindcss/nesting'),
    require('tailwindcss'),
    require('autoprefixer'),
    require('postcss-preset-env')({
      features: {
        'nesting-rules': false
      }
    }),
  },
}

However, I get these errors_

7:07:03 PM [vite] Internal server error: Unexpected string
  Plugin: vite:css
  File: /Users/rowild/Desktop/vite-postcss-problem/src/App.vue?vue&type=style&index=0&lang.css
      at Object.compileFunction (node:vm:352:18)
      at wrapSafe (node:internal/modules/cjs/loader:1031:15)
      at Module._compile (node:internal/modules/cjs/loader:1065:27)
      at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
      at Module.load (node:internal/modules/cjs/loader:981:32)
      at Function.Module._load (node:internal/modules/cjs/loader:822:12)
      at Module.require (node:internal/modules/cjs/loader:1005:19)
      at require (node:internal/modules/cjs/helpers:102:18)
      at Object.search (/Users/rowild/Desktop/vite-postcss-problem/node_modules/vite/dist/node/chunks/dep-81ddae5a.js:12587:37)
      at async resolvePostcssConfig (/Users/rowild/Desktop/vite-postcss-problem/node_modules/vite/dist/node/chunks/dep-81ddae5a.js:20366:22)
7:07:03 PM [vite] Internal server error: Unexpected string
  Plugin: vite:css
  File: /Users/rowild/Desktop/vite-postcss-problem/src/index.css
      at Object.compileFunction (node:vm:352:18)
      at wrapSafe (node:internal/modules/cjs/loader:1031:15)
      at Module._compile (node:internal/modules/cjs/loader:1065:27)
      at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
      at Module.load (node:internal/modules/cjs/loader:981:32)
      at Function.Module._load (node:internal/modules/cjs/loader:822:12)
      at Module.require (node:internal/modules/cjs/loader:1005:19)
      at require (node:internal/modules/cjs/helpers:102:18)
      at Object.search (/Users/rowild/Desktop/vite-postcss-problem/node_modules/vite/dist/node/chunks/dep-81ddae5a.js:12587:37)
      at async resolvePostcssConfig (/Users/rowild/Desktop/vite-postcss-problem/node_modules/vite/dist/node/chunks/dep-81ddae5a.js:20366:22)
7:07:03 PM [vite] Internal server error: Unexpected string
  Plugin: vite:css
  File: /Users/rowild/Desktop/vite-postcss-problem/src/components/HelloWorld.vue?vue&type=style&index=0&scoped=true&lang.css
      at Object.compileFunction (node:vm:352:18)
      at wrapSafe (node:internal/modules/cjs/loader:1031:15)
      at Module._compile (node:internal/modules/cjs/loader:1065:27)
      at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
      at Module.load (node:internal/modules/cjs/loader:981:32)
      at Function.Module._load (node:internal/modules/cjs/loader:822:12)
      at Module.require (node:internal/modules/cjs/loader:1005:19)
      at require (node:internal/modules/cjs/helpers:102:18)
      at Object.search (/Users/rowild/Desktop/vite-postcss-problem/node_modules/vite/dist/node/chunks/dep-81ddae5a.js:12587:37)
      at async resolvePostcssConfig (/Users/rowild/Desktop/vite-postcss-problem/node_modules/vite/dist/node/chunks/dep-81ddae5a.js:20366:22)

As soon as I comment out / remove all postcss configuration, the setup works again.

`Reproduction (Code)`

Reproduction: https://github.com/rowild/vite-postcss-problem https://codesandbox.io/s/crazy-currying-ykhwr

$ git clone https://github.com/rowild/vite-postcss-problem

`Environment`

ai commented 2 years ago

Can you send PR? I am working on another open source project right now.

rowild commented 2 years ago

I would love to, but I have no idea, where the error is. (If it is at all an error with postcss...) However, I prepared a lot, which is, what you ask (and what every repo owner asks). (And I also have other projects to work on, so we are all in the same boat.) I would appreciate it, if you at least could have a look at the repo instead of just requesting a PR. That much time should be there for a bug reporter who confides to the rules!

ai commented 2 years ago

Sorry, I will not have time for this at least in next few weeks

rowild commented 2 years ago

The wonderful nature of open source! Everybody asks to collaborate, even if it is only proof reading. And then? The most-read message is "I have no time". If I add up the time that I had to read that sentence, I cold have written 3 operas already.

Anyway: Good luck with your other project and keep your people happy there!

rowild commented 2 years ago

Found my error: instead of using an object, i need to use an array.

plugins: { ... } ==>. plugins: [ ... ]

All good.

postcss / postcss-load-config