Bhargava
6063bd1724
1. Initial Commit - a boiler plate code and POC to realize the concept of context
sensitive help
2. Frontend code written in ReactJS
3. Backend code written in Java, Spring Boot Framework
4. Frontend Start:
pre-requisites : node, npm
npm run dev ==> to start the frontend vite server
5. Backend Start:
pre-requisites : java, mvn
mvn spring-boot:run ==> to start the backend server
6. Visit http://localhost:5173/ for basic demo of help, press F1 in textboxes
7. Visit http://localhost:5173/editor and enter "admin123" to add/modify texts.
Happy Coding !!!
Thank you,
Bhargava.
4.6 KiB
style-to-js
Parses CSS inline style to JavaScript object (camelCased):
StyleToJS(string)
Example
import parse from 'style-to-js';
parse('background-color: #BADA55;');
Output:
{ "backgroundColor": "#BADA55" }
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.