@zitterorg/illo-quia v1.5.13
@zitterorg/illo-quia
Parses CSS inline style to JavaScript object (camelCased):
StyleToJS(string)
Example
import parse from '@zitterorg/illo-quia';
parse('background-color: #BADA55;');
Output:
{ "backgroundColor": "#BADA55" }
Install
NPM:
npm install @zitterorg/illo-quia --save
Yarn:
yarn add @zitterorg/illo-quia
CDN:
<script src="https://unpkg.com/@zitterorg/illo-quia@latest/umd/@zitterorg/illo-quia.min.js"></script>
<script>
window.StyleToJS(/* string */);
</script>
Usage
Import
Import with ES Modules:
import parse from '@zitterorg/illo-quia';
Require with CommonJS:
const parse = require('@zitterorg/illo-quia');
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
7 days ago
10 days ago
8 days ago
9 days ago
11 days ago
12 days ago
13 days ago
14 days ago
15 days ago
16 days ago
17 days ago
18 days ago
19 days ago
20 days ago
21 days ago
22 days ago
23 days ago
24 days ago
25 days ago