Simplify Slate assets

[t-kelly]

TL;DR: Slate performs a number of magic transformations to the theme’s src/assets/ directory which ultimately result in developer confusion. This PR simplifies how Slate manages and transforms assets to achieve an easier to understand and reliable developer experience.

Problems

The /assets directory

In its current state, Slate does a lot of magic to a theme’s assets/ directory, including:

• Copying files from assets/svgs to snippets/ so SVGs can be inlined in a theme using {% include %}
• Transforming the contents of assets/scripts into layout and template specific bundles.
• Copying files from src/assets/static to dist/assets
• Copying files from src/assets/images to dist/assets
• Only copies other files from src/assets if they are referenced using the asset_url somewhere in a Liquid file ({{ '../assets/my-image.jpg' | asset_url }}), or imported into one of the bundles (import '../styles/theme.scss')

Related Issues

• [#702] SLATE_IGNORE_FILES does not work
• [#410] Clarify how the src/assets folder works and how it’s used in a theme
• [#418] Add custom fonts to slate 1.x

Referencing assets via relative paths

Slate also attempts to serve assets from a local asset server by using relative paths: ``` {{ '../assets/my-image.jpg' | asset_url }} ```

And then swaps the path for one that references the dev machine's local IP when in development, or one that will result in a valid cdn.shopify.com path for production build. This works great when the tag is structured exactly like the above, but breaks for examples like the following:

1. Path is contained in a variable:

{% assign myPath = '../assets/my-image.jpg' %}
{{ myPath | asset_url }}

2. More than one filter is used:

{{ '../assets/my-image.jpg' | asset_url | img_tag }}

Related issues

• [#558] slate-liquid-asset-loader should handle assets_url’s with additional filters
• [#559] Document how to reference assets in Liquid files
• [#625] Dynamic asset names
• [#610] SVG assets in CSS
• [#626] background css within theme.scss.liquid
• [#658] Do you have to run yarn deploy to use {{ img.jpg | asset_url }} in a liquid file?
• [#680] Problem with add custom fonts in .scss

Solution

This PR includes the following changes:

• All files inside src/assets are statically copied to dist/assets. Folders inside src/assets are not copied. Contents of folders are copied. We need to flush out what happens when there is a naming conflict. Using flatten option from copy-webpack-plugin
• All assets are referenced by filename only, as with native Shopify themes, e.g. {{ '../assets/my-image.jpg | asset_url }} is now {{ 'my-image.jpg' | asset_url }}.
• Only JS and styles referenced in snippets/style-tags.liquid and snippets/script-tags.liquid are fetched from your local server in development, all other assets referenced in your theme are fetched from Shopify CDN. This makes sure we can still take advantage of Hot Module Replacement and quick change previewing while modifying styles and scripts.
• The contents of src/assets/svgs should be renamed from `
• The contents of src/assets/scripts have moved to src/scripts
• The contents of src/assets/styles have moved to src/styles

TODO

• Full page reload always occurs after syncing changed files. We shouldn't do this is HMR was successful
• Open PR with updates to Starter Theme Simplify assets starter-theme#121
• Open PR with updates to Skeleton Theme Simplify assets skeleton-theme#9
• Update docs
• Deprecate slate-liquid-asset-tags-plugin on NPM
• Deprecate slate-liquid-asset-loader on NPM

[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.