Qwik-emotion NPM

Qwik with EmotionJS

This library uses emotionJS with Qwik to get css data as strings.
Since emotion is executed server-side, it does not affect the speed of browser rendering.

Getting Started

Install

npm install qwik-emotion

Inject

/* root.tsx */

// Import props type
import {QwikEmotionProps} from "qwik-emotion";

export default component$((props: QwikEmotionProps) => {

  return (
    <QwikCityProvider>
      <head>
        <meta charSet="utf-8"/>
        <link rel="manifest" href="/manifest.json"/>
        <RouterHead/>
        {/* Add new line */}
        <style data-emotion="css" dangerouslySetInnerHTML={props.emotion?.css}></style>
      </head>
      <body lang="en">
      <RouterOutlet/>
      <ServiceWorkerRegister/>
      </body>
    </QwikCityProvider>
  );
});

/* entry.ssr.tsx */
import createEmotionRoot from "qwik-emotion";

export default async function (opts: RenderToStreamOptions) {
  // Extract css information
  const {css} = await createEmotionRoot(Root, opts);
  return renderToStream( <Root emotion={{css}} />, {
    manifest,
    ...opts,
    // Use container attributes to set attributes on the html tag.
    containerAttributes: {
      lang: "en-us",
      ...opts.containerAttributes,
    },
  });
}

/* index.tsx */
import {component$} from "@builder.io/qwik";
import {css} from "@emotion/css";

export default component$(() => {
  const style = css({
    color: "red"
  });
  return (
    <p class={style}>Hello, Emotion.</p>
  )
})

Advanced

@emotion/babel-plugin

install npm

npm i -D vite-plugin-babel @emotion/babel-plugin @babel/preset-typescript

/* vite.config.ts */
import babelPlugin from "vite-plugin-babel";

export default defineConfig({
  plugins: [
    babelPlugin({
      filter: /\.tsx?$/,
      babelConfig: {
        presets: ["@babel/preset-typescript"],
        plugins: ["@emotion/babel-plugin"]
      },
      loader:(path) => {
        if (extname(path) === '.tsx') {
          return 'tsx';
        }
      }
    })
  ]
})

qwik emotion style

@emotion/server

@everything-registry/sub-chunk-2518

1.0.0

10 months ago