Zenhand
Zenhand parses a shorthand CSS selector like string representing an HTML element, and returns an object describing that element.
Example
var zenhand = // import {zenhand} from 'zenhand' // If you're using es modules. var obj = console
output:
tag: 'div' attrs: class: 'exmpl' 'info' style: background: 'red' color: 'black' id: 'ex' 'data-name': 'temp'
Install
npm install --save zenhand
or
yarn add zenhand
API
zenhand(str[, opts])
- str
The CSS selector like string to convert into an object representing the HTML element. The
str
is made up of the following parts:- The very first part of the string can be an HTML tag, if left out it defaults to
div
. - # defines an
id
, should only have one, duplicates will overwrite one another, can be placed anywhere in the string after the tag. - . defines a
class
, multiples allowed, duplicates will be added to theclass
property, can be placed anywhere in the string after the tag. - [attr=val] place an attribute definition inside square brackets, multiples allowed, can be placed anywhere in the string after the tag.
- The very first part of the string can be an HTML tag, if left out it defaults to
- opts
An options object.
- changeStyleCase
If true automatic conversion between camelCase and kebab-case for property names, default is
true
.
- changeStyleCase
If true automatic conversion between camelCase and kebab-case for property names, default is
- return An object representing the HTML element.
The module also exports two helper functions; toStyleStr
and fromStyleStr
.
toStyleStr(obj[, fromCase, toCase])
Convert an object representation of CSS styles into a string, optionally converting property case.
var toStyleStr zenhand = // Input.var obj = position: 'absolute' 'backgroundColor': '#ff0000' console // Output.'position:absolute; background-color:#ff0000;'
Supports camel
for camelCase, kebab
for kebab-case, and snake
for snake_case.
fromStyleStr(str[, fromCase, toCase])
Convert a str representation of CSS styles into an object, optionally converting property case.
var fromStyleStr zenhand = // Input.var str = 'position:absolute; background-color:#ff0000;' console // Output. position: 'absolute' 'backgroundColor': '#ff0000'
Supports camel
for camelCase, kebab
for kebab-case, and snake
for snake_case.