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!
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
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
In each .js file, we import a common .scss file, i.e.
When running
slate-tools buildwith 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
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!