{% stylesheet %} not showing on theme editor

Retired Boards Appdev Store Design
1

I am referring to https://shopify.dev/themes/architecture/sections/section-assets#stylesheet

The styles defined with {% stylesheet %} are showing up on the live website but not on the theme editor (design mode).

I did a simple test by changing the font size of a header. See screenshot.

Eric_Tan1_0-1664303903377.jpeg
Eric_Tan1_0-1664303903377.jpeg998×479 63.3 KB

Eric_Tan1_1-1664303903457.jpeg
Eric_Tan1_1-1664303903457.jpeg999×581 38.2 KB

Eric_Tan1_2-1664303903512.jpeg
Eric_Tan1_2-1664303903512.jpeg998×479 42.3 KB

I think it is a bug of shopify theme editor - it is not loading compiled_assets/styles.css which is generated by {% stylesheet %}

The workaround are:

  1. Move the styles to styles.css.liquid
    This is not preferred because it will blow up the size of the styles.css.liquid. It should be loaded only when the section is loaded on the template.

  2. use {% style %} instead of {% stylesheet %}

Using inline style will also affect the page performance when more than two sections are used on the same page.
Basically the same style is loaded twice. Not preferred too.

Wonder if you guys noticed the same issue? Or is it just me?

2

I can confirm this is still happening when using the latest Shopify CLI. Styles appear when applied directly to a hosted theme, but if you use the CLI command “shopify dev” and customize the theme in the editor - styles will not be applied.

3

every time this happens i just use

shopify theme push

and push the changes to shopify for some reason this fixes the issue