styles are lost when modify bundle output using postcss

[niklasgrewe]

Inside my project i have a index.css with the following content:

/* src/css/index.css */

@import "global/reset.css";
@import "global/variables.css";
@import "global/utilities.css";

to use my @import rules, i modify the bundle output with postcss like this:

const bundlerPlugin = require("@11ty/eleventy-plugin-bundle");
const postcss = require('postcss')
const postcssrc = require('postcss-load-config')

const ctx = { env: process.env.ELEVENTY_ENV }

module.exports = (config) => {
 config.addPlugin(bundlerPlugin, {
   transforms: [
     async function(content) {
       if (this.type === 'css') {
         const { plugins } = await postcssrc(ctx)
         const { css } = await postcss(plugins).process(content, { from: this.page.inputPath, to: null });
         return css;
       }
       return content;
     }
   ]
  })
}

my postcss.config.js looks like this:

const postcssImport = require('postcss-import')
const postcssNested = require('postcss-nested')
const autoprefixer = require('autoprefixer')
const cssnano = require('cssnano')

module.exports = (ctx) => ({
  plugins: [
    postcssImport({
      path: ['./src/css'] // to resolve all css files in src/css/global/*.css
    }),
    postcssNested,
    autoprefixer,
    ctx.env === 'production' ? cssnano : undefined
  ]
})

i added the index.css file to my base.webc layout like this:

<!-- layouts/base.webc -->
<link webc:bucket="global" rel="stylesheet" href="../css/index.css">
<style webc:if="this.eleventy.env.runMode === 'serve'" webc:keep @raw="getBundle('css', 'global')"></style>

at this point, all works, all css files will be merged together, but...

when i add my navbar component styles to the global bucket like this:

<!-- components/site/site-nav.webc -->
<style webc:bucket="global">
  /* my navbar styles */
</style>

all my styles inside my index.css are lost, only my site-nav.webc styles are in the bundle output

why this happen? is this is a bug?

[niklasgrewe]

my workaround for now is, to put:

<link webc:bucket="global" rel="stylesheet" href="../css/index.css">

inside my index.webc page. It would be cool if it would work in layouts too.