calmery / aleph-plugin-emotion

A plugin for using :woman_singer: with Aleph.js

@calmery-chan/aleph-plugin-emotion

A plugin for using 👩‍🎤 with Aleph.js.

Features

Can only use @emotion/css.

• API
  • Generate Class Names — css
  • Global Styles — injectGlobal
  • Animation Keyframes — keyframes
  • Composing Class Names — cx
• Custom Instances
• Server Side Rendering

Usage

$ npm i @calmery-chan/aleph-plugin-emotion

// aleph.config.ts

import type { Config } from "https://deno.land/x/aleph@v0.3.0-beta.19/types.d.ts";
import emotion from "./node_modules/@calmery-chan/aleph-plugin-emotion/plugin.ts";

export default <Config> {
  plugins: [emotion],
};

Internally, the React component is compiled using Babel, and then the CSS is extracted using the extractCritical function in @emotion/server. Therefore, if you import the npm package directly from esm.sh, etc., it will fail to compile using Babel. Use import_map.json and add the npm package using npm install.

// import_map.json

{
  "imports": {
    "@emotion/css": "https://esm.sh/@emotion/css@11.1.3",
    "react": "https://esm.sh/react@17.0.2"
  }
}

// pages/index.ts

// import { css } from "https://esm.sh/@emotion/css@11.1.3";
// import React from "https://esm.sh/react@17.0.2";
import { css } from "@emotion/css";
import React from "react";

const container = css`
  background: #000;
  color: #FFF;
`;

export default () => {
  return (
    <div className={container}>
      Hello World
    </div>
  );
};

$ npm i -D @emotion/css react
$ aleph dev

See example.