Installations
npm install @stylable/nodeDeveloper
Developer Guide
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,394,390
Last day
-22.5%
739
Compared to previous day
Last week
-18.4%
3,065
Compared to previous week
Last month
2.4%
12,229
Compared to previous month
Last year
-40.4%
161,750
Compared to previous year
Daily Downloads
Weekly Downloads
Monthly Downloads
Yearly Downloads
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 | 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 plugin |
| esbuild | @stylable/esbuild | | esbuild integration plugin |
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.
No vulnerabilities found.
Reason
30 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 10
Reason
no dangerous workflow patterns detected
Reason
license file detected
Details
- Info: project has a license file: LICENSE:0
- Info: FSF or OSI recognized license: MIT License: LICENSE:0
Reason
no binaries found in the repo
Reason
0 existing vulnerabilities detected
Reason
dependency not pinned by hash detected -- score normalized to 3
Details
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/next.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/wix/stylable/next.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/next.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/wix/stylable/next.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm.yml:9: update your workflow using https://app.stepsecurity.io/secureworkflow/wix/stylable/npm.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/npm.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/wix/stylable/npm.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-tag.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/wix/stylable/publish-tag.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish-tag.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/wix/stylable/publish-tag.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/wix/stylable/tests.yml/master?enable=pin
- Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/tests.yml:16: update your workflow using https://app.stepsecurity.io/secureworkflow/wix/stylable/tests.yml/master?enable=pin
- Info: 0 out of 8 GitHub-owned GitHubAction dependencies pinned
- Info: 4 out of 4 npmCommand dependencies pinned
Reason
Found 3/30 approved changesets -- score normalized to 1
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
security policy file not detected
Details
- Warn: no security policy file detected
- Warn: no security file to analyze
- Warn: no security file to analyze
- Warn: no security file to analyze
Reason
detected GitHub workflow tokens with excessive permissions
Details
- Warn: no topLevel permission defined: .github/workflows/next.yml:1
- Warn: no topLevel permission defined: .github/workflows/npm.yml:1
- Warn: no topLevel permission defined: .github/workflows/publish-tag.yml:1
- Warn: no topLevel permission defined: .github/workflows/tests.yml:1
- Info: no jobLevel write permissions found
Reason
branch protection not enabled on development/release branches
Details
- Warn: branch protection not enabled for branch 'master'
Reason
project is not fuzzed
Details
- Warn: no fuzzer integrations found
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