'@media all, bookshop' in bookshop-sass output breaks postcss

[silveltman]

I have an 11ty setup in which I use tailwindcss and postcss.
I have bookshop-sass output a bookshop.css file to my postcss folder, which I then import from my main.pcss, together with my tailwind.pcss and maybe some other .pcss files.

However, the styles are not applied in the browser. I found out that removing the '@media all, bookshop'. Below is how bookshop-sass outputs:

@media all, bookshop {

.test{background:red}

}

What is the purpose of this wrap? Can I disable it or is there a other fix?

[bglw]

Hi Sil 👋

I don't have a way to disable this right now, but it is something that could be added.

The purpose of this rule is for when you're using the component browser embedded in your site. Since the component browser also handles live reloads for your component SCSS, it needs to be able to identify and remove the existing styles that were built into the site.

Are you using the embedded component browser? If not, this can be removed without issue — I'll let you know when a release is out for that (in the meantime you could run something after bookshop-sass to strip the media query from the file)

If you are using the non-standalone component browser, I'll need to have a think about how else we can achieve this 🤔

[silveltman]

Hey Liam,

I do rely on the embedded component browser, since I use tailwind in my components.

However, I don't use it that often because of 2 things:
1. I have to restart the component browser each time I add a new component. If not, it doesn't show up in the browser
2. I'm experiencing some difficulties lately with some components not showing up at all

As I was writing the above I found out that I do not have to restart the browser anymore and the bookshop/init is working again, which are both awesome!
As for the second point, it seems that a component with zero items in the blueprint will not show up in the component browser at all. Even if a component doesn't use any data.

Before I was using a setup in which bookshop-sass outputted a bookshop.scss file to my dart-sass folder. Here I did not experience the @media problem. Do you know what sass does here which makes it work? Maybe I can replicate it in my postcss.
Or any idea why it doesn't work in postcss in the first place? I don't have experience with custom @media like this and what they actually do.

Thanks, as always! :)