What tradeoffs were explored when building in the build tools into the CLI? #13
-
I see that CSS compilation happens inside the plugin. Can you unpack why this approach was taken vs using a build tool like Vite or Webpack and exposing it in the theme? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 2 replies
-
Hey Jeffrey 👋🏻 Great question. We’re taking a different approach from having all compilation happen within the theme, one that we think simplifies the overall development process. Unlike traditional build tools like Vite or Webpack, which can add layers of complexity and potentially slow down development across many different theme codebases, our method ensures that the theme codebase on GitHub directly mirrors what’s on a Shopify store, similar to how Shopify’s Dawn theme is approaching this. However, unlike Dawn, we still include a compilation step but within components, not the theme. We’re treating components as first-class citizens, rather than themes. Considering that the functionality of most e-commerce stores is near identical, focusing on components allows developers to concentrate where it matters most. This component-centric approach ensures faster iteration and easier maintenance, since code lives all in one place, and as each component's CSS (and other assets) is compiled individually before being added to the theme. Our mental model is that the theme now primarily acts as a wrapper—a shell for components. It defines the state of these components through settings and/or hardcoded snippet parameters, simplifying the overall structure. Having build tools like Vite or Webpack within the theme no longer fits this mental model. To be honest, we'd love to eventually remove the need for a CSS compiler altogether—the modern web has come a very long way in recent years. 💆🏻♂️ The documentation is still a work in progress, but I’d recommend checking out our documentation on Themes vs Components if you haven’t done so already. Please feel free to ask more questions or share your thoughts! |
Beta Was this translation helpful? Give feedback.
Hey Jeffrey 👋🏻
Great question. We’re taking a different approach from having all compilation happen within the theme, one that we think simplifies the overall development process.
Unlike traditional build tools like Vite or Webpack, which can add layers of complexity and potentially slow down development across many different theme codebases, our method ensures that the theme codebase on GitHub directly mirrors what’s on a Shopify store, similar to how Shopify’s Dawn theme is approaching this. However, unlike Dawn, we still include a compilation step but within components, not the theme.
We’re treating components as first-class citizens, rather than themes. Considering that the functional…