lorren v1.0.0

Lorren

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.

Usage

npm i --save lorren

import 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

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.

Property-Plugins

Value-Plugins

License

Lorren is licensed under the MIT License. Documentation is licensed under Creative Common License. Created with ♥ by @rofrischmann.