Allowing global style injection into all CSS files

[nd55]

trafficstars

Hello there :)

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!

[ShayanTheNerd]

Hi, @devongovett

Thanks for this awesome tool! Unfortunately, I'm having the exact same issue in an Astro project. Looking for a solution or at least a workaround...

[devongovett]

See answer here for a possible way to implement this https://github.com/parcel-bundler/lightningcss/discussions/742#discussioncomment-9475858

[nd55]

Thanks for your answer. Astro and Svelte are based on Vite, and unfortunately, vite does not yet support custom resolvers for its Lightning CSS integration. There already is an open issue about that, so I will keep an eye on that :)