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. :clap:
Usage
Client-side
import { createRenderer } from "fela";
import luskPreset from "fela-preset-lusk";
const renderer = createRenderer({
plugins: luskPreset({
mediaQueries: {
atNarrow: "@media (min-width: 25em)",
atWide: "@media (min-width: 40em)",
atVeryWide: "@media (min-width: 78em)",
},
}),
});
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. :sparkles:
import { createRenderer } from "fela";
import luskPresetServer from "fela-preset-lusk/server";
const renderer = createRenderer({
plugins: luskPresetServer({
mediaQueries: {
atNarrow: "@media (min-width: 25em)",
atWide: "@media (min-width: 40em)",
atVeryWide: "@media (min-width: 78em)",
},
prefixer: {
userAgent: "User Agent String"
},
}),
});
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 = createRenderer({
plugins: [
pluginBefore(),
...luskPreset(),
pluginAfter(),
],
});
If you're interested in more info about Fela plugins, see the official documentation.