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 Lerna and Yarn workspaces to manage the various packages and their dependencies.
Core & Internals
| 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 |
Tooling & Utilities
| 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 |
Integrations
| 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 plugine |
Test-kits
| 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) |
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.
-
相信每一位从事Android开发的猿都遇到过需要自己去自定义View的需求，如果想通过xml指定一些我们自己需要的参数，就需要自己声明一个styleable,并在里面自己定义一些attr属性，这个过程相信大家都比较了解。当然，属性其实也不一定需要和View配合使用，比如我想通过一个Theme中的style对一个库进行一些简单参数的配置，这应该怎么做呢？我今天在封装一个库时在这个地方浪费了较多时间，