CSS style changes defined in {% stylesheet %} section tags is not reliably re-compiled on changes

Store Design
,
1

There seems to be something inconsistent with the way Shopify detects changes to section templates and re-compiles the concatenated CSS bundle injected as styles.css in the content_for_header object. We’ve been pulling our hair out over this issue and hopefully the community can validate what we’re seeing and provide some solutions.

The problem relates to CSS styles (not SASS/SCSS) defined within {% stylesheet %} tags inside of liquid sections, which are then included in Shopify 2.0 them templates. As described here, what’s supposed to happen is that all the CSS from all the sections is concatenated into a single styles.css file and injected in the page header. When we make changes to the styles within those {% stylesheet %} tags, it seems like a 50/50 chance if Shopify is actually going to detect the change and re-compile styles.css to include that change.

Our team is using a GitHub based workflow and the GitHub integration for themes. Our live theme is tracked from the master branch of our theme’s GitHub repo, and any time the master branch on GitHub is updated, the GitHub integration immediately makes the changes live.

What seems to be happening is that Shopify doesn’t always pick up changes to the CSS styles in the latest commit. I can verify this by pushing a commit to a section template that contains a section CSS change, then viewing the live store. The HTML changes in that section are updated immediately, but when inspecting the compiled styles.css file, the CSS change is NOT there.

Then, I can follow up that commit with another commit to the same section template stylesheet section. Surprisingly, what often happens is that the first change is picked up and compiled in the new styles.css, but the latest change is missing. Seems like whatever Shopify is doing to pick up changes to section styles is skipping or ignoring the latest change and only picking up changes up to HEAD~1.

To make matters more confusing, sometimes it works exactly as it should, and changes to the section styles are picked up and recompiled immediately on the live site. Of course it always works on localhost as expected with shopify theme dev.

I’m thinking there must be some sort of race condition or flawed change detection logic on the back-end that’s resulting in Shopify sometimes missing CSS updates.

Questions:

  1. Is there any way to see logs or audits of the CSS compilation process on Shopify?
  2. Is there any way to force Shopify to recompile CSS?
  3. Does anyone have any insight (or even better a link to some code) into how Shopify compiles the CSS and detects changes?

cc @dprovenzano

2

Hello @konnected

It sounds like you may be experiencing some issues with Shopify’s theme compilation process. Unfortunately, there is no way to force Shopify to recompile CSS or view logs of the compilation process. However, you can try the following steps to troubleshoot the issue:

  1. Clear the theme cache by going to Online Store > Themes > Actions > Edit Code and clicking on the “Clear theme cache” button.
  2. Check the timestamps on the styles.css file in the Assets directory to see if the file is being updated with the latest changes.
  3. Make sure you are saving and publishing your changes to the theme after making updates to the section styles.
  4. Try making a small change to the styles in the section, such as adding a new line or changing the font size, to see if that triggers the recompilation process.

If the issue persists, you may want to contact Shopify support for further assistance.

3

@SocialAutoPost Thanks for the reply. Unfortunately your suggestions were not helpful.

  1. We couldn’t find any “Clear theme cache” button and no mention of this on shopify.dev. Do you have a screenshot or documentation on where this button lives?

  2. The styles.css file is not added to Assets. It’s compiled externally and served by Shopify’s CDN. We are checking that file and that’s the problem – it’s missing the CSS changes from the latest commit.

  3. This is done automatically by the GitHub integration.

  4. Yep, we’ve tried that too. This is the workaround we’ve been using. After pushing changes with CSS changes, they don’t compile immediately, so we have to follow up with a 2nd push with a small inconsequential change and this seems to kick them to recompile.

I probably will reach out to shopify support and will follow up here if they have any info.