Lorren is a plugin-based style analyzer.
It works with both single CSS property-value pairs as well as style objects.
It is heavily data-driven and based on intense research and a massive data gathering process.
You will most likely use Lorren to build on top of it.
npm i --save lorrenimport Analyzer, { Plugins } from 'lorren'
// first we need to configure the plugins
// each plugin adds some information to the output data
const plugins = [
Plugins.cssProperty,
Plugins.unitlessProperty,
Plugins.valuePrefix,
Plugins.unprefixedProperty
]
// create a new instance with our config
const analyzer = new Analyzer(plugins)
// example style object
const styles = {
WebkitTransform: 'rotate(30deg)',
width: '-moz-calc(30px - 10px)',
lineHeight: 1.5
}
const information = analyzer.analyze(styles)The output is an object with information for both property and value of the passed style object. e.g. the above would output the following
{
WebkitTransform: {
property: {
raw: 'WebkitTransform',
css: '-webkit-transform',
unitless: false,
unprefixed: 'transform'
},
value: {
raw: 'rotate(30deg)',
prefix: ''
}
},
width: {
property: {
raw: 'width',
css: 'width',
unitless: false,
unprefixed: 'width'
},
value: {
raw: '-moz-calc(30px - 10px)',
prefix: '-moz-'
}
},
lineHeight: {
property: {
raw: 'lineHeight',
css: 'line-height',
unitless: true,
unprefixed: 'lineHeight'
},
value: {
raw: 1.5,
prefix: ''
}
}
}Plugins are the heart of the analyzer as they add the whole information lately.
A plugin is not limited in how much data it adds though I decided to only add one information per plugin and divide them into two main groups. One adding information on the style property and the other adding information on the style value.
| plugin | property | description |
|---|---|---|
| cssProperty | css |
Adds the equivalent CSS property |
| unitlessProperty | unitless |
Identifies properties allowing unitless values |
| unprefixedProperty | unprefixed |
Adds the property without vendor prefixes |
| propertyPrefix | prefix |
Adds the used vendor prefix |
| cssPropertyPrefix | cssPrefix |
Adds the equivalent CSS vendor prefix |
| shorthandProperty | longhands |
Adds the properties' longhand properties |
| plugin | value | description |
|---|---|---|
| unprefixedValue | unprefixed |
Adds the value without vendor prefixes |
| valuePrefix | prefix |
Adds the vendor prefix |
| valueUnit | unit |
Adds the value unit |
| valueType | type |
Adds the value type |
| vaueKeyword | 'keywords' | Adds a list of allowed keywords |
| initialValue | initial |
Adds the initial value |
Lorren is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.