npmpackage.info

Gathering detailed insights and metrics for @storybook/addon-postcss

Other packages similar to @storybook/addon-postcss

storybook-addon-sass-postcss

0.3.2

Storybook addon used to run the PostCSS preprocessor with Sass support against your stories.

@storybook/addon-controls

8.4.5

Interact with component inputs dynamically in the Storybook UI

@storybook/addon-toolbars

8.4.5

Create your own toolbar items that control story rendering

@storybook/addon-actions

8.4.5

Get UI feedback when an action is performed on an interactive element

Gathering detailed insights and metrics for @storybook/addon-postcss

@storybook/addon-postcss

This Storybook addon can be used to run the PostCSS preprocessor against your stories.

2.0.0

MIT

JavaScript

224.56 kB

51,842,473 2.8

Installations

npm install @storybook/addon-postcss

Score

47.9

Supply Chain

63.3

Quality

79.6

Maintenance

Vulnerability

99.6

License

Pull Requests

Open

7

Total

17

Closed

3

Merged

7

Issues

Open

18

Total

30

Closed

12

Releases

@storybook/addon-postcss v2.0.0

v2.0.0

Published on 21 Jan 2021

@storybook/addon-postcss v1.0.0

v1.0.0

Published on 21 Jan 2021

View all 2 releases

Developer

storybookjs

Developer Guide

BETA

Module System

CommonJS

Min. Node Version

>=10

Typescript Support

No

Node Version

14.15.4

NPM Version

6.14.10 Statistics

21 Stars

19 Commits

21 Forks

6 Watching

2 Branches

100 Contributors

Updated on 30 Jul 2024

Bundle Size

773.68 kB

Minified

224.56 kB

Minified + Gzipped

Bundlephobia

Languages

JavaScript (54.74%)

MDX (25.25%)

CSS (10.08%)

TypeScript (9.93%)

Total Downloads

Cumulative downloads

Total Downloads

51,842,473

Last day

-16.7%

32,055

Compared to previous day

Last week

-0.3%

192,950

Compared to previous week

Last month

5.3%

855,143

Compared to previous month

Last year

-39.2%

12,305,417

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Versions

🚨 DEPRECATED: This package is unmaintained and deprecated in favor of @storybook/addon-styling-webpack and @storybook/addon-themes

Storybook Addon PostCSS

The Storybook PostCSS addon can be used to run the PostCSS preprocessor against your stories in Storybook.

Getting Started

Install this addon by adding the @storybook/addon-postcss dependency:

1yarn add -D @storybook/addon-postcss

within .storybook/main.js:

1module.exports = {
2  addons: ['@storybook/addon-postcss'],
3};

and create a PostCSS config in the base of your project, like postcss.config.js, that contains:

1module.exports = {
2  // Add your installed PostCSS plugins here:
3  plugins: [
4    // require('autoprefixer'),
5    // require('postcss-color-rebeccapurple'),
6  ],
7};

PostCSS 8+

If your project requires you to be using PostCSS v8, you can replace the included PostCSS by passing postcssLoaderOptions to this addon.

First, you'll need to install PostCSS v8 as a dependency of your project:

1yarn add -D postcss@^8

Then, you'll need to update your addons config. Within .storybook/main.js:

1module.exports = {
2  addons: [
3-   '@storybook/addon-postcss',
4+   {
5+     name: '@storybook/addon-postcss',
6+     options: {
7+       postcssLoaderOptions: {
8+         implementation: require('postcss'),
9+       },
10+     },
11+   },
12  ]
13}

When running Storybook, you'll see the version of PostCSS being used in the logs. For example:

1info => Using PostCSS preset with postcss@8.2.4

Loader Options

You can specify loader options for style-loader, css-loader, and postcss-loader by passing options to this addon as styleLoaderOptions, cssLoaderOptions, or postcssLoaderOptions respectively.

You can also configure the loader rule by overriding the rule option.

No vulnerabilities found.

10

Dangerous-Workflow

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

10

Binary-Artifacts

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

10

License

Determines if the project has defined a license.

3

Code-Review

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

0

Maintained

Determines if the project is "actively maintained".

0

Token-Permissions

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

0

Pinned-Dependencies

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

Reason

dependency not pinned by hash detected -- score normalized to 0

Details

Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:34: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/addon-postcss/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:35: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/addon-postcss/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:40: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/addon-postcss/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:59: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/addon-postcss/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:60: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/addon-postcss/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:65: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/addon-postcss/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:13: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/addon-postcss/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:14: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/addon-postcss/ci.yml/master?enable=pin
Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/ci.yml:19: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/addon-postcss/ci.yml/master?enable=pin
Warn: third-party GitHubAction not pinned by hash: .github/workflows/release.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/storybookjs/addon-postcss/release.yml/master?enable=pin
Info: 0 out of 9 GitHub-owned GitHubAction dependencies pinned
Info: 0 out of 1 third-party GitHubAction dependencies pinned

