Introducing Stylable — and a musical!
At Wix Engineering, we’re great fans of Open Source; one in six of our engineers works on Open Source projects, and we’re number 11 on a global chart for open source contributions on GitHub.
Our most recently released project is Stylable — a CSS pre-processor for component-based software development, that puts styling back where it belongs: in static CSS. It guarantees styles won’t leak or clash across components, extending familiar CSS syntax while remaining compatible with it, so your IDE remains happy. Because it’s resolved to plain, cross-browser valid CSS at build time, there’s minimal runtime to slow down performance.
WHAT DOES STYLABLE DO?
(If you want the TL;DR, simply watch the music video below; the lyrics explain everything!)
Like most good open-source projects, Stylable was started in order to scratch our own itch. Wix is an engineering-based company (50% of our employees are engineers). We have many components that are shared across teams, across the company. We needed a way to safely take components, and style them from the outside without knowledge of their internal structure. We also needed to be as close as possible to standard CSS, because we have great designers whose primary tool of work is CSS, so we didn’t want to make designers change the way they work.
Stylable accomplishes this by adding an API to CSS — all parts of a component can be accessed through Stylable pseudo-elements.
For example, if we have a pagination component inside an album component inside a gallery component, we can write .gallery::album::pagination::next-button {…} without needing to know anything about the structure of the components.
This decouples structure from the styling API; if the structure changes as the component is developed further, styling won’t. We can also apply custom states, for example lightbox:loading or cart:empty, and style accordingly.
Ultimately, we want Stylable to do for CSS what TypeScript does for JavaScript — adds a type system to CSS so that we can flag errors at build time rather than at run time. This means we can do unit tests, can perform static analysis and perform “rule shaking” to remove redundant styles before bundling the CSS, and add code hinting, syntax highighting and the like to IDEs.
All of CSS — plus scoping!
Unlike some pre-processors, Stylable doesn’t restrict the CSS you can use. It’s a superset of CSS, so you can use the whole of the language. After many discussions with web developers and the W3C CSS Working Group, we’ve carefully designed Stylable to be syntax compatible with CSS — this means that you won’t be distracted by IDEs complaining about pre-processor directives; they are all syntax-compatible, using a -st- “vendor prefix” which are transpiled away into flat, vanilla, cross-browser CSS.
CAN I USE STYLABLE?
Stylable is best described as a “settled beta”. We’re actively going through bugs and fixing them, and are planning no major new features for the initial release.
It’ll soon be battle-tested in the WYSIWYG editor for our 110 million users, so we’re pretty confident that it’s stable, scalable and performant. One of our goals was to make rendering faster — moving styling out of run-time Javascript and back into CSS makes it faster.
We’re currently dogfooding it by integrating it into Wix’s development teams and back office systems, enabling us to find and fix more bugs before declaring it fully production-ready for other organisations to use. But feel free to play with it and let us know what you think — just file a GitHub issue.
Stylable is part of the infrastructure that enable Wix’s inhouse developers to reuse components in the challenging environment of a WYSIWYG editor that’s worked on by hundreds of engineers, spread out across multiple teams. Wix has been doing CSS-in-JS for nearly a decade, and we believe the experience Stylable provides to our developers is stunning.
We think that Stylable is the only Open Source project to launch with its own music video. Meet the team, follow them on Twitter, marvel at the dancing, and try the software!
Written by Bruce Lawson.
