npmpackage.info

Gathering detailed insights and metrics for style-to-js

Other packages similar to style-to-js

css-has-pseudo

7.0.2

Style elements relative to other elements in CSS

webpack-fix-style-only-entries

0.6.1

Package to fix style (css/sass/less) only entries generating a extra js file.

qr-code-styling

1.9.2

Add a style and an image to your QR code

prettyoutput

1.2.0

Librarie to format js/json objects into a YAML-style colored output. Especially useful to pretty print logs. Performant (benchmarks)

Gathering detailed insights and metrics for style-to-js

style-to-js - 1.1.17 | npmpackage.info

style-to-js

📝 Parses CSS inline style to JavaScript object (camelCased).

1.1.17

MIT

TypeScript

65.17 kB

7.4

Installations

npm install style-to-js

Developer Guide

BETA

Typescript

Yes

Module System

CommonJS

Node Version

22.16.0

NPM Version

10.9.2 Pull Requests

Open

0

Total

689

Closed

20

Merged

669

Issues

Open

0

Total

2

Closed

2

Releases

v1.1.17

Updated on Jun 16, 2025

v1.1.16

Updated on Oct 06, 2024

v1.1.15

Updated on Oct 03, 2024

v1.1.14

Updated on Sep 09, 2024

v1.1.13

Updated on Aug 27, 2024

v1.1.12

Updated on Mar 27, 2024

View All 19 releases

Languages

TypeScript

JavaScript

TypeScript (80.3%)

JavaScript (19.7%)

Developer

remarkablemark

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

13 Stars

884 Commits

3 Forks

1 Watchers

1 Branches

3 Contributors

Updated on Jul 08, 2025

Maintainers

View All 3 Contributors

Package Meta Information

Latest Version

1.1.17

Package Id

style-to-js@1.1.17

Unpacked Size

65.17 kB

Size

16.00 kB

File Count

NPM Version

10.9.2

Node Version

22.16.0

Published on

Jun 16, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

style-to-js

Parses CSS inline style to JavaScript object (camelCased):

StyleToJS(string)

Example

1import parse from 'style-to-js';
2
3parse('background-color: #BADA55;');

Output:

1{ "backgroundColor": "#BADA55" }

Replit | JSFiddle | Examples

Install

NPM:

1npm install style-to-js --save

Yarn:

1yarn add style-to-js

CDN:

1<script src="https://unpkg.com/style-to-js@latest/umd/style-to-js.min.js"></script>
2<script>
3  window.StyleToJS(/* string */);
4</script>

Usage

Import

Import with ES Modules:

1import parse from 'style-to-js';

Require with CommonJS:

1const parse = require('style-to-js');

Parse style

Parse single declaration:

1parse('line-height: 42');

Output:

1{ "lineHeight": "42" }

Notice that the CSS property is camelCased.

Parse multiple declarations:

1parse(`
2  border-color: #ACE;
3  z-index: 1337;
4`);

Output:

1{
2  "borderColor": "#ACE",
3  "zIndex": "1337"
4}

Vendor prefix

Parse vendor prefix:

1parse(`
2  -webkit-transition: all 4s ease;
3  -moz-transition: all 4s ease;
4  -ms-transition: all 4s ease;
5  -o-transition: all 4s ease;
6  -khtml-transition: all 4s ease;
7`);

Output:

1{
2  "webkitTransition": "all 4s ease",
3  "mozTransition": "all 4s ease",
4  "msTransition": "all 4s ease",
5  "oTransition": "all 4s ease",
6  "khtmlTransition": "all 4s ease"
7}

Custom property

Parse custom property:

1parse('--custom-property: #f00');

Output:

1{ "--custom-property": "#f00" }

Unknown declaration

This library does not validate declarations, so unknown declarations can be parsed:

1parse('the-answer: 42;');

Output:

1{ "theAnswer": "42" }

Invalid declaration

Declarations with missing value are removed:

1parse(`
2  margin-top: ;
3  margin-right: 1em;
4`);

Output:

1{ "marginRight": "1em" }

Other invalid declarations or arguments:

1parse(); // {}
2parse(null); // {}
3parse(1); // {}
4parse(true); // {}
5parse('top:'); // {}
6parse(':12px'); // {}
7parse(':'); // {}
8parse(';'); // {}

The following values will throw an error:

1parse('top'); // Uncaught Error: property missing ':'
2parse('/*'); // Uncaught Error: End of comment missing

Options

reactCompat

When option reactCompat is true, the vendor prefix will be capitalized:

1parse(
2  `
3    -webkit-transition: all 4s ease;
4    -moz-transition: all 4s ease;
5    -ms-transition: all 4s ease;
6    -o-transition: all 4s ease;
7    -khtml-transition: all 4s ease;
8  `,
9  { reactCompat: true },
10);

Output:

1{
2  "WebkitTransition": "all 4s ease",
3  "MozTransition": "all 4s ease",
4  "msTransition": "all 4s ease",
5  "OTransition": "all 4s ease",
6  "KhtmlTransition": "all 4s ease"
7}

This removes the React warning:

Warning: Unsupported vendor-prefixed style property %s. Did you mean %s?%s", "oTransition", "OTransition"

Testing

Run tests with coverage:

1npm test

Run tests in watch mode:

1npm run test:watch

Lint files:

1npm run lint

Fix lint errors:

1npm run lint:fix

Release

Release and publish are automated by Release Please.

Special Thanks

style-to-object

License

MIT

No vulnerabilities found.

10

Dangerous-Workflow

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

10

Maintained

Determines if the project is "actively maintained".

10

Binary-Artifacts

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

10

Security-Policy

Determines if the project has published a security policy.

10

License

Determines if the project has defined a license.

10

Packaging

Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.

10

SAST

Determines if the project uses static code analysis.

9

Vulnerabilities

Determines if the project has open, known unfixed vulnerabilities.

5

Pinned-Dependencies

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

0

Token-Permissions

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

0

CII-Best-Practices

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

0

Fuzzing

Determines if the project uses fuzzing.

Score

7.4

/10

Last Scanned on 2025-07-07

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 style-to-js

Other packages similar to style-to-js

style-to-js

Installations

Developer Guide

Yes

CommonJS

22.16.0

10.9.2

Pull Requests

0

689

20

669

Issues

0

2

2

Releases

Languages

Developer

Download Statistics

GitHub Statistics

Maintainers

Package Meta Information

Total Downloads

NaN

Weekly Downloads

Monthly Downloads

Yearly Downloads

Dependencies

Dev Dependencies

style-to-js

Example

Install

Usage

Import

Parse style

Vendor prefix

Custom property

Unknown declaration

Invalid declaration

Options

reactCompat

Testing

Release

Special Thanks

License

10

10

10

10

10

10

10

9

5

0

0

0

7.4

/10