search

parcel-bundler / lightningcss

An extremely fast CSS parser, transformer, bundler, and minifier written in Rust.
https://lightningcss.dev
Mozilla Public License 2.0
6.03k stars 166 forks source link

Allowing global style injection into all CSS files #664

Open nd55 opened 4 months ago

nd55 commented 4 months ago

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 commented 2 months ago

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 commented 2 weeks ago

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

nd55 commented 2 weeks ago

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 :)