Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

style-to-js

Package Overview
Dependencies
Maintainers
0
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

style-to-js

Parses CSS inline style to JavaScript object (camelCased).

  • 1.1.16
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
0
Created
Source

style-to-js

NPM

NPM version Bundlephobia minified + gzip build codecov NPM downloads

Parses CSS inline style to JavaScript object (camelCased):

StyleToJS(string)

Example

import parse from 'style-to-js';

parse('background-color: #BADA55;');

Output:

{ "backgroundColor": "#BADA55" }

Replit | JSFiddle | Examples

Install

NPM:

npm install style-to-js --save

Yarn:

yarn add style-to-js

CDN:

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

Usage

Import

Import with ES Modules:

import parse from 'style-to-js';

Require with CommonJS:

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

Parse style

Parse single declaration:

parse('line-height: 42');

Output:

{ "lineHeight": "42" }

Notice that the CSS property is camelCased.

Parse multiple declarations:

parse(`
  border-color: #ACE;
  z-index: 1337;
`);

Output:

{
  "borderColor": "#ACE",
  "zIndex": "1337"
}

Vendor prefix

Parse vendor prefix:

parse(`
  -webkit-transition: all 4s ease;
  -moz-transition: all 4s ease;
  -ms-transition: all 4s ease;
  -o-transition: all 4s ease;
  -khtml-transition: all 4s ease;
`);

Output:

{
  "webkitTransition": "all 4s ease",
  "mozTransition": "all 4s ease",
  "msTransition": "all 4s ease",
  "oTransition": "all 4s ease",
  "khtmlTransition": "all 4s ease"
}

Custom property

Parse custom property:

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

Output:

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

Unknown declaration

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

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

Output:

{ "theAnswer": "42" }

Invalid declaration

Declarations with missing value are removed:

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

Output:

{ "marginRight": "1em" }

Other invalid declarations or arguments:

parse(); // {}
parse(null); // {}
parse(1); // {}
parse(true); // {}
parse('top:'); // {}
parse(':12px'); // {}
parse(':'); // {}
parse(';'); // {}

The following values will throw an error:

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

Options

reactCompat

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

parse(
  `
    -webkit-transition: all 4s ease;
    -moz-transition: all 4s ease;
    -ms-transition: all 4s ease;
    -o-transition: all 4s ease;
    -khtml-transition: all 4s ease;
  `,
  { reactCompat: true },
);

Output:

{
  "WebkitTransition": "all 4s ease",
  "MozTransition": "all 4s ease",
  "msTransition": "all 4s ease",
  "OTransition": "all 4s ease",
  "KhtmlTransition": "all 4s ease"
}

This removes the React warning:

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

Testing

Run tests with coverage:

npm test

Run tests in watch mode:

npm run test:watch

Lint files:

npm run lint

Fix lint errors:

npm run lint:fix

Release

Release and publish are automated by Release Please.

Special Thanks

License

MIT

Keywords

FAQs

Package last updated on 06 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc