January 2025 Updates

[t-kelly]

Achievement unlocked. Theme components are officially 100% vanilla theme code. No build with zero file transformations. No magic! Devkit tooling simply automates otherwise manual and error-prone tasks like copying and pasting files from a component collection to theme project.

Breaking changes

Removed PostCSS

We feel confident in a no-build architecture that keeps the approach to theme components incredibly simple without sacrificing buyer, merchant, or developer experience. Instead of bundling component CSS files into a single bundle, they are copied as is into a theme project.

This change is largely architectural and does not require any significant changes to CSS:

• Replaced custom media queries (.e.g. @media (--small) {...}) with static CSS media queries (e.g. @media (max-width: 768px) {...}). We love this proposal and hope to eventually see it in browsers. This is a quick find and replace in CSS files.
• Component CSS files (e.g. components/button/main.css) are now included in the components assets folder (component/button/assets/button.css) and copied into the theme asset folder (your-theme/asset/button.css) when used.
• Each component is responsible for loading it's own CSS. We've created a stylesheet component that will automatically inline or async load a stylesheet based on section.location and section.index. Load style's by including {%- render 'stylesheet, name: 'button.css -%} in the component.

Checkout the following links for more details behind this decision + how it works:

• Breaking the Bundle: Moving from PostCSS Bundles to NoBuild CSS
• Utility classes: a love-hate relationship (and why they don't work for us)
• Stylesheet Component
• Namespaced assets
• See it all in action with our reference theme

Shopify CLI Theme Component Plugin Commands

Our latest release of our Shopify CLI theme component plugin is a full rewrite that is representative of the simplicity of our approach. See our dedicated post, Complexity is a bridge to simplicity, for the full backstory. Checkout the updated plugin README or run shopify theme component --help for more the details on the commands.

Enhancements

Introducing the component.manifest.json

The shopify theme component install command now generates a manifest file to map asset and snippet files to their respective source. This allows component snippet and asset files to mix with pre-existing theme files or even other component collection files.

Check out the component.manifest.json in our reference theme

Conventions and best-practices

Namespace asset files

Until Shopify supports sub-folders in assets, all component assets end up in a single folder. We've adopted the convention of namespacing assets files by category to help group them together in the assets folder. For example, component.icon.css, base.typography.css, util.pubsub.js

Simple <script type="import-map"> generation

We like working with JS import maps because it allows us to write JS without worrying about Shopify CDN asset urls. We simplified our approach to with working with modules with shopify theme generate import-map command, which will generate a snippets/import-map.liquid (example) file with an entry for each JS file in a theme's assets/ directory.