Skip to content

Industrial/fresh-emotion

Repository files navigation

Fresh Emotion

A plugin for Fresh that allows you to use Emotion for styling. Doesn't use @emotion/react but @emotion/css instead.

Usage

  1. In your main.ts, import the plugin:

    import { emotionPlugin } from "https://deno.land/x/fresh_emotion/mod.ts";
    
    // Then use it with Fresh.
    await start(manifest, {
      plugins: [
        emotionPlugin(),
      ],
    });
  2. In a Component, e.g. components/MyComponent.tsx:

    import { css, cx } from "https://deno.land/x/fresh_emotion/mod.ts";
    
    export function MyComponent() {
      return (
        <div
          className={cx(
            css({
              color: "yellow",
              backgroundColor: "hotpink",
            }),
          )}
        >
          <p>CSS-in-Fresh!</p>
        </div>
      );
    }

About

Emotion CSS-in-JS for Fresh

Resources

Stars

Watchers

Forks

Packages

No packages published