QwikDev / qwik

Instant-loading web apps, without effort
https://qwik.dev
MIT License
20.7k stars 1.29k forks source link

[🐞] Error when using @import to include custom and Tailwind styles #4086

Open corydeppen opened 1 year ago

corydeppen commented 1 year ago

Which component is affected?

Qwik Rollup / Vite plugin

Describe the bug

I'm trying to import Tailwind and custom styles using @import when running a new Qwik City app but receive an error:

`@layer base` is used but no matching `@tailwind base` directive is present

If you reload the app, you may notice it briefly renders as expected before the error is displayed. Removing the custom styles import, leaving only the Tailwind imports, and rerunning the app will not cause an error.

When I try the same using a new React and Vite app, the styles are imported as expected.

I've tried including "postcss-import": {} in postcss.config.js but it doesn't prevent the error. It also doesn't seem to be needed when I add it to the React/Vite example.

Reproduction

https://stackblitz.com/edit/qwik-starter-bzhk8f?file=src/global.css

Steps to reproduce

No response

System Info

System:
  OS: Linux 5.0 undefined
  CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Memory: 0 Bytes / 0 Bytes
  Shell: 1.0 - /bin/jsh
Binaries:
  Node: 16.14.2 - /usr/local/bin/node
  Yarn: 1.22.19 - /usr/local/bin/yarn
  npm: 7.17.0 - /usr/local/bin/npm
npmPackages:
  @builder.io/qwik: 1.0.0 => 1.0.0 
  @builder.io/qwik-city: ^1.0.0 => 1.0.0 
  undici: 5.22.0 => 5.22.0 
  vite: 4.3.3 => 4.3.3

Additional Information

No response

stackblitz[bot] commented 1 year ago

Fix this issue in StackBlitz Codeflow Start a new pull request in StackBlitz Codeflow.