Next.js + Linaria + Babel

Adds Linaria to built-in CSS support in Next.js.

Requires Next.js 10 or above with Webpack 5.0 or above.

Differences from alternatives

This plugin includes a custom babel preset that wraps the Linaria Babel Preset in such a manner that no extra webpack loader is required.

The standard Linaria solution and most other similar Next.js plugins use a custom webpack loader.

Features

[x] Wraps the standard Linaria Babel preset [x] Uses standard next-babel-loader instead of custom Linaria Webpack loader [x] Writes all generated css to .linaria-cache directly from Babel with no webpack overhead [x] Uses babel-plugin-module-resolver with the same resolution aliases that Next js uses in tsconfig.json or jsconfig.json (useful for mono repositories) [x] Uses Typescript resolver for tsconfig.json in case of mono repositories with multiple layers [x] Includes source maps for generated css [x] Uses MD5 content hashing to avoid generating the same CSS twice [x] Uses [.linaria].module.css extension by default to assocate css file with each component for optimal code splitting [x] Turns off the Next.js provided .module.css classname isolation for items generated by this plugin (hence requires a Next.js plugin as well as a babel plugin) [x] Babel plugin contains no Next.js specific code and can be re-used in any module bundler

Installation

npm install --save next-linaria-babel @linaria/core next-compose-plugins

or

yarn add next-linaria-babel @linaria/core next-compose-plugins

Usage

Create a next.config.js in your project

// next.config.js
const { withPlugins } = require('next-compose-plugins');

module.exports = withPlugins(
  [
    require('next-linaria-babel')
  ],
  {
    future: { webpack5: true },      // important for caching optimization
    webpack: (config, { defaultLoaders }) => {
        /** additional custom config here */
      return config
    }
  }
)

Create a babel.config.js in your project

// babel.config.js
"use strict";

module.exports = {
    presets: [
        'next-linaria-babel/preset', // replaces and calls internally @linaria/babel-preset
        [
            'next/babel',
            {
                'preset-react': {
                    runtime: 'automatic',
                },
            }
        ],
    ],
    plugins: [/* additional babel plugins here */],
}

License

The MIT License (MIT)