Stylable

is CSS for components

/*Some Component Stylesheet*/ .root{ -st-states: loading; border: 1px solid pink; } .item{ color: gold; } some-component.st.css
/*Application Stylesheet*/ :import{ -st-from: "./some-component.st.css"; -st-default: SomeComponent; } SomeComponent::item{ color: blue; } SomeComponent:loading::item::before{ content: "*"; } app.st.css

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:

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

What Does Stylable Do?

Tooling

Stylable Intelligence

Treating CSS as a type system opens up a whole new world of tooling. We can get code completion that hints at the internal structure of components, we can get types for our parameters, and more. Our aim is to use Stylable to enhance the styling development process.

To get the full Stylable experience, please install our VSCode Code Completion Plugin which suggests Stylable syntax, types and more.

Shut up and take my money!

No need! Stylable is BSD-licensed. Take it, use it, make your development easier and your apps faster.

Viva CSS, and welcome Stylable. We hope you like it.

Videos

Documentation

Learn more about Stylable and get started with step by step instructions and code examples.

Project

Access the BSD-licensed Stylable GitHub project.

New ideas will come along, but they will extend CSS rather than replace it. I believe that the CSS code we write today will be readable by computers 500 years from now.

Håkon Wium Lie, co-creator of CSS.