0

CII-Best-Practices

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

0

Fuzzing

Determines if the project uses fuzzing.

0

Branch-Protection

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

0

Security-Policy

Determines if the project has published a security policy.

0

SAST

Determines if the project uses static code analysis.

0

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

Reason

71 existing vulnerabilities detected

Details

Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92
Warn: Project is vulnerable to: GHSA-whgm-jr23-g3j9
Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw
Warn: Project is vulnerable to: GHSA-qwcr-r2fm-qrc7
Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg
Warn: Project is vulnerable to: GHSA-x9w5-v3q2-3rhw
Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5
Warn: Project is vulnerable to: GHSA-pxg6-pf52-xh8x
Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275
Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq
Warn: Project is vulnerable to: GHSA-phwq-j96m-2c2q
Warn: Project is vulnerable to: GHSA-ghr5-ch3p-vcr6
Warn: Project is vulnerable to: GHSA-r9p9-mrjm-926w
Warn: Project is vulnerable to: GHSA-434g-2637-qmqr
Warn: Project is vulnerable to: GHSA-49q7-c7j4-3p7m
Warn: Project is vulnerable to: GHSA-977x-g7h5-7qgw
Warn: Project is vulnerable to: GHSA-f7q4-pwc6-w24p
Warn: Project is vulnerable to: GHSA-fc9h-whq2-v747
Warn: Project is vulnerable to: GHSA-rv95-896h-c2vc
Warn: Project is vulnerable to: GHSA-qw6h-vgh9-j6wx
Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6
Warn: Project is vulnerable to: GHSA-78xj-cgh5-2h22
Warn: Project is vulnerable to: GHSA-2p57-rm9w-gvfp
Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h
Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq
Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488
Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g
Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9
Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm
Warn: Project is vulnerable to: GHSA-4wx3-54gh-9fr9
Warn: Project is vulnerable to: GHSA-952p-6rrq-rcjv
Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3
Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h
Warn: Project is vulnerable to: GHSA-r683-j2x4-v87g
Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr
Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9
Warn: Project is vulnerable to: GHSA-9wv6-86v2-598j
Warn: Project is vulnerable to: GHSA-566m-qj78-rww5
Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3
Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j
Warn: Project is vulnerable to: GHSA-gj77-59wh-66hg
Warn: Project is vulnerable to: GHSA-hqhp-5p83-hx96
Warn: Project is vulnerable to: GHSA-3949-f494-cm99
Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp
Warn: Project is vulnerable to: GHSA-5q6m-3h65-w53x
Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw
Warn: Project is vulnerable to: GHSA-m6fv-jmcg-4jfg
Warn: Project is vulnerable to: GHSA-cm22-4g7w-348p
Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7
Warn: Project is vulnerable to: GHSA-4rq4-32rv-6wp6
Warn: Project is vulnerable to: GHSA-64g7-mvw6-v9qj
Warn: Project is vulnerable to: GHSA-vx3p-948g-6vhq
Warn: Project is vulnerable to: GHSA-3jfq-g458-7qm9
Warn: Project is vulnerable to: GHSA-r628-mhmh-qjhw
Warn: Project is vulnerable to: GHSA-9r2w-394v-53qc
Warn: Project is vulnerable to: GHSA-5955-9wpr-37jh
Warn: Project is vulnerable to: GHSA-qq89-hq3f-393p
Warn: Project is vulnerable to: GHSA-f5x3-32g6-xq36
Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc
Warn: Project is vulnerable to: GHSA-jgrx-mgxx-jf9v
Warn: Project is vulnerable to: GHSA-w5p7-h5w8-2hfq
Warn: Project is vulnerable to: GHSA-wr3j-pwj9-hqq6
Warn: Project is vulnerable to: GHSA-j8xg-fqg3-53r7
Warn: Project is vulnerable to: GHSA-43f8-2h32-f4cj
Warn: Project is vulnerable to: GHSA-896r-f27r-55mw
Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6
Warn: Project is vulnerable to: GHSA-44c6-4v22-4mhx
Warn: Project is vulnerable to: GHSA-4x5v-gmq8-25ch
Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3
Warn: Project is vulnerable to: GHSA-6fc8-4gx4-v693
Warn: Project is vulnerable to: GHSA-3h5v-q93c-6h6q

Score

2.8

/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

Other packages similar to @storybook/addon-postcss

Other packages similar to @storybook/addon-postcss

@storybook/addon-postcss

Installations

Score

Pull Requests

7

17

3

7

Issues

18

30

12

Releases

Developer

storybookjs

Developer Guide

CommonJS

>=10

No

14.15.4

6.14.10

Statistics

Bundle Size

773.68 kB

224.56 kB

Languages

Total Downloads

51,842,473

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

Storybook Addon PostCSS

Getting Started

PostCSS 8+

Loader Options

10

10

10

3

0

0

0

0

0

0

0

0

0

2.8

/10