Global style injection into all CSS files

[nd55]

Hello :) A few months ago, I opened an Issue with a feature request, I thought it may rather belong here in the discussions.

---

I use custom media queries in almost every project. With PostCSS, I would utilize @csstools/postcss-global-data with the following configuration to inject all custom media queries into every file, eliminating the need to import them every time.

// postcss.config.js
module.exports = {
  plugins: [
    require("@csstools/postcss-global-data")({
      files: ["./src/css/_media.css"],
    }),
    require("postcss-preset-env")({ ... }),
  ],
}

In Lightning CSS, I haven't found any alternative for injecting custom CSS into every file as I did with PostCSS. Currently, I have to manually import _media.css into every CSS file. Have I overlooked this feature, or is it not yet possible? I am using Lightning CSS in Vite projects (SvelteKit, Astro).

I would appreciate any feedback or considerations regarding the possibility of adding this as a feature.

Thanks for reading!

[devongovett]

Sorry, not sure I have a good answer for you here. It's unlikely to be a supported feature out of the box. One option would be to use a custom resolver with the bundler to implement something like this. You could try implementing the read function there and prepending an @import "_media.css" to the contents of the file you return.