Installations

npm install @stylable/optimizer

Pull Requests

Open

4

Total

2,481

Closed

1,215

Merged

1,262

Issues

Open

115

Total

470

Closed

355

Releases

257

v6.1.1

Published on 30 May 2024

v6.1.0

Published on 21 May 2024

v6.0.2

Published on 15 Apr 2024

v6.0.1

Published on 19 Mar 2024

v6.0.0

Published on 13 Mar 2024

v5.19.0

Published on 05 Mar 2024

View all 257 releases

Developer

wix

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=18.12.0

Typescript Support

Yes

Node Version

20.13.1

NPM Version

10.5.2 Statistics

1,270 Stars

2,739 Commits

62 Forks

24 Watching

36 Branches

81 Contributors

Updated on 25 Nov 2024

Languages

TypeScript (96.23%)

JavaScript (3.2%)

CSS (0.54%)

HTML (0.04%)

Total Downloads

Cumulative downloads

Total Downloads

1,013,932

Last day

-31.3%

316

Compared to previous day

Last week

-17.9%

1,529

Compared to previous week

Last month

-3.3%

6,484

Compared to previous month

Last year

-55.2%

96,783

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

4

@stylable/core @tokey/css-selector-parser lightningcss postcss

Versions

Stylable CSS for Components

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 Name	Published Name	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	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	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

Test-kits

Package Name	Published Name	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

No vulnerabilities found.

10

Maintained

Determines if the project is "actively maintained".

10

Dangerous-Workflow

Determines if the project's GitHub Action workflows avoid dangerous patterns.

10

License

Determines if the project has defined a license.

10

Binary-Artifacts

Determines if the project has generated executable (binary) artifacts in the source repository.

10

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

3

Pinned-Dependencies

Determines if the project has declared and pinned the dependencies of its build process.

1

Code-Review

Determines if the project requires human code review before pull requests (aka merge requests) are merged.

0

CII-Best-Practices

Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.

0

Security-Policy

Determines if the project has published a security policy.

0

Token-Permissions

Determines if the project's workflows follow the principle of least privilege.

0

Branch-Protection

Determines if the default and release branches are protected with GitHub's branch protection settings.

0

Fuzzing

Determines if the project uses fuzzing.

Score

5

/10

Last Scanned on 2024-11-18

The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.

Learn More