{"id":15310720,"url":"https://github.com/codyjasonbennett/next-postcss","last_synced_at":"2026-01-07T07:11:32.634Z","repository":{"id":135644166,"uuid":"365395587","full_name":"CodyJasonBennett/next-postcss","owner":"CodyJasonBennett","description":"🧰 PostCSS for Next.js","archived":false,"fork":false,"pushed_at":"2021-06-16T08:54:15.000Z","size":50,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-04T12:05:19.306Z","etag":null,"topics":["css","nextjs","postcss","react","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/CodyJasonBennett.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-05-08T01:56:29.000Z","updated_at":"2021-08-21T08:50:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"b595047d-deff-4285-9484-334faf1edc3c","html_url":"https://github.com/CodyJasonBennett/next-postcss","commit_stats":{"total_commits":6,"total_committers":2,"mean_commits":3.0,"dds":"0.16666666666666663","last_synced_commit":"717902a0ccb30b1fa1e155bbb6004819a6709a2b"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodyJasonBennett%2Fnext-postcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodyJasonBennett%2Fnext-postcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodyJasonBennett%2Fnext-postcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/CodyJasonBennett%2Fnext-postcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/CodyJasonBennett","download_url":"https://codeload.github.com/CodyJasonBennett/next-postcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245892777,"owners_count":20689552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","nextjs","postcss","react","webpack"],"created_at":"2024-10-01T08:29:15.004Z","updated_at":"2026-01-07T07:11:32.597Z","avatar_url":"https://github.com/CodyJasonBennett.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# next-postcss\n\nImport `.css` files in your Next.js project with PostCSS.\n\n## Installation\n\n```\nnpm install --save next-postcss\n```\n\nor\n\n```\nyarn add next-postcss\n```\n\n## Usage\n\nThe stylesheet is compiled to `.next/static/css`. Next.js will automatically add the css file to the HTML.\nIn production a chunk hash is added so that styles are updated when a new version of the stylesheet is deployed.\n\n### Without CSS modules\n\nCreate a `next.config.js` in the root of your project (next to pages/ and package.json)\n\n```js\n// next.config.js\nconst withCSS = require('next-postcss');\nmodule.exports = withCSS({\n  /* config options here */\n});\n```\n\nCreate a CSS file `style.css`\n\n```css\n.example {\n  font-size: 50px;\n}\n```\n\nCreate a page file `pages/index.js`\n\n```js\nimport '../style.css';\n\nexport default () =\u003e \u003cdiv className=\"example\"\u003eHello World!\u003c/div\u003e;\n```\n\n**Note: CSS files can _not_ be imported into your [`_document.js`](https://github.com/zeit/next.js#custom-document). You can use the [`_app.js`](https://github.com/zeit/next.js#custom-app) instead or any other page.**\n\n### With CSS modules\n\n```js\n// next.config.js\nconst withCSS = require('next-postcss');\nmodule.exports = withCSS({\n  cssModules: true,\n});\n```\n\nCreate a CSS file `style.css`\n\n```css\n.example {\n  font-size: 50px;\n}\n```\n\nCreate a page file `pages/index.js`\n\n```js\nimport css from '../style.css';\n\nexport default () =\u003e \u003cdiv className={css.example}\u003eHello World!\u003c/div\u003e;\n```\n\n### With CSS modules and options\n\nYou can also pass a list of options to the `css-loader` by passing an object called `cssLoaderOptions`.\n\nFor instance, [to enable locally scoped CSS modules](https://github.com/css-modules/css-modules/blob/master/docs/local-scope.md#css-modules--local-scope), you can write:\n\n```js\n// next.config.js\nconst withCSS = require('next-postcss');\nmodule.exports = withCSS({\n  cssModules: true,\n  cssLoaderOptions: {\n    importLoaders: 1,\n    localIdentName: '[local]___[hash:base64:5]',\n  },\n});\n```\n\nCreate a CSS file `styles.css`\n\n```css\n.example {\n  font-size: 50px;\n}\n```\n\nCreate a page file `pages/index.js` that imports your stylesheet and uses the hashed class name from the stylesheet\n\n```js\nimport css from '../style.css';\n\nconst Component = props =\u003e {\n  return \u003cdiv className={css.example}\u003e...\u003c/div\u003e;\n};\n\nexport default Component;\n```\n\nYour exported HTML will then reflect locally scoped CSS class names.\n\nFor a list of supported options, [refer to the webpack `css-loader` README](https://github.com/webpack-contrib/css-loader#options).\n\n### PostCSS plugins\n\nCreate a `next.config.js` in your project\n\n```js\n// next.config.js\nconst withCSS = require('next-postcss');\nmodule.exports = withCSS({\n  /* config options here */\n});\n```\n\nCreate a `postcss.config.js` or `.postcssrc`\n\n```js\nmodule.exports = {\n  plugins: {\n    // Illustrational\n    'postcss-css-variables': {},\n  },\n};\n```\n\nCreate a CSS file `style.css` the CSS here is using the css-variables postcss plugin.\n\n```css\n:root {\n  --some-color: red;\n}\n\n.example {\n  /* red */\n  color: var(--some-color);\n}\n```\n\nWhen `postcss.config.js` or `.postcss` are not found `postcss-loader` will not be added and will not cause overhead.\n\nYou can also pass a list of options to the `postcss-loader` by passing an object called `postcssLoaderOptions`.\n\nFor example, to pass theme env variables to postcss-loader, you can write:\n\n```js\n// next.config.js\nconst withCSS = require('next-postcss');\nmodule.exports = withCSS({\n  postcssLoaderOptions: {\n    parser: true,\n    postcssOptions: {\n      ctx: {\n        theme: JSON.stringify(process.env.REACT_APP_THEME),\n      },\n    },\n  },\n});\n```\n\n### Configuring Next.js\n\nOptionally you can add your custom Next.js configuration as parameter\n\n```js\n// next.config.js\nconst withCSS = require('next-postcss');\nmodule.exports = withCSS({\n  webpack(config, options) {\n    return config;\n  },\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodyjasonbennett%2Fnext-postcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodyjasonbennett%2Fnext-postcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodyjasonbennett%2Fnext-postcss/lists"}