fela-plugin-validator

fela-plugin-validator

Enforces object validation for keyframes and rules. Logs invalid properties to the console. A csslint is used to check the CSS. One might also enable automatic property deletion.

Installation

yarn add fela-plugin-validator

You may alternatively use npm i --save fela-plugin-validator.

Usage

Make sure to read the documentation on how to use plugins.

import { createRenderer } from 'fela'
import validator from 'fela-plugin-validator'

const renderer = createRenderer({
  plugins: [ validator() ]
})

Plugin ordering

Make sure that you place the validator plugin at the end of your plugins array - or else you may get some false error / validation messages.

Configuration

Options

Option	Value	Default	Description
logInvalid	(boolean)	true	logs invalid properties/values
deleteInvalid	(boolean)	false	deletes invalid properties/values

Example

import { createRenderer } from 'fela'
import validator from 'fela-plugin-validator'

const validatorPlugin = validator({
  logInvalid: true,
  deleteInvalid: true
})

const renderer = createRenderer({
  plugins: [ validatorPlugin ]
})

Example

If the deleteInvalid option is enabled.

Keyframe

Input

{
  '0%': {
    color: 'red'
  },
  '101%': {
    color: 'blue'
  },
  color: 'blue'
}

Output

{
  '0%': {
    color: 'red'
  }
}

Rule

Input

{
  color: 'red',
  ':hover': {
    color: 'green',
    foo: {
      color: 'blue'
    }
  },
  'nested': {
    color: 'yellow'
  }
}

Output

{
  color: 'red',
  ':hover': {
    color: 'green',
  }
}

License

Fela is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all the great contributors.