Skip to content

Instantly share code, notes, and snippets.

@LukasBombach
Last active February 17, 2022 05:31
Show Gist options
  • Save LukasBombach/dc46546919ecf71b2aa68688ee767e4e to your computer and use it in GitHub Desktop.
Save LukasBombach/dc46546919ecf71b2aa68688ee767e4e to your computer and use it in GitHub Desktop.
Making Linaria work with Next js

add linaria

yarn add -E linaria @zeit/next-css

.babelrc

{
  "presets": ["next/babel", "linaria/babel"]
}

next.config.js

const withCSS = require("@zeit/next-css");

module.exports = withCSS({
  webpack(config, { isServer }) {
    config.module.rules[0].use = [
      config.module.rules[0].use,
      {
        loader: "linaria/loader",
        options: {
          sourceMap: process.env.NODE_ENV !== "production"
        }
      }
    ];
    return config;
  }
});

pages/index.js

import React from 'react'
import { styled } from 'linaria/react'

const Box = styled.div`
  margin-top: 40px;
  margin-left: 40px;
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: spin 2s linear infinite;

  @keyframes spin {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }
`

export default () => {
  return (
    <Box>Zero runtime CSS in JS</Box>
  )
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment