search

Shopify / slate

Slate is a toolkit for developing Shopify themes. It's designed to assist your workflow and speed up the process of developing, testing, and deploying themes.
https://shopify.github.io/slate
MIT License
1.28k stars 364 forks source link

Managing CSS Hierarchy #936

Open timtorres opened 5 years ago

timtorres commented 5 years ago

Problem

I have two CSS files, a base and a custom file, if you will. They're both in the /styles/static folder and the custom file needs to be defined last to override the base file. However, the base file is regular CSS (no SCSS or Liquid) and the custom has Liquid which means:

  1. After rendering the Liquid file, the custom styles are placed into the layout.theme.styleLiquid.scss.css file.
  2. The base styles are inserted as a internal stylesheet.
  3. Internal CSS overrides external CSS

Replication steps

Define two stylesheets with conflicting styles in theme.js. The one with Liquid in it will automatically be overridden by the other.

Additional Info

I've tried adding a .liquid extension to the base file and importing that before the custom file, but something in it is failing to render and I don't know how to debug. I could also put it inside the asset folder and link it in theme.liquid but I don't think that's how it's meant to be done.

Apologies if this is a stupid question...

t-kelly commented 5 years ago

The base styles are inserted as a internal stylesheet.

Sounds like you're referring to dev behaviour when calling yarn start?

@timtorres this would be due to the ordering of files output in the dist/snippets/style-tags.liquid which is generated by the style-tags.html template. Open to suggestions on how to improve it.

timtorres commented 5 years ago

Sounds like you're referring to dev behaviour when calling yarn start?

Correct, but I assume the same behavior for deploying?

I'm afraid I wouldn't be much help with a fix, but ideally I'd like to define all my CSS files in one place, whether they're vanilla CSS, SCSS, or contain Liquid. That order would be the order that they're added in the rendered file.

t-kelly commented 5 years ago

Correct, but I assume the same behavior for deploying?

Nope -- in development, styles are included in the main JS file and applied to the page with JS to enable Hot Module Reloading (instant style updates when developing). yarn deploy is the production build and is what you'll see when you're shipping your theme.

I'd like to define all my CSS files in one place, whether they're vanilla CSS, SCSS, or contain Liquid. That order would be the order that they're added in the rendered file.

Dependencies are including in the order they are imported in from your main JS entry points, e.g. src/scripts/layouts/theme.js imports a couple style sheets, change the order there if you want them loaded in different order (sorry forgot to mention this in my first reply).

meandillar commented 5 years ago

@t-kelly I'm struggling with this issue also. In my theme.js file I first import theme.scss.liquid and then another scss file afterwards. In development these are queued up in the order that I imported them in theme.js, but in production my theme.scss.liquid is inserted after my other file - the opposite of how I imported them in theme.js.

EDIT: Just to clarify, my second stylesheet is being linked as layout.theme.css before layout.theme.styleLiquid.scss.css