postcss-custom-properties: <css input> Unknown word

[abhisheksoni27]

What version of Tailwind CSS are you using?

2.2.7

What build tool (or framework if it abstracts the build tool) are you using?

nuxt ^2.15.7

What version of Node.js are you using?

v14.17.0

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/abhisheksoni27/tailwindcss-custom-properties-bug

Describe your issue

Simple CSS variables are not working. postcss-custom-properties complains about an unknown word. Check https://github.com/abhisheksoni27/tailwindcss-custom-properties-bug/blob/main/assets/css/root.css

Here's the error:

[bradlc]

Hey @abhisheksoni27. This is not an issue with tailwindcss itself, as the issue persists even after removing the tailwindcss PostCSS plugin. This seems to be related to an issue with @nuxt/postcss8 that causes cssnano to run before other PostCSS plugins, when really it should run last. Here are some relevant issues over on the @nuxtjs/tailwindcss repo:

• How to remove white spaces and comments in production build nuxt-modules/tailwindcss#361
• css not optimized in production build nuxt-modules/tailwindcss#334

And here is my pull request that should fix the issue with @nuxt/postcss8: nuxt/postcss8#19

A workaround that you could use for now would be to force cssnano to run last, using the build.postcss.order option in your Nuxt config:

export default {
  /* ... */
  build: {
    postcss: {
      order: 'cssnanoLast'
    }
  }
}

Hope that helps!

[abhisheksoni27]

@bradlc Thanks a lot for the information, and for providing that PR. Adding the clause in nuxt.config.js fixed the issue for now 👍🏻

[dangh]

If someone using nuxt 2 still seeing this error, the root cause is postcss-custom-properties@11 use postcss-values-parser@4 which can't parse *var() without space between * and var. It was fixed in postcss-values-parser@6.0.2. See shellscape/postcss-values-parser#138

A workaround is using overrides to force using newer version of postcss-values-parser:

{
  "overrides": {
    "postcss-custom-properties": {
      "postcss-values-parser": "^6.0.2"
    }
  }
}