npmpackage.info

Gathering detailed insights and metrics for postcss-js

postcss-js

PostCSS for React Inline Styles, Free Style and other CSS-in-JS

4.0.1

658

MIT

JavaScript

967,430,520 4.2

Installations

npm install postcss-js

Pull Requests

Open

0

Total

27

Closed

1

Merged

26

Issues

Open

3

Total

50

Closed

47

Releases

Unable to fetch releases

Developer

postcss

Developer Guide

BETA

Module System

ESM

Min. Node Version

^12 || ^14 || >= 16

Typescript Support

No

Node Version

19.6.0

NPM Version

9.4.0 Statistics

658 Stars

155 Commits

24 Forks

17 Watching

1 Branches

24 Contributors

Updated on 15 Nov 2024

Languages

JavaScript (100%)

Total Downloads

Cumulative downloads

Total Downloads

967,430,520

Last day

-4.3%

1,824,855

Compared to previous day

Last week

2.4%

10,424,121

Compared to previous week

Last month

7.2%

43,367,737

Compared to previous month

Last year

47.1%

427,247,578

Compared to previous year

Daily Downloads

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

camelcase-css

Peer Dependencies

postcss

Versions

PostCSS JS

PostCSS for CSS-in-JS and styles in JS objects.

For example, to use Stylelint or RTLCSS plugins in your workflow.

Usage

Processing

1const postcssJs = require('postcss-js')
2const autoprefixer = require('autoprefixer')
3
4const prefixer = postcssJs.sync([ autoprefixer ])
5
6const style = prefixer({
7  userSelect: 'none'
8})
9
10style //=> {
11      //     WebkitUserSelect: 'none',
12      //        MozUserSelect: 'none',
13      //         msUserSelect: 'none',
14      //           userSelect: 'none'
15      //   }

Compile CSS-in-JS to CSS

1const postcss = require('postcss')
2const postcssJs = require('postcss-js')
3
4const style = {
5  top: 10,
6  '&:hover': {
7    top: 5
8  }
9};
10
11postcss().process(style, { parser: postcssJs }).then( (result) => {
12  result.css //=> top: 10px;
13             //   &:hover { top: 5px; }
14})

Compile CSS to CSS-in-JS

1const postcss = require('postcss')
2const postcssJs = require('postcss-js')
3
4const css  = '--text-color: #DD3A0A; @media screen { z-index: 1; color: var(--text-color) }'
5const root = postcss.parse(css)
6
7postcssJs.objectify(root) //=> {
8                          //     '--text-color': '#DD3A0A',
9                          //     '@media screen': {
10                          //       zIndex: '1',
11                          //       color: 'var(--text-color)'
12                          //     }
13                          //   }

API

`sync(plugins): function`

Create PostCSS processor with simple API, but with only sync PostCSS plugins support.

Processor is just a function, which takes one style object and return other.

`async(plugins): function`

Same as sync, but also support async plugins.

Returned processor will return Promise.

`parse(obj): Root`

Parse CSS-in-JS style object to PostCSS Root instance.

It converts numbers to pixels and parses [Free Style] like selectors and at-rules:

1{
2    '@media screen': {
3        '&:hover': {
4            top: 10
5        }
6    }
7}

This methods use Custom Syntax name convention, so you can use it like this:

1postcss().process(obj, { parser: postcssJs })

`objectify(root): object`

Convert PostCSS Root instance to CSS-in-JS style object.

Troubleshoot

Webpack may need some extra config for some PostCSS plugins.

`Module parse failed`

Autoprefixer and some other plugins need a json-loader to import data.

So, please install this loader and add to webpack config:

1loaders: [
2  {
3    test: /\.json$/,
4    loader: "json-loader"
5  }
6]

No vulnerabilities found.

10

Binary-Artifacts

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

10

Dangerous-Workflow

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

10

Token-Permissions

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

10

License

Determines if the project has defined a license.

8

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

0

Maintained

Determines if the project is "actively maintained".

0

Code-Review

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

0

Pinned-Dependencies

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

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

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

SAST

Determines if the project uses static code analysis.

Score

4.2

/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