forked from FINAKON/HelpProject
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.
271 lines
4.6 KiB
Markdown
271 lines
4.6 KiB
Markdown
# 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
|
|
<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:
|
|
|
|
```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)
|