https://github.com/dlehmhus/next-with-linaria

Linaria webpack loader for Next.js 13
https://github.com/dlehmhus/next-with-linaria

css linaria loader nextjs webpack

Last synced: 3 months ago
JSON representation

Linaria webpack loader for Next.js 13

• Host: GitHub
• URL: https://github.com/dlehmhus/next-with-linaria
• Owner: dlehmhus
• License: mit
• Created: 2022-11-07T20:26:20.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-04-18T10:14:38.000Z (7 months ago)
• Last Synced: 2024-07-19T13:27:20.200Z (4 months ago)
• Topics: css, linaria, loader, nextjs, webpack
• Language: TypeScript
• Homepage:
• Size: 421 KB
• Stars: 104
• Watchers: 1
• Forks: 5
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# Next.js 13 + Linaria

## What is this?

The new Next.js 13 app directory feature doesn't work with the [@linaria/webpack5-loader](https://github.com/callstack/linaria/tree/master/packages/webpack5-loader) anymore, therefore the [next-linaria](https://github.com/Mistereo/next-linaria) package sadly also doesn't work. This package solves that issue with a custom linaria webpack loader and [Webpack Virtual Modules](https://github.com/sysgears/webpack-virtual-modules).

## Try it before you buy it

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/edit/next-with-linaria?file=app%2Fpage.tsx)

## Installation

npm

```sh

    npm install next-with-linaria @linaria/babel-preset @linaria/core @linaria/react

```

pnpm

```sh

    pnpm install next-with-linaria @linaria/babel-preset @linaria/core @linaria/react

```

yarn

```sh

    yarn add next-with-linaria @linaria/babel-preset @linaria/core @linaria/react

```

## Usage

```js

// next.config.js

const withLinaria = require('next-with-linaria');

/** @type {import('next-with-linaria').LinariaConfig} */

const config = {

  // ...your next.js config

};

module.exports = withLinaria(config);

```

Now you can use linaria in all the places where Next.js also allows you to use [CSS Modules](https://beta.nextjs.org/docs/styling/css-modules). That currently means in every file in in the `app` directory. And the `pages` directory of course as well.

## Global Styles Restrictions

If you want to use linaria for [global styling](https://beta.nextjs.org/docs/styling/global-styles), you need to place those styles into a file with the suffix `.linaria.global.(js|jsx|ts|tsx)`:

```tsx

// app/style.linaria.global.tsx

import { css } from '@linaria/core';

export const globals = css`

  :global() {

    html {

      box-sizing: border-box;

    }

    *,

    *:before,

    *:after {

      box-sizing: inherit;

    }

    @font-face {

      font-family: 'MaterialIcons';

      src: url(../assets/fonts/MaterialIcons.ttf) format('truetype');

    }

  }

`;

```

```tsx

// app/layout.tsx

import './style.linaria.global';

export default function RootLayout({

  children,

}: {

  children: React.ReactNode;

}) {

  return (

    

      {children}

    

  );

}

```

This convention is needed because the loader needs to know which files contain global styles and which don't.