On this page

Installation

This page describes installation and compile and plubin, and other details.

Install packages

shell

npm install --save-dev elter

shell

pnpm install --save-dev next-plugin-elter

Integration

you need to configure it in your configuration file.

next.config.js

const { configCSSModule } = require('next-plugin-elter')
 
/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    return configCSSModule(config);
  },
};
module.exports = nextConfig

Compile command

`npx elter` compiles without type checking.
Adding the argument `--compile` will include compilation checking using TypeScript.
You can also add the `--log` argument to see the CSS log that is output during compilation. It is recommended to generating server-side static CSS with a faster compile before next dev.

package.json

  "scripts": {
    "dev": "elter && next dev",
    "build": "elter --compile && next build",
  }

Server component

You can statically preview a ServerComponent using `<ServerCSS />`.
This ServerCSS will be null in production.

layout.tsx

import { ServerCSS } from 'elter/next'
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html>
      <head>
        <ServerCSS />
      </head>
      .....
  )
}

Global style

All you have to do is import the file that calls the cssx.global method.

layout.tsx

import 'styles/global'

Linter setting

shell

npm install --save-dev eslint-pulgin-css

.eslintrc.js

module.exports = {
  plugins: ["css"],
  extends: ["plugin:css/recommended"],
  settings: {
    css: {
      target: {
        defineFunctions: {
          elter: [["default", /^\w+$/u]]
        }
      }
    }
  }
};

Supported deps

I'ts confirmed to work with Node.js versions from 18, 20, 22.
If your project's dependencies are at an earlier version, update them.

@types/node: ^22.5.4.
typescript: ^5.4.5.