Componentry V4 enables a significantly upgraded workflow for customizing styles by using PostCSS instead of SASS for styles processing.
V4 improvement highlights:
Componentry styles are now fully customizeable, and easily overrideable thanks to PostCSS. Starting in V3 Componentry styles were intended to be 100% overrideable to provide the complete control needed for custom design systems, but this required defining your overrides in unwieldy SASS maps. Under the hood Componentry would merge the SASS maps from users with the library defaults, and then use the merged maps to generate the final styles. PostCSS greatly improves this workflow by allowing all definitions to be defined using JS style object syntax. This is a much easier format to work with, and is a common pattern in modern applications.
Utility classes are a key resource in Componentry, providing the flexible "in place" overrides that make a design system scalable and delightful to work with. In V3 Componentry had a limited set of utility classes, but was lacking an adequately robust set. Recognizing that creating a utility class system, is a very tricky, and very solved problem, Componentry V4 aims to provide excellent compatibility with other utility class systems instead of rolling our own. Tailwind is the first system that Componentry integrates closely with. This means you can now easily use Componentry and and Tailwind together for a truly turbocharged workflow.
V4 includes the following breaking changes:
For the V4 release any value passed to utility props will be directly used as a utility class. This is a breaking change from V3 which attempted to set non-theme values as inline styles. If you rely on this behavior you can wait until the V4.1 release to migrate, where it will be re-introduced.
Utility class styles are no longer included in Componentry itself. Creating a robust utility class system is a solved problem, and instead of re-inventing the wheel Componentry is focusing on providing great compatibility with other solutions. V4 includes support for using Tailwind as your utility classes system solution, see the docs for details.
To migrate from SASS, convert your theme and any component override styles into JS files and pass them to the Componentry PostCSS plugin as detailed in the and docs.