slate v1.0.0-beta.10 injecting liquid into injected CSS on yarn start and watch.

[allanarmstrong]

Problem

Updating to slate v1.0.0-beta.10 causes an issue where the injected CSS isn't falling back to the CSS variable but is being swapped out for the liquid tag.

Example:
on slate v1.0.0-beta.9 the injected CSS looks like

body, html {
    color: var(--color-body-text);
    background-color: var(--color-body);
    font-family: var(--body-font-stack);
    ...
}

on slate v1.0.0-beta.10 the injected CSS is

body, html {
    color: {{ settings.color_body_text }};
    background-color: {{ settings.color_body }};
    font-family: {{ settings.body_font_stack}};
    ...
}

It seems to be an issue where yarn start seems to trigger a "deployment" SCSS compilation which swaps the CSS variables for their liquid values.
This causes the CSS to break and not render correctly in `yarn start` or `yarn watch`

Replication steps

Update your @shopify/slate-tools line in your package.json to "@shopify/slate-tools": ">=1.0.0-beta.10",

More Information

Simply reverting back to slate v1.0.0-beta.9 does not seem to fix this error for the current theme. To fix this I had to duplicate a new theme and do a yarn start. This seemed to fix the issue.

[t-kelly]

Thanks @allanarmstrong -- on it!

[t-kelly]

Fixed and released in Beta 11

[lock]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.