search

onigoetz / postcss-lightningcss

PostCSS plugin to run lightningcss
https://www.npmjs.com/package/postcss-lightningcss
MIT License
42 stars 1 forks source link

Any way to use `@import` for bundling? #116

Closed brycewray closed 9 months ago

brycewray commented 9 months ago

It seems that, if using a CSS file with @import statements to make use of Lightning CSS’s bundling feature, you still have to use postcss-import — which I did notice is not one of the plugins listed as being replaceable by using postcss-lightningcss. Is there a workaround for this that would allow dropping the -import plugin as well, or am I missing something in this plugin’s existing feature set and/or docs?

My use case: running this in the Hugo static site generator, making use of its built-in Hugo Pipes capability for working with PostCSS.

Edit: even if this limitation remains in place, I am extremely impressed with this plugin. Bravo!

onigoetz commented 9 months ago

Hi @brycewray, and thanks for the praise :)

The list of plugins it replaces might need to be updated due to the number of features that lightningcss added themselves.

I have to admit that I don't know why the embedded @import wouldn't work; there is no option to enable or disable it, so I would bet that it doesn't know the relative path to the imported file.

I will try to take a moment and see if I can get it to work and if there is a trick to do so.

brycewray commented 9 months ago

I have to admit that I don't know why the embedded @import wouldn't work; there is no option to enable or disable it, so I would bet that it doesn't know the relative path to the imported file.

@onigoetz I thought about that (although the LCSS instructions say, “Referenced files should be relative to the containing CSS file”), and tried various alternate path structures in an attempt to make the paths more explicit. Nothing worked, so clearly there’s some disconnect with how LCSS normally implements @import. (By contrast: when I tested LCSS in an Eleventy repo without any involvement of PostCSS, the @import statement worked as it should, “seeing” relative paths and bundling their files accordingly).

I will try to take a moment and see if I can get it to work and if there is a trick to do so.

Thanks in advance for any help you can provide! You may wish to check my site repo, where the relevant CSS files are in https://github.com/brycewray/hugo-site/tree/main/themes/lcss/assets/css, with critical.css and index.css as the (attempted) @import-ers.

brycewray commented 9 months ago

@onigoetz my sincere apologies! It turns out that the problem was my own fault, because I had never noticed in Hugo’s PostCSS-related documentation the presence of an option called inlineImports, which by default is set to false. Once I saw that, I set it to true as per the documentation, turned off postcss-import, and — voilà! LCSS did the @import on its own.

Again, sorry to bother you with a PEBKAC issue.