Stylable

CSS for components

README

Stylable enables you to write reusable, highly-performant components. Each component exposes a style API that maps its internal parts so you can reuse components across teams without sacrificing stylability.

- Scopes styles to components so they don't "leak" and clash with other styles.

- Enables custom pseudo-classes and pseudo-elements that abstract the internal structure of a component. These can then be styled externally.

- Cuts down on the resulting CSS bundles using "rule-shaking" and other optimizations

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

Learn more in our Documentation Center.

Installation

There are two options for installing Stylable:

- Create a new project using create-stylable-app

- Install Stylable and its webpack plugin to an existing webpack based project

For details on both options, see Install & Configure.

Demos

- Mr. Potato Bruce - A small application showcasing Stylable

- Manual Vue Integration - Simple example showing how to manually integrate Stylable into a Vue project (proof of concept)

- Various webpack project setups - An example of possible webpack configurations

Repository Structure

This repository is a mono-repo containing multiple packages that together comprise the Stylable ecosystem. It uses NPM workspaces to manage the various packages and their dependencies.

Core & Internals

Package	Published	Latest	Description
---------------------------------------	------------------------	:-----------------------------------------------------------------------------------------------------------------------------:	----------------------------------
[core](./packages/core)	`@stylable/core`	[![npm	Core
[runtime](./packages/runtime)	`@stylable/runtime`	[![npm	Runtime
[optimizer](./packages/optimizer)	`@stylable/optimizer`	[![npm	Production
[module-utils](./packages/module-utils)	`@stylable/module-utils`	[![npm	Stylable
[custom-value](./packages/custom-value)	`@stylable/custom-value`	[![npm	Stylable

Tooling & Utilities

Package	Published	Latest	Description
-----------------------------------------------------	----------------------------	:-------------------------------------------------------------------------------------------------------------------------------------:	------------------------------------------------------------------------------------------
[cli](./packages/cli)	`@stylable/cli`	[![npm	Used
[create-stylable-app](./packages/create-stylable-app)	`create-stylable-app`	[![npm	Boilerplate
[schema-extract](./packages/schema-extract)	`@stylable/schema-extract`	[![npm	JSON
[language-service](./packages/language-service)	`@stylable/language-service`	[![npm	Language
[build-tools](./packages/build-tools)	`@stylable/build-tools`	[![npm	A

Integrations

Package	Published	Latest	Description
-----------------------------------------------------	-------------------------------	:-------------------------------------------------------------------------------------------------------------------------------------------:	------------------------------------------------------------------
[jest](./packages/jest)	`@stylable/jest`	[![npm	Jest
[node](./packages/node)	`@stylable/node`	[![npm	`require`
[webpack-extensions](./packages/webpack-extensions)	`@stylable/webpack-extensions`	[![npm	Experimental
[webpack-plugin](./packages/webpack-plugin)	`@stylable/webpack-plugin`	[![npm	`webpack`
[experimental-loader](./packages/experimental-loader)	`@stylable/experimental-loader`	[![npm	experimental
[rollup-plugin](./packages/rollup-plugin)	`@stylable/rollup-plugin`	[![npm	Rollup

Test-kits

Package	Published	Latest	Description
-----------------------------------------	-------------------------	:-------------------------------------------------------------------------------------------------------------------------------:	------------------------------------------------------------------------------------
[e2e-test-kit](./packages/e2e-test-kit)	`@stylable/e2e-test-kit`	[![npm	`webpack`
[dom-test-kit](./packages/dom-test-kit)	`@stylable/dom-test-kit`	[![npm	Stylable
[core-test-kit](./packages/core-test-kit)	`@stylable/core-test-kit`	[![npm	Utilities

External Packages

Package	Description
---------------------------------------------------------------------	---------------------------------------------------------
[stylable-intelligence](https://github.com/wix/stylable-intelligence)	VSCode

Contributing

Read our contributing guidelines for details on our code of conduct, and the process for submitting pull requests.