Multiple configuration rules

[sambedingfield]

Thanks for the great plugin - especially to fix vitejs/vite#3924 when using lazy loaded components in Vite.

What's the preferred way to handle multiple rules, if possible?

To avoid another config I have my postcss set in my vite.config, which has to use the Array formatting, and this seems to work.

postcss: {
  plugins: [
    require('postcss-assign-layer')({
      include: '**/styles/**.{css,scss}',
      layerName: 'base',
    }),
    require('postcss-assign-layer')({
      include: '**/components/**/*.{css,scss}',
      layerName: 'components',
    }),
    require('postcss-assign-layer')({
      include: '**/templates/**.{css,scss}',
      layerName: 'templates',
    }),
  ]      
},

[IanVS]

Hey, I'm glad this is useful for you. I actually didn't consider this case of multiple different layers, and to be honest I'm not using the plugin myself at the moment (after I figured out browser support wasn't quite where I wanted a few years ago). I think this should be pretty straightforward to add, though. What do you think of an API like this?

require('postcss-assign-layer')([
  {
    include: '**/styles/**.{css,scss}',
    layerName: 'base',
  }, 
  {
    include: '**/components/**/*.{css,scss}',
    layerName: 'components',
  },
])

It would be a breaking change, but I think that's fine.

[sambedingfield]

That would be great! 🙏

Yeah, now that layers have been well supported for a couple of years I'm much more comfortable using them.

[IanVS]

Alright, 0.2.0 is pushed up, let me know how it works for ya!

[sambedingfield]

Just the job! Thanks for such a quick response and update