next-linaria-babel v3.0.2
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)