Welcome PostCSS
…and its friends too.
What is PostCSS?
At Contactlab we love developing with modularity in mind. Tools that fit well our approach, adding advantages, are welcome in our team.
PostCSS is a NodeJs module that takes CSS code and transforms it into an abstract data structure (Abstract Syntax Tree) and then pass it through to its plugin functions; they return the parsed content as a string that can then be written into a file (Check this AST explorer example). Plugins can change or not the receiving code, but sourcemaps will always be generated to trace every code change.
The abstract tree gives fast API that developers can use to write their plugins. For example, with css.eachRule() is possible to make a loop through each rule defined in a file, or loop through each rule within a declaration block with rule.eachDecl().
This is what PostCSS can do; it doesn’t change your CSS code, but it provides API to do that. If developed to do it, plugins can change your code, but if we think about it, they could do everything because they work on an abstract code tree.
From Sass to Cssnext
We have always been using Autoprefixer (an integrated PostCSS plugin) with our Sass code, but now — seizing the opportunity and the necessity to update our codebases — we decided to completely change our approach on writing our CSS architectures.
Pre-processors are without any doubt complete and useful tools, that helped communities during the last years (notice how they inspired a lot of CSS native features), but now we think that it is time to follow a new path that brings us closer to present and future web standards, and not far away from them.💡
Cssnext is the tool that we were searching for. It allows to write the more native possible CSS code, enabling to use the functionalities not yet supported by every browser and transform it to standard and interoperable CSS. PostCSS and Cssnext integrate very well inside a Shadow DOM environment with encapsulated CSS inside each UI component.
Below, a sample of an easy HTML custom <link> :
We have @nest , :host and custom-properties that allow to the component to provide a public interface for style customisation, both globally, or locally for the component instance. Cssnext offers more other useful features, here the full list.
Custom properties should be ignored by cssnext if we want to take advantage of component style hook.
There are many PostCSS plugins, here under a list of those we have chosen for our needs:
What we expect
The path we are following is bringing us to a goal that we like: making modular UI applications. We are happy about our decision because we are sure that this approach, supported by modern tools, it is a solid base to define standards for a modular and extensible future.
Our open-source projects will be soon updated, we can not wait to share with you what we learnt in the last months and to get your feedbacks. Thanks for your time in reading, here a Stephen Hay’s famous quote:
We’re not designing pages, we’re designing systems of components. — Stephen Hay
