{"_id":"@atlea/next-css","_rev":"1-9274cebbeabd3b79158d62762c061e0e","name":"@atlea/next-css","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@atlea/next-css","version":"1.0.0","main":"index.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/atlea/next-plugins.git"},"dependencies":{"css-loader":"^3.2.0","extract-css-chunks-webpack-plugin":"^4.6.0","find-up":"^4.1.0","ignore-loader":"^0.1.2","optimize-css-assets-webpack-plugin":"^5.0.3","postcss-loader":"^3.0.0"},"devDependencies":{"webpack":"^4.29.5"},"gitHead":"31e8978d07e5468f760a222a72d1e8f3f457e6ff","description":"Import `.css` files in your Next.js project","bugs":{"url":"https://github.com/atlea/next-plugins/issues"},"homepage":"https://github.com/atlea/next-plugins#readme","_id":"@atlea/next-css@1.0.0","_nodeVersion":"12.5.0","_npmVersion":"6.11.1","dist":{"integrity":"sha512-Bdwq2XEfbYbVNH7yhT61wJlxKkzQjnbwPL/08efji6xe9CC5XW7XT8WX3XvQNzk4/4/Drjw1n8vrC0qX5GwZdg==","shasum":"8a51e6445abd8f7c77bfda59158447221da1b1ce","tarball":"https://registry.npmjs.org/@atlea/next-css/-/next-css-1.0.0.tgz","fileCount":4,"unpackedSize":8412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdYxE3CRA9TVsSAnZWagAArbAP/jnnqzbsRmT8SUsfDsZu\nVuW8HmXV9c5ppFAS+JrVxZYKVldksPQ+NmZM1vOlus4THxgfIyUM9iIOyCh/\n8aoHhYpQhUFJ1JWdZ8wgsW49FNjHXEsBlXYan7cdlVNVZ1EgPGFTfK2Bq/ZJ\njjvh7i/58M/7GNlAIaBi87eNFdzENt05zHQO6BikwX+6q/kxd1XrqOTn7uS+\nAWR+z9QBDto96FvDrBZCzMs463b4H45RHHBFqEhdYBB8k5fNHcxi8OHNAtGR\nlAsSVgWkWI6pyIow32ATw5omkbs44DQxskM4rINiPkzudKtj7yRyWbrQ0REW\nJ33iiJXYj1YfsmRH1y9gZkXNyw0SkSEhwD64Ylv2GDfYcbUs4YVG619ViBIC\nWMr4OcRgPAWsWvrqqi6YGKAu+g4BTkeHJb67eU8lIYLNHUUt+6vQ6UhcbDEf\nDrW7DAqM4VkvKHhANpLMjRCeyX4YRpJm+F/yyqo/CZ1DjWqJZKnaLG/J0sFP\niR0Pz2Xd76hM0wmc8A2McOoBHnSPXFyQL5oNC4MvOiot5iuiTPrerGRHSVEL\n4upefZjgVt+khQKeTihoclRoH2TsV1UojLOmtVBMsnXQF/iupCw53OhUeil1\n5Foe7X4/3Z80ZwSDV7tzwG28W1SZEc5e7in9JW6JuF9tRFz11temSzd+Eiw8\npwmr\r\n=qyRW\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCkc7SvWevgwJJzpASFeFUm4kWeJ3Du7vkJ1X/UW5f+qwIgFeurzzN3KzxzXOvCLawkn5WyBxu6ayzOy4Ky8BOtjeE="}]},"maintainers":[{"name":"tylerian","email":"jairo.eog@outlook.com"}],"_npmUser":{"name":"tylerian","email":"jairo.eog@outlook.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/next-css_1.0.0_1566773558465_0.8012293029260944"},"_hasShrinkwrap":false}},"time":{"created":"2019-08-25T22:52:38.256Z","1.0.0":"2019-08-25T22:52:38.591Z","modified":"2022-04-04T16:12:55.981Z"},"maintainers":[{"name":"tylerian","email":"jairo.eog@outlook.com"}],"description":"Import `.css` files in your Next.js project","homepage":"https://github.com/atlea/next-plugins#readme","repository":{"type":"git","url":"git+https://github.com/atlea/next-plugins.git"},"bugs":{"url":"https://github.com/atlea/next-plugins/issues"},"license":"MIT","readme":"# Next.js + CSS\n\nImport `.css` files in your Next.js project\n\n## Installation\n\n```\nnpm install --save @atlea/next-css\n```\n\nor\n\n```\nyarn add @atlea/next-css\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('@atlea/next-css')\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 () => <div className=\"example\">Hello World!</div>\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('@atlea/next-css')\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 () => <div className={css.example}>Hello World!</div>\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('@atlea/next-css')\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 => {\n  return (\n    <div className={css.example}>\n      ...\n    </div>\n  )\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('@atlea/next-css')\nmodule.exports = withCSS({\n  /* config options here */\n})\n```\n\nCreate a `postcss.config.js`\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` is 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('@atlea/next-css')\nmodule.exports = withCSS({\n  postcssLoaderOptions: {\n    parser: true,\n    config: {\n      ctx: {\n        theme: JSON.stringify(process.env.REACT_APP_THEME)\n      }\n    }\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('@atlea/next-css')\nmodule.exports = withCSS({\n  webpack(config, options) {\n    return config\n  }\n})\n```\n","readmeFilename":"readme.md"}