{
  color: "red",
  onHover: {
    color: "blue",
  },
  atWide: {
    color: "orange",
  }
}

{
  color: "red",
  ":hover": {
    color: "blue",
  },
  "@media (min-width: 40em)": {
    color: "orange",
  }
}

import { createRenderer } from "fela";
import luskPreset from "fela-preset-lusk";
 
const renderer = createRenderer({
  plugins: luskPreset({
    mediaQueries: {
      // Use whatever is appropriate for your app. Query names can be anything,
      // but try to stick to the `atSize` pattern.
      atNarrow: "@media (min-width: 25em)",
      atWide: "@media (min-width: 40em)",
      atVeryWide: "@media (min-width: 78em)",
    },
  }),
});

import { createRenderer } from "fela";
import luskPresetServer from "fela-preset-lusk/server";
 
const renderer = createRenderer({
  plugins: luskPresetServer({
    mediaQueries: {
      // Same as client-side...
      atNarrow: "@media (min-width: 25em)",
      atWide: "@media (min-width: 40em)",
      atVeryWide: "@media (min-width: 78em)",
    },
    prefixer: {
      // Use the user-agent information from the incoming request
      userAgent: "User Agent String"
    },
  }),
});

const renderer = createRenderer({
  plugins: [
    pluginBefore(),
    ...luskPreset(),
    pluginAfter(),
  ],
});