Bootstrap global classes are not visible when using @extend

[FrancoAguilera]

I have this small sandbox project vite-sandbox, if you take a look at HelloWorld.vue you will see that for classes defined on the same "vue file style scope" the @extend will work, but for the global bootstrap CSS classes it won't

e.g.:

/*this will work*/
.my-class { 
  color: red; 
  background: pink; 
} 

.my-btn { 
  @extend .my-class; 
}

/*this will not work*/
.my-other-btn { 
  @extend .btn; 
}

[romainmenke]

PostCSS can only transform that CSS which is present during a single build step.

It isn't aware of other stylesheets you might load on a page. Only native browser features have this capability.

You can inject all off Bootstrap with @csstools/postcss-global-data

It injects and later removes CSS which might make it possible to do what you want here.

[romainmenke]

I've added some examples as tests : https://github.com/csstools/postcss-extend-rule/blob/87edc0dd5607d87efee49b112da4a196aedd8eb6/test/_tape.mjs#L25-L46