diff --git a/README.md b/README.md index 6dc7ac1ad..392b9afef 100644 --- a/README.md +++ b/README.md @@ -87,21 +87,21 @@ npm install @pigment-css/react npm install --save-dev @pigment-css/nextjs-plugin ``` -Then, in your `next.config.js` file, import the plugin and wrap the exported config object: +Then, in your `next.config.mjs` file, import the plugin and wrap the exported config object: ```js -const { withPigment } = require('@pigment-css/nextjs-plugin'); +import { withPigment } from '@pigment-css/nextjs-plugin'; -module.exports = withPigment({ - // ... Your nextjs config. +export default withPigment({ + // ... Your Next.js config. }); ``` Finally, import the stylesheet in the root `layout.tsx` file: ```diff - import type { Metadata } from 'next'; +import '@pigment-css/react/styles.css'; + import type { Metadata } from 'next'; export const metadata: Metadata = { title: 'Create Next App', @@ -525,12 +525,12 @@ Theming is an **optional** feature that lets you reuse the same values, such as > > The **theme** object is used at build time and does not exist in the final JavaScript bundle. This means that components created using Pigment CSS's `styled` can be used with React Server Components by default while still getting the benefits of theming. -For example, in Next.js, you can define a theme in the `next.config.js` file like this: +For example, in Next.js, you can define a theme in the `next.config.mjs` file like this: ```js -const { withPigment } = require('@pigment-css/nextjs-plugin'); +import { withPigment } from '@pigment-css/nextjs-plugin'; -module.exports = withPigment( +export default withPigment( { // ...other nextConfig }, @@ -566,12 +566,12 @@ const Heading = styled('h1')(({ theme }) => ({ #### CSS variables support -Pigment CSS can generate CSS variables from the theme values when you wrap your theme with `extendTheme` utility. For example, in a `next.config.js` file: +Pigment CSS can generate CSS variables from the theme values when you wrap your theme with `extendTheme` utility. For example, in a `next.config.mjs` file: ```js -const { withPigment, extendTheme } = require('@pigment-css/nextjs-plugin'); +import { withPigment, extendTheme } from '@pigment-css/nextjs-plugin'; -module.exports = withPigment( +export default withPigment( { // ...nextConfig }, @@ -729,10 +729,10 @@ To support right-to-left (RTL) languages, add the `dir="rtl"` attribute to your ### Next.js ```js -const { withPigment } = require('@pigment-css/nextjs-plugin'); +import { withPigment } from '@pigment-css/nextjs-plugin'; // ... -module.exports = withPigment(nextConfig, { +export default withPigment(nextConfig, { theme: yourCustomTheme, // CSS output option css: { @@ -1066,10 +1066,10 @@ npm install -D @pigment-css/nextjs-plugin Next, they must set up Pigment CSS in their project: ```js -// framework config file, for example next.config.js -const { withPigment } = require('@pigment-css/nextjs-plugin'); +// framework config file, for example next.config.mjs +import { withPigment } from '@pigment-css/nextjs-plugin'; -module.exports = withPigment( +export default withPigment( { // ... Your nextjs config. }, @@ -1100,7 +1100,7 @@ Developers can customize the component's styles using the theme's `styleOverride For example, the custom theme below sets the background color of the statistics component's root slot to `tomato`: ```js -module.exports = withPigment( +export default withPigment( { ...nextConfig }, { theme: { @@ -1127,7 +1127,7 @@ module.exports = withPigment( Developers can also access theme values and apply styles based on the component's props using the `variants` key: ```js -module.exports = withPigment( +export default withPigment( { ...nextConfig }, { theme: { diff --git a/examples/pigment-css-nextjs-ts/.eslintrc.json b/examples/pigment-css-nextjs-ts/.eslintrc.json new file mode 100644 index 000000000..bffb357a7 --- /dev/null +++ b/examples/pigment-css-nextjs-ts/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": "next/core-web-vitals" +} diff --git a/examples/pigment-css-nextjs-ts/.gitignore b/examples/pigment-css-nextjs-ts/.gitignore index 28c8a5adb..fd3dbb571 100644 --- a/examples/pigment-css-nextjs-ts/.gitignore +++ b/examples/pigment-css-nextjs-ts/.gitignore @@ -4,6 +4,7 @@ /node_modules /.pnp .pnp.js +.yarn/install-state.gz # testing /coverage @@ -23,7 +24,6 @@ npm-debug.log* yarn-debug.log* yarn-error.log* -.pnpm-debug.log* # local env files .env*.local @@ -33,4 +33,4 @@ yarn-error.log* # typescript *.tsbuildinfo -# next-env.d.ts +next-env.d.ts diff --git a/examples/pigment-css-nextjs-ts/src/app/favicon.ico b/examples/pigment-css-nextjs-ts/app/favicon.ico similarity index 100% rename from examples/pigment-css-nextjs-ts/src/app/favicon.ico rename to examples/pigment-css-nextjs-ts/app/favicon.ico diff --git a/examples/pigment-css-nextjs-ts/src/app/globals.css b/examples/pigment-css-nextjs-ts/app/globals.css similarity index 100% rename from examples/pigment-css-nextjs-ts/src/app/globals.css rename to examples/pigment-css-nextjs-ts/app/globals.css diff --git a/examples/pigment-css-nextjs-ts/src/app/layout.tsx b/examples/pigment-css-nextjs-ts/app/layout.tsx similarity index 83% rename from examples/pigment-css-nextjs-ts/src/app/layout.tsx rename to examples/pigment-css-nextjs-ts/app/layout.tsx index fb3a3b8ad..93dfe4149 100644 --- a/examples/pigment-css-nextjs-ts/src/app/layout.tsx +++ b/examples/pigment-css-nextjs-ts/app/layout.tsx @@ -1,16 +1,17 @@ -import * as React from 'react'; -import type { Metadata } from 'next'; import '@pigment-css/react/styles.css'; -import { css } from '@pigment-css/react'; - import './globals.css'; +import type { Metadata } from 'next'; export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', }; -export default function RootLayout(props: { children: React.ReactNode }) { +export default function RootLayout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { return (