Liquid {% import %} tag

t-kelly commented 5 years ago

Depends on #867 and #874

Problem

The Webpack liquid-loader would have the capability of parsing and extracting dependency declarations from Liquid files, including:

Static sections using the {% section %} tag
Snippets using the {% include %} tag
layout using the {% layout %} tag
assets using the filters like the asset_url filter

However, there is no way to declare a dependency that should be included in Webpack’s script and styles bundling. Without this capability, dependency declaration for a given UI are spread across two files that do not reference each other, e.g in Starter theme we have sections/product.liquid and scripts/sections/product.js. This is not super obvious, especially when first learning how to build Slate themes.

If liquid files could declare all possible dependencies, it would allow liquid files to act as the main central file for all dependencies related to the content of the liquid file.

Solution

A liquid {% import 'path' %} tag allows developers to declare dependencies that should be included in the build dependency tree. If liquid-loader encounters an {% import 'path' %} tag on build, it will add the referenced file as a dependency, and then erase the {% import %} statement from the final liquid file.

Example

This example relies on the following ‘reference dependencies via relative paths’ issue.

Let’s say Webpack encounters the following Liquid file:

/snippets/product-form/index.liquid/

{% import './product-form.js' %}
{% import './product-form.scss' %}

<product-form>
    {% form 'product', product, class:'product-form' %}
    ...
    {% endform %}
</product-form>

On build, it would remove remove the {% import %} tags from the liquid file: /snippets/product-form/index.liquid/

<product-form>
    {% form 'product', product, class:'product-form' %}
    ...
    {% endform %}
</product-form>

And the contents of the files referenced in the {% import %} tags would be added to the appropriate bundle, e.g. template.product.js and template.product.css.

drtyrell969 commented 5 years ago

How does one import a stylesheet from /styles/snippets/footer.scss?

RustyDev commented 5 years ago

How does one import a stylesheet from /styles/snippets/footer.scss?

Check out https://github.com/Shopify/starter-theme/ for reference on importing styles in:

https://github.com/Shopify/starter-theme/blob/master/src/styles/theme.scss https://github.com/Shopify/starter-theme/blob/master/src/scripts/layout/theme.js

drtyrell969 commented 5 years ago

Thank you. I'm aware and possess the files (as a matter of a slate build). What I'm finding is that the theme.scss isn't getting included in my theme. So I'm trying to get the theme.scss to link up with the main theme.liquid file. Not sure why slate create new-theme doesn't set me up with something functional.

Shopify / slate