Fela Preset Lusk
Fela plugin presets used at Lusk.
Installation
npm install --save fela-preset-lusk
Features
fela-preset-lusk
enhances the default Fela behaviour to allow you to write style objects that looks like this:
color: "red" onHover: color: "blue" atWide: color: "orange"
Instead of:
color: "red" ":hover": color: "blue" "@media (min-width: 40em)": color: "orange"
...much more JavaScripty. Note that media query names have to be configured on app-by-app basis. See usage below.
Additionally, all styles are automatically prefixed for optimal cross-browser compatibility. 👏
Usage
Client-side
;; const renderer = ;
Server-side
Server side preset differs from the client-side one by using dynamic style prefixer. When supplied userAgent string, (usually from this.headers["user-agent"]
when using Koa) it will only prefix declarations that are not supported by the requesting browser. For modern browsers this makes the response extremely lean. ✨
;; const renderer = ;
Combining with other plugins
If you want to add more plugins before or after the preset, spread the array returned from the preset function into another array.
const renderer = ;
If you're interested in more info about Fela plugins, see the official documentation.