next-with-linaria
Advanced tools
The new Next.js 13 app directory feature doesn't work with the @linaria/webpack5-loader anymore, therefore the next-linaria package sadly also doesn't work. This package solves that issue with a custom linaria webpack loader and Webpack Virtual Modules.
⚠️ This package is still in development and not battle tested yet! Don't use it in production. ⚠️
npm install next-with-linaria @linaria/babel-preset @linaria/core @linaria/react
pnpm install next-with-linaria @linaria/babel-preset @linaria/core @linaria/react
yarn add next-with-linaria @linaria/babel-preset @linaria/core @linaria/react
// next.config.js
const withLinaria = require('next-with-linaria');
/** @type {import('next-with-linaria').LinariaConfig} */
const config = {
experimental: {
appDir: true,
},
};
module.exports = withLinaria(config);
Now you can use linaria in all the places where Next.js also allows you to use CSS Modules. That currently means in every file in in the app directory. And the pages directory of course as well.
If you want to use linaria for global styling, you need to place those styles into a file with the suffix .linaria.global.(js|jsx|ts|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');
}
}
`;
// app/layout.tsx
import './style.linaria.global';
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
This convention is needed because the loader needs to know which files contain global styles and which don't.
For details on the config options, see the Linaria Config.
enableInMemoryCache (default: true).
If set to true, the loader will generate a hash for the file content and store the transformed code in memory and only re-run the transformation if the file has changed. This can increase performance when working with large files. However, hashing the file content, even though it is pretty fast compared to the transformation, can still take some time. If you are experiencing performance or memory issues, you can disable this feature.
Because webpack 5 caches modules, the virtual CSS Modules need to be cached as well (so at that point the are not really virtual anymore, are they? Anyway...). They are placed in the same directory as where webpack puts its cache files. If the next-with-linaria cache is not in sync with the webpack cache anymore, it will cause errors due to missing CSS Modules. If you encounter such an error, you can delete the .next/cache/webpack folder and restart the dev server.
FAQs
Linaria support for Next.js 13 app directory feature
The npm package next-with-linaria receives a total of 4,977 weekly downloads. As such, next-with-linaria popularity was classified as popular.
We found that next-with-linaria demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.