bookshop css tag not allowing the use of @extend in component styles

[rdano89]

The current use of the bookshop tag inside the main scss stylesheet wraps all the bookshop styles inside a media query. This means that extends cannot be used inside bookshop component styles, which makes templating a bit more difficult.

[bglw]

Hi @rdano89 👋

Thanks for reaching out. For context, that media query is there so that the component browser can strip Bookshop styles out of the built CSS, and inject them back onto the page for local development.

Do you have a code sample of the use-case you're trying to achieve? (And whether you're using Jekyll or Eleventy)

[bglw]

Ah, I presume Jekyll due to the bookshop tag reference, and I can see the issue I believe you're referencing here: extending-selectors-from-within-media-queries-with-sass

That is a little bit of a pain — I tend to use mixins over extends so it isn't a problem I had run into yet. I'll have a further think on how we can achieve the namespacing we require without interfering in this workflow 🤔

[rdano89]

I am using Jekyll. For this case I am basically trying to expand the template that i currently use so that it works in the booskhop framework. Basically I have all my sass partials in ./site/assets/css, which are imported in the main scss file (./site/assets/site.scss) before the {% bookshop %} tag. Since I have some utility classes, i'd like to pass them to bookshop components via extends. A very basic example: I created a link bookshop component. This component receives params like a url, a label and a open_in_new_tab and generates an anchor link. Then I have a header nav, for example. And I want to use it but applying custom styles (like a padding). For the sake of usability i'd like to use my .px-md (horizontal padding = [ some value], and I would just do it by extending it inside the header-nav.scss file, so it is only applied to the links inside the header-nav block. If I ever change the .px-md class, then styles would be automatically updated.

[rdano89]

ok, so you got it. Alright, I mean I know it's a tricky one. I assume I can go the mixins route as well but I though there might be a solution

[bglw]

Gotcha. I'll investigate this week whether this can be solved.

The only immediate workarounds that come to mind would be:

• Using mixins instead of extends, or
• Moving all SCSS files into the shared/jekyll folder in Bookshop and using the bookshop-sass CLI to compile all styles, skipping Jekyll entirely. The CLI compiles all styles before wrapping them in the media query, so would somewhat skirt the problem.

Sorry that these are both a bit of a hassle, I'll keep you posted on whether I can track down a solution with the current workflow.

[rdano89]

Ok both options seem like a descent compromise. The first one seems like the future proof way to go anyways. Unfortunately, I cannot move all files to the shared/jekyll folder since I am also importing values from jekyll/data to create specific classes as well - which means that I have to use liquid in the main scss file. This just as information for you on why it could be beneficial to look into it down the line.