Package Exports

fela-plugin-validator

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (fela-plugin-validator) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

fela-plugin-validator

Enforces object validation for keyframes and rules. Logs invalid properties to the console. One might also enable automatic property deletion.

Installation

npm i --save fela-plugin-validator

Assuming you are using npm as your package mananger you can just npm install.
Otherwise we also provide a UMD. You can easily use it via unpkg. It registers a FelaPluginValidator global.

<!-- Fela (Development): Unminified version including all warnings -->
<script src="https://unpkg.com/fela-plugin-validator@4.0.0/dist/fela-plugin-validator.js"></script>
<!-- Fela (Production): Minified version -->
<script src="https://unpkg.com/fela-plugin-validator@4.0.0/dist/fela-plugin-validator.min.js"></script>

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() ]
})

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.