At Wix, we ♥ CSS. Its simple, declarative syntax that is native in browsers is easily the fastest way to add styles to web pages and web apps. But when writing CSS that is scoped to individual components, developers have to maintain highly-specific selectors, using elaborate conventions to fake namespacing. Writing and maintaining CSS across large teams and large projects can be tricky.

We also ♥ TypeScript. TypeScript helps us manage these large projects, exposing at build-time what we could once only see at run-time.

We want to give CSS a type system — to do for CSS what TypeScript does for JavaScript. We would like to be able to:

Extend CSS so that it is easier to use in a component ecosystem, but without losing any of the declarative, familiar, static and fast aspects of CSS.

Create CSS Macros with JavaScript and use them at build time.

Use language services like Code Completion and Validation. Each component exposes a Style API that maps its internal parts and states so you can reuse components across teams without sacrificing stylability or scalability.

Provide the ability to see our errors at build time or even while working in our IDE. Wave goodbye to silent run-time breakage misery!

So we created Stylable — a CSS preprocessor that enables you to write style rules in CSS syntax, with some extensions that we believe adhere to the spirit of CSS.

What Does Stylable Do?

Stylable scopes styles to components so they don’t “leak” and clash with other styles.

Stylable enables custom pseudo-classes and pseudo-elements that abstract the internal state and structure of a component. These can then be styled externally. For example, you can style the label inside a button, or style the play button of a video player from outside these components.

At build time, the preprocessor converts the Stylable CSS into flat, static, valid, vanilla CSS that works cross-browser.

Tooling

Treating CSS as a type system opens up a whole new world of tooling. You can:

Get code completion that hints at the internal structure of components.