PCSS

What is PCSS?

PostCSS (PCSS) is used in many projects for CSS compilation. Through the use of PCSS can serve many purposes such as adding vendor prefixes, bundling files, or adding newer CSS features such as nesting, which is then compiled to vanilla CSS.

Throughout the years, our build process has relied on PCSS to varying degrees. In the past PCSS was used to add vendor prefixes, and extend native CSS functionality, however as CSS has developed our requirements for this have reduced. The most recent builds still use PCSS but with a lighter touch, primarily for bundling.

PCSS supports nesting, which can be an attractive feature, however in the long term nested CSS is much harder to maintain. Considering the vast majority of our clients take out a retainer longevity is a determining factor. With that in mind, all CSS should be as flat as possible, and nesting should be avoided.

Our history with PCSS

Shopify 1.0 Projects

For Shopify 1.0 projects, PCSS was used extensively, handling a wide range of responsibilities in the build pipeline, including autoprefixing, custom media queries, variables, and other SASS-like features.

Early 2.0 Projects

With the advent of Shopify 2.0 and the Dawn theme we stopped using PCSS on new projects. During this period plain CSS was used, taking advantage of modern native features. CSS files were included within each section, resulting in multiple smaller files on the page.

Later 2.0 Projects

On more recent projects, we've returned to using PCSS, but its role has changed significantly. Rather than relying on it for prefixing and variables, we now use it primarily for compiling multiple CSS files into a single output file, reducing the number of network requests on each page.