Skip to content

Latest commit

 

History

History
88 lines (60 loc) · 10.6 KB

README.md

File metadata and controls

88 lines (60 loc) · 10.6 KB

Stand With Ukraine

Stylable CSS for Components

Build Status

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:

For details on both options, see Install & Configure.

Demos

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 Name Published Name Latest Version Description
core @stylable/core npm version Core CSS preprocessor
runtime @stylable/runtime npm version Runtime browser code
optimizer @stylable/optimizer npm version Production mode optimizer
module-utils @stylable/module-utils npm version Stylable CommonJS module generator
custom-value @stylable/custom-value npm version Stylable custom build-time values

Tooling & Utilities

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

Integrations

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

Test-kits

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

External Packages

Package Name Description
stylable-intelligence VSCode extension providing language services for Stylable

Contributing

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

License

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