style-to-object

WebJar for style-to-object

License

License

MIT
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

style-to-object
Last Version

Last Version

0.3.0
Release Date

Release Date

Type

Type

jar
Description

Description

style-to-object
WebJar for style-to-object
Project URL

Project URL

https://www.webjars.org
Source Code Management

Source Code Management

https://github.com/remarkablemark/style-to-object

Download style-to-object

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/style-to-object/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>style-to-object</artifactId>
    <version>0.3.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/style-to-object/
implementation 'org.webjars.npm:style-to-object:0.3.0'
// https://jarcasting.com/artifacts/org.webjars.npm/style-to-object/
implementation ("org.webjars.npm:style-to-object:0.3.0")
'org.webjars.npm:style-to-object:jar:0.3.0'
<dependency org="org.webjars.npm" name="style-to-object" rev="0.3.0">
  <artifact name="style-to-object" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='style-to-object', version='0.3.0')
)
libraryDependencies += "org.webjars.npm" % "style-to-object" % "0.3.0"
[org.webjars.npm/style-to-object "0.3.0"]

Dependencies

compile (1)

Group / Artifact Type Version
org.webjars.npm » inline-style-parser jar [0.1.1]

Project Modules

There are no modules declared in this project.

style-to-object

NPM

NPM version Build Status Coverage Status Dependency status NPM downloads

Parses inline style to object:

var parse = require('style-to-object');
parse('color: #C0FFEE; background: #BADA55;');

Output:

{ color: '#C0FFEE', background: '#BADA55' }

JSFiddle | Repl.it | Examples

Installation

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>

Usage

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

Iterator

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']]

Testing

Run tests:

$ npm test

Run tests in watch mode:

$ npm run test:watch

Run tests with coverage:

$ npm run test:coverage

# generate html report
$ npm run test:coverage:report

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

Only collaborators with credentials can release and publish:

$ npm run release
$ git push --follow-tags && npm publish

Special Thanks

License

MIT

Versions

Version
0.3.0