fela-plugin-typescript

This plugins allows you to write type-safe style rules and provides some autocomplete for you:

Installation

yarn add fela-plugin-typescript

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

Usage

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

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

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

Example

Input

{
  color: 'red',
  width: 5,
  nested: {
    ':last-child': {
      padding: 10,
      height: 5,
    },
  },
}

Output

{
  color: 'red',
  width: 5,
  ':last-child': {
    padding: 10,
    height: 5,
  },
}

FAQ

Why use additional prop "nested"?

In Typescript you can't declare a simple property and indexed property with different types of values in single type. For example it will not work:

type IStyle = {
  padding?: number // <-- Error: Property 'padding' of type 'number'
  // is not assignable to string index type 'IStyle'.
  [selector: string]: IStyle
}

So the "nested" property is a tricky way to provide type-safety of Fela rules.

License

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