wrong postCSS import order in CRA5

[kitsunekyo]

Discussed in #7049

^{Originally posted by kitsunekyo January 13, 2022}
just like in issue #1057 I am adding some base style classes after tailwind/base and tailwind/components.

when I inline the styles from button.css, the styles work perfectly, and overwrite the tailwind styles, due to css order. (both selectors have a specificity of 010)
once I move them to the imported file, the custom styles seem to be loaded before the tailwind styles, and break.

i can reproduce the issue with a brand new CRA5:

yarn create react-app my-app --template=typescript

apply these changes:

<!-- append to src/App.tsx -->
<input
    type="submit"
    className="btn btn-primary mt-8 px-5 py-3"
    value="Login"
 />

/* add to top of src/index.css */
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "./button.css";

@import "tailwindcss/utilities";

/* src/button.css */
.btn {
  @apply cursor-pointer inline-block rounded-md text-base tracking-wide font-medium px-4 py-2;
}
.btn-primary {
  @apply bg-indigo-500 text-white;
}
.btn-primary:hover {
  @apply bg-indigo-400;
}

// tailwind.config.js
module.exports = {
  content: ["./src/**/*.tsx", "./src/**/*.ts"],
  theme: {},
};

the applied styles in the devtools look like this:

you see that this definition overwrites our button styles, even though they should be loaded before our button styles.

button, [type='button'], [type='reset'], [type='submit'] {
    -webkit-appearance: button;
    background-color: transparent;
    background-image: none;
}

[kitsunekyo]

this seems to be due to the missing postcss-import plugin in cra5. for whatever reason, the build does not fail and even correctly handles the @apply rules on @import files. but it seems to break the import order.

currently there is no fix aside from ejecting create react app, as craco doesnt support extending postcss in cra5 at the moment. so if you have this issue, you have to eject and add postcss-import via npm or yarn and also add it in the webpack.config.js of your ejected app.

maybe this issue could be made more transparent or something. it is still unclear to me why the apply rules work without postcss-import.

[adamwathan]

Closing in favor of original discussion.