Skip to content

ValeriaVG/fresh-emotion

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Fresh Emotion CSS plugin

This plugin allows use of CSS-in-JS library emotion within fresh framework.

Can be used from within islands and supports frontend hydration of styles.

How to use

Add plugin to main.ts:

import emotion from "https://deno.land/x/fresh_emotioncss/plugin.ts";

await start(manifest, {
  plugins: [emotion()],
});

Add emotion/css to import_map.json:

{
  "imports": {
    /** ... **/
    "@emotion/css": "https://esm.sh/@emotion/css@11.10.5"
  }
}

Use in your code:

import { css } from "@emotion/css";
export default function () {
  return (
    <h1
      class={css`
        color: lime;
      `}
    >
      Hello, CSS-in-JS!
    </h1>
  );
}