https://github.com/remarkablemark/style-to-js
:memo: Parses CSS inline style to JavaScript object (camelCased).
https://github.com/remarkablemark/style-to-js
css inline-style javascript object pojo style-to-js style-to-object
Last synced: 3 months ago
JSON representation
:memo: Parses CSS inline style to JavaScript object (camelCased).
- Host: GitHub
- URL: https://github.com/remarkablemark/style-to-js
- Owner: remarkablemark
- License: mit
- Created: 2020-11-22T03:29:18.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-05-01T04:16:46.000Z (about 1 year ago)
- Last Synced: 2024-05-01T21:25:51.837Z (about 1 year ago)
- Topics: css, inline-style, javascript, object, pojo, style-to-js, style-to-object
- Language: TypeScript
- Homepage: https://b.remarkabl.org/style-to-js
- Size: 2.2 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Codeowners: .github/CODEOWNERS
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# style-to-js
[](https://nodei.co/npm/style-to-js/)
[](https://www.npmjs.com/package/style-to-js)
[](https://bundlephobia.com/package/style-to-js)
[](https://github.com/remarkablemark/style-to-js/actions/workflows/build.yml)
[](https://codecov.io/gh/remarkablemark/style-to-js)
[](https://www.npmjs.com/package/style-to-js)
Parses CSS inline style to JavaScript object (camelCased):
```
StyleToJS(string)
```
## Example
```js
import parse from 'style-to-js';
parse('background-color: #BADA55;');
```
Output:
```json
{ "backgroundColor": "#BADA55" }
```
[Replit](https://replit.com/@remarkablemark/style-to-js) | [JSFiddle](https://jsfiddle.net/remarkablemark/04nob1y7/) | [Examples](https://github.com/remarkablemark/style-to-js/tree/master/examples)
## Install
[NPM](https://www.npmjs.com/package/style-to-js):
```sh
npm install style-to-js --save
```
[Yarn](https://yarnpkg.com/package/style-to-js):
```sh
yarn add style-to-js
```
[CDN](https://unpkg.com/style-to-js/):
```html
window.StyleToJS(/* string */);
```
## Usage
### Import
Import with ES Modules:
```js
import parse from 'style-to-js';
```
Require with CommonJS:
```js
const parse = require('style-to-js');
```
### Parse style
Parse single declaration:
```js
parse('line-height: 42');
```
Output:
```json
{ "lineHeight": "42" }
```
> Notice that the CSS property is camelCased.
Parse multiple declarations:
```js
parse(`
border-color: #ACE;
z-index: 1337;
`);
```
Output:
```json
{
"borderColor": "#ACE",
"zIndex": "1337"
}
```
### Vendor prefix
Parse [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix):
```js
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:
```json
{
"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](https://developer.mozilla.org/en-US/docs/Web/CSS/--*):
```js
parse('--custom-property: #f00');
```
Output:
```json
{ "--custom-property": "#f00" }
```
### Unknown declaration
This library does not validate declarations, so unknown declarations can be parsed:
```js
parse('the-answer: 42;');
```
Output:
```json
{ "theAnswer": "42" }
```
### Invalid declaration
Declarations with missing value are removed:
```js
parse(`
margin-top: ;
margin-right: 1em;
`);
```
Output:
```json
{ "marginRight": "1em" }
```
Other invalid declarations or arguments:
```js
parse(); // {}
parse(null); // {}
parse(1); // {}
parse(true); // {}
parse('top:'); // {}
parse(':12px'); // {}
parse(':'); // {}
parse(';'); // {}
```
The following values will throw an error:
```js
parse('top'); // Uncaught Error: property missing ':'
parse('/*'); // Uncaught Error: End of comment missing
```
### Options
#### reactCompat
When option `reactCompat` is true, the [vendor prefix](https://developer.mozilla.org/en-US/docs/Glossary/Vendor_Prefix) will be capitalized:
```js
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:
```json
{
"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:
```sh
npm test
```
Run tests in watch mode:
```sh
npm run test:watch
```
Lint files:
```sh
npm run lint
```
Fix lint errors:
```sh
npm run lint:fix
```
## Release
Release and publish are automated by [Release Please](https://github.com/googleapis/release-please).
## Special Thanks
- [style-to-object](https://github.com/remarkablemark/style-to-object)
## License
[MIT](https://github.com/remarkablemark/style-to-js/blob/master/LICENSE)