style-to-object
Advanced tools
Package description
The style-to-object npm package is used to convert inline CSS style strings into JavaScript objects. This can be particularly useful when working with React or other JavaScript frameworks that expect style information to be provided as objects rather than strings.
Convert CSS string to JavaScript object
This feature allows you to convert a CSS style string into a JavaScript object. The keys of the object are camelCased versions of the CSS property names, and the values are the corresponding CSS values as strings.
const styleToObject = require('style-to-object');
const styleString = 'color: red; font-size: 14px;';
const styleObject = styleToObject(styleString);
console.log(styleObject);Similar to style-to-object, css-to-object converts CSS strings into JavaScript objects. The main difference may lie in the API, performance, or additional features provided by the package.
This package is designed to parse CSS strings and may offer more comprehensive parsing capabilities, including selectors and media queries, which goes beyond the inline style conversion provided by style-to-object.
style-parser is another package that can parse inline style strings into objects. It might offer different parsing options or handle edge cases differently compared to style-to-object.
Readme
Parses inline style to object:
var parse = require('style-to-object');
parse('color: #C0FFEE; background: #BADA55;');
Output:
{ color: '#C0FFEE', background: '#BADA55' }
NPM:
npm install style-to-object --save
Yarn:
yarn add style-to-object
CDN:
<script src="https://unpkg.com/style-to-object@latest/dist/style-to-object.min.js"></script>
<script>
window.StyleToObject(/* string */);
</script>
Import the module:
// CommonJS
const parse = require('style-to-object');
// ES Modules
import parse from 'style-to-object';
Parse single declaration:
parse('line-height: 42');
Output:
{ 'line-height': '42' }
Parse multiple declarations:
parse(`
border-color: #ACE;
z-index: 1337;
`);
Output:
{ 'border-color': '#ACE', 'z-index': '1337' }
Parse unknown declarations:
parse('answer: 42;');
Output:
{ 'answer': '42' }
Invalid declarations/arguments:
parse(`
top: ;
right: 1em;
`); // { right: '1em' }
parse(); // null
parse(null); // null
parse(1); // null
parse(true); // null
parse('top:'); // null
parse(':12px'); // null
parse(':'); // null
parse(';'); // null
parse('top'); // throws Error
parse('/*'); // throws Error
If the 2nd argument is a function, then the parser will return null:
parse('color: #f00', function() {}); // null
But the function will iterate through each declaration:
parse('color: #f00', function(name, value, declaration) {
console.log(name); // 'color'
console.log(value); // '#f00'
console.log(declaration); // { type: 'declaration', property: 'color', value: '#f00' }
});
This makes it easy to customize the output:
const style = `
color: red;
background: blue;
`;
const output = [];
function iterator(name, value) {
output.push([name, value]);
}
parse(style, iterator);
console.log(output); // [['color', 'red'], ['background', 'blue']]
Run tests:
npm test
Run tests in watch mode:
npm run test:watch
Run tests with coverage:
npm run test:coverage
Lint files:
npm run lint
Fix lint errors:
npm run lint:fix
Test TypeScript declaration file for style and correctness:
npm run lint:dts
Release and publish are automated by Release Please.
FAQs
Parse CSS inline style to JavaScript object.
The npm package style-to-object receives a total of 5,664,279 weekly downloads. As such, style-to-object popularity was classified as popular.
We found that style-to-object demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Git dependencies in open source packages can introduce significant risks, including lack of version control, stability issues, dependency drift, and difficulty in auditing, making them potential targets for supply chain attacks.
Security News
Node.js has added experimental support for TypeScript, a move that highlights the growing importance of TypeScript in modern development.
Product
Check out what's new at Socket with our Product Changelog. It tracks all public-facing updates, improvements, and fixes so you can take full advantage of our features.