wix/stylable: Stylable - CSS for components · GitHub

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.

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.

• 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

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.

Package Name	Published Name	Latest Version	Description
core	@stylable/core		Core CSS preprocessor
runtime	@stylable/runtime		Runtime browser code
optimizer	@stylable/optimizer		Production mode optimizer
module-utils	@stylable/module-utils		Stylable CommonJS module generator
custom-value	@stylable/custom-value		Stylable custom build-time values

Package Name	Published Name	Latest Version	Description
cli	@stylable/cli		Used for managing Stylable stylesheets in a project
create-stylable-app	create-stylable-app		Boilerplate generator CLI
schema-extract	@stylable/schema-extract		JSON Schema convertor for Stylable stylesheets
language-service	@stylable/language-service		Language service protocol provider, business logic for the stylable-intelligence extension
build-tools	@stylable/build-tools		A collection of tools used during build-time by our webpack and rollup plugins

Package Name	Published Name	Latest Version	Description
jest	@stylable/jest		Jest Stylable processor plugin
node	@stylable/node		require hook and Node module factory
webpack-extensions	@stylable/webpack-extensions		Experimental features for webpack integration
webpack-plugin	@stylable/webpack-plugin		webpack (^5.30.0) integration plugin
experimental-loader	@stylable/experimental-loader		experimental webpack loader - not recommended for production use
rollup-plugin	@stylable/rollup-plugin		Rollup (v2.x) integration plugin
esbuild	@stylable/esbuild		esbuild integration plugin

Package Name	Published Name	Latest Version	Description
e2e-test-kit	@stylable/e2e-test-kit		webpack project runner used for E2E testing
dom-test-kit	@stylable/dom-test-kit		Stylable DOM related testing utils
core-test-kit	@stylable/core-test-kit		Utilities used for testing core Stylable operations (processing and transformations)

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

Copyright (c) 2017 Wix.com Ltd. All Rights Reserved. Use of this source code is governed by a MIT license.