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

Shared CSS across Sections - Question / Advice Request #1017

Open justinmetros opened 5 years ago

justinmetros commented 5 years ago

This repo is currently on low maintenance. See README for details

Problem

How to optimally share .scss across specific templates, without including in a global theme build.

Replication steps

We have a lot of templates/sections. Many of these share the same CSS, and some of this template-specific CSS is substantial - so we don't want to include in the main theme build.

We have a ton of templates because they all have section schema which can't be reused across multiple pages.

For the sake of simplicity, consider the following files in src/templates

page.lookbook-1.liquid
page.lookbook-2.liquid
...
page.lookbook-20.liquid

Following that example, In an attempt to isolate this css from our theme.css, we created a .js entrypoint for each of these in src/scripts/templates

page.lookbook-1.js
page.lookbook-2.js
...
page.lookbook-20.js

In each .js file, we import a common .scss file, i.e. 

@import '../src/styles/somepath/lookbooks.scss

When running slate-tools build with default settings it outputs a CSS file with the same CSS for each template. We get lots of varying output based on how the webpack.splitChunks is configured. Eventually running into ENAMETOOLONG protected against here which cuts it off at 100 characters.

Webpack seems to know that it has shared files, in its Entrypoint output - but then it looks like /packages/slate-tools/tools/webpack/style-tags.html skips over it and just includes it without a template condition ( looks like because the entrypoint name is hashed due to charachter length ).

More Information

From the Slate Docs

Unlike JS, we are unable to split shared dependencies between template and layout styles. If you're not careful, this could mean that your users will end up downloading the same styles more than once.

I had inferred this meant if something was in layout AND a template, it wouldn't be split. Which makes sense.

But I want to share CSS among just templates. Maybe those docs are meant to infer that as well.

Any additional information which might be helpful.

Ideally we just want to use use Slate best practices to break out and isolate styles for when we have a 'group' of templates / sections that all share the same CSS. Only want to download those styles when we need them.

Thank you very much for your time in advance! Still going strong with slate and looking to make the most of it!