[Bug]: theme.css.liquid not syncing

francisfernandez commented 1 year ago

Please confirm that you have:

[X] Searched existing issues to see if your issue is a duplicate. (If you’ve found a duplicate issue, feel free to add additional information in a comment on it.)
[X] Reproduced the issue in the latest CLI version.

In which of these areas are you experiencing a problem?

Theme

Expected behavior

Changes done in the theme.css.liquid should sync and reflect in the front end.

Actual behavior

Any changes in the theme.css.liquid are not synced. Shopiy CLI shows an update has been made for assets/theme.css.liquid, but they do not show up in the front end.

Changes can be seen in the file when looking directly at the admin file.

My current workaround is to create a new .css file (without the .liquid format) to apply styling.

Reproduction steps

Make changes to theme.css.liquid
Inspect front-end to see style not updated

Operating System

Mac OS Monterey 12.6.3

Shopify CLI version (check your project's `package.json` if you're not sure)

3.48.1

Shell

zsh

Node version (run `node -v` if you're not sure)

20.5.0

What language and version are you using in your application?

Liquid, CSS

gonzaloriestra commented 1 year ago

@Shopify/theme-code-tools could you please have a look?

gonzaloriestra commented 1 year ago

Probably related to https://github.com/Shopify/cli/issues/2613

MHabashy10 commented 1 year ago

Hey Guys, we noticed this issue since last week and we investigated it further. here are what we have found, which could help to debug this issue further.

Findings

Asset file (ex. theme.css.liquid)

Is uploaded to the theme files (when you click edit code in the browser)
The new file is fetched fine when you check the theme in the customizer ( link https://.myshopify.com/services/assets//editor_asset/theme.css )
However the old file is still get fetched when you Preview the theme (which is hosted via this link https:///cdn/shop/t//assets/theme.css?v= ) the random number should be each time you upload a new asset! that didn't happen causing this issue.!

What we did and didn't work

Clearing caching doesn't work.
Appending extra random query param to the asset file.
Changing file's name to ex. theme2.css.liquid, the new file had the same above senario, in the preview it isn't even seen/uploaded and the whole theme's css is down of course.

Workaround

It turnout to be if the file has .liquid extension it won't work!! but if you only use .css it will work just fine. so if you don't use liquid in that file, then as a workaround try using normal css extension not liquid. OR use the customizer for now to check your changes.

Hope this helps, till the root issue got fixed.

rdkulp commented 1 year ago

Having the same issue since Friday. I found that if I save the swatches.css.liquid file with a change (I add a period after the closing bracket and save, and then when I make my next change to preview in the browser I delete it and save) it updates to the most recent styles. Not ideal, but allows me to still work locally.

jthk116 commented 1 year ago

I have the same issue except mine is with a .js.liquid file. It was working fine when it was just .js file but after switching to .js.liquid the changes are not reflecting, although they will appear to correct at some later time 10 minutes or an hour later.

mashkovtsevlx commented 1 year ago

+1 Here. .js.liquid file is not getting updated

charles-marsh-eastsideco commented 1 year ago

+1

corylynch commented 1 year ago

+1 - just started happening this week for me.

edselhans commented 1 year ago

+1 I just noticed this issue yesterday.

For context, I'm using a vintage theme (OS 1.0) with themekit, but it's the same .liquid extension issue. In my case it's a .css.liquid file containing all my CSS, minified with some Liquid variables, that's compiled from a bunch of SCSS files. I can see the updates to the file in Admin > Online Store > Theme > Edit code, but the file that is being served on the frontend is the outdated version.

Things that haven't caused the /assets/*.liquid file to update on the frontend:

Unlike others, the file that gets served on the frontend seems to remain the outdated version, regardless of how long I wait. I pushed an update yesterday afternoon, and checked back this morning and it was still the outdated version.
Using a watcher (i.e. theme watch) vs manually pushing the changes (i.e. theme deploy) makes no difference

Things that have caused the /assets/*.liquid file to update on the frontend:

Making updates to another file in /assets, like adding a new line to an unrelated .js file, causes the updated version of the .css.liquid file to start getting served on the frontend. To be clear, I'll have the watcher running, update my .css.liquid file, see that it's processed and updated by themekit, confirm the change is present in Admin > Online Store > Theme > Edit code, but not present in the .css file that being served to the frontend. Then I'll add a new line to a random .js file in /assets, reload the preview, and the .css file on the frontend will now be the updated version.
I made a copy of an older, outdated theme, then pushed the new .css.liquid file, and saw the change reflected immediately on the frontend. I experimented a little and noticed if the change to .css.liquid was small, like just a few lines of CSS, the updated file wouldn't be served on the frontend. However, if the change was larger, like many lines of CSS, the file on the frontend would be updated immediately.

I hope this helps.

karreiro commented 1 year ago

👋 Hello everyone,

Yesterday, we applied a platform-level solution for this issue. As a result, it should now be resolved without any need for updates on your local tooling.

Please, let me know if you're still facing this problem, so we can promptly reopen the issue.

gabrielvincent commented 1 year ago

I'm not sure if this is related to the bug reports in this thread, but I'm facing a similar issue with the theme. I've opened an issue here: #2697

illarionvk commented 1 year ago

We still experience the issue on multiple projects.

gonzaloriestra commented 9 months ago

More ocurrences: https://github.com/Shopify/cli/issues/2613#issuecomment-1788206708

Letwah commented 8 months ago

I am having the same issue now.

RossDG96 commented 7 months ago

I am experiencing this same issue. Very frustrating as my changes were showing, then out of the blue they stopped showing. It's showing that files are updating in the cli: However, the only way I've been able to get changes to show is to quit shopify cli and start it again or, to push changes to my published theme via git.

Letwah commented 7 months ago

SAME! i thought i was going crazy.

afleischer commented 7 months ago

Hello, I am not sure how related this is, but in the context of theme app extension file syncing, es6-imported files (located within the same assets/ folder as other app extension files) are not consistently updated either, especially when running the "shopify dev" command, despite the CLI acknowledging the update and claiming such files were indeed "pushed to a draft". The deploy command doesn't seem to have as much of an issue with this but I would think the expected behavior would be that such files would update regardless of the command used.

goranhorvathr commented 6 months ago

We are currently experiencing a persistent issue where the .liquid files located in the assets folder are not being updated as expected. This is particularly concerning since our workflow relies on injecting general liquid variables for various design elements such as colors. Despite receiving confirmation from the Command Line Interface (CLI) indicating that the file has been updated, a manual inspection reveals that the CSS changes are not reflected in the file. This is confirmed by simply removing .liquid and everything starts to work well everything that does not have a liquid variable. Something is wrong with the parser on Shopify side.

Additionally, we are facing significant challenges with the Hot Reload feature. Upon modifying a single file, our custom Vite configuration processes the SCSS and Tailwind classes, directing the output to the assets folder. Although the CLI acknowledges the update and uploads the single modified file, it triggers an excessive number of refreshes—approximately a dozen for a single file update. This behavior is highly irregular and disrupts our development process. We are absolutely sure we are not syncing multiple files and it only happens with CSS and JS files. For some reason liquid files are ok. But even if we were uploading multiple files Hot Reload should wait for all the files to be uploaded before firing.

It is crucial that we address these issues promptly to maintain efficiency and ensure the integrity of our project's development workflow.

adrienpicard commented 6 months ago

This is happening to me now as well and seems completely random. CLI is up to date v3.56 and it was working fine earlier in the day.

Files are listed as Synced in the console but nothing changes when I reload the page locally.

Tianyao-Ma commented 6 months ago

+1 here. We've noticed since two days ago that the changes made in the .liquid files are not reflecting on the first preview link or the local port. We're only able to preview the changes under the third preview link. 2024-02-23 02_26_51-Window

We've attempted to update all related packages to the latest versions ( SHO CLI, node, and ruby) and have restarted both VS Code and the computer, but the issue persists.

joshdavenport commented 4 months ago

Also happens when editing directly in the Edit Code area of the Shopify admin.

github-actions[bot] commented 3 months ago

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

jmsquatch commented 2 months ago

We're still experiencing this issue.

The activity is low because the community has seen no motivation to resolve this issue. This is your personal brand's fault, not the community.

lukeh-shopify commented 2 months ago

👋🏻 Hi all, this issue is on our radar and is being prioritized. As mentioned in this comment, using the third preview link is a workaround to ensure changes are previewed correctly. Thanks for your patience 🙏🏻

github-actions[bot] commented 1 month ago

This issue seems inactive. If it's still relevant, please add a comment saying so. Otherwise, take no action. → If there's no activity within a week, then a bot will automatically close this. Thanks for helping to improve Shopify's dev tooling and experience.

P.S. You can learn more about why we stale issues here.

Tigatok commented 2 weeks ago

Hi there,

Any progress on this issue?

Shopify / cli