Styles in built css file seem out of order

[bux]

Do NOT ignore this template or your issue will have a very high chance to be closed without comment.

Describe the bug

I'm using vite with tailwind. Inside the index.css file I import the three tailwind base files.

@import "tailwindcss/base";

@import "tailwindcss/components";

@import "tailwindcss/utilities";

The output of the vite build command though starts with all css from the SFCs (postcss-nested is used) then adds the imported tailwind files and finally adds media queries from tailwind.

I would expect to have the SFC css after everything that's inside "index.css"

Reproduction

https://bitbucket.org/kh-JDA/crguide-vue3/src/master/

System Info

• required vite version: "^1.0.0-rc.13"
• required Operating System: Windows 10
• required Node version: 14.15.1
• Optional:
  • npm/yarn version 6.14.8
  • Installed vue version (from yarn.lock or package-lock.json) 3.0.3
  • Installed @vue/compiler-sfc version 3.0.3

Logs (Optional if provided reproduction)

[bux]

@underfin @yyx990803 Using vite 2.0.0-beta.49 the order of the built css file still puts all extracted SFC css before everything that's in index.css.

import { createApp } from "vue"
import App from "./App.vue"
import "./index.css"

One could argue that this is due to the index.css file being imported after App.vue. When moving the import of index.css to the top the order seems to be ok (for my case).

The templates and even tailwind suggest above import order.

Hence I would expect that when a css file is imported that all extracted SFC css is appended automatically despite the order of imports during a prodution build. Or it needs to be documented.

Or am I missing something?

[yyx990803]

@bux isn't it expected behavior for CSS to be extracted in the order they are imported?

[bux]

I agree with you. The confusion arose because of the order of the imports suggested in the templates and the tailwind documentation. Especially the latter would be kind of "bad practice" then.