CSS {% stylesheet %} pattern

[francishagecode]

Is there a reason specifically this was chosen as the default?

For example, on image: https://github.com/Shopify/skeleton-theme/blob/main/snippets/image.liquid

{% stylesheet %}
  .image {
    display: block;
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
  }

  .image > img {
    width: 100%;
    height: auto;
  }
{% endstylesheet %}

In my mind, it would make sense to rather have a single css file (we already begin with https://github.com/Shopify/skeleton-theme/blob/main/assets/critical.css)

This would reduce repeated styles if the image snippet is rendered multiple times per page.

Thanks!

[octipus]

Is there a reason specifically this was chosen as the default?

Liquid does that already for you. As per Shopify {% stylesheet %} documentation, all stylesheet tags are concatenated into styles.css which is then passed down to frontend as a single file. This approach is preferred because it promotes modularity, encapsulation and a standardised component based design approach. Linters don't quite like it atm but hopefully that will change soon as well

The content from {% stylesheet %} tags across all sections, blocks and snippets is concatenated into a single styles.css file by Shopify, and then injected into the theme through the content_for_header global Liquid object.

I think what you refer to is the {% style %} tag which indeed creates a stylesheet tag for each repeating block.
Hope this makes sense.