diff --git a/examples/with-scoped-stylesheets-and-postcss/.babelrc b/examples/with-scoped-stylesheets-and-postcss/.babelrc new file mode 100644 index 00000000..be365edb --- /dev/null +++ b/examples/with-scoped-stylesheets-and-postcss/.babelrc @@ -0,0 +1,10 @@ +{ + "presets": [ + "next/babel" + ], + "plugins": [ + ["wrap-in-js", { + "extensions": ["css$"] + }] + ] +} diff --git a/examples/with-scoped-stylesheets-and-postcss/README.md b/examples/with-scoped-stylesheets-and-postcss/README.md new file mode 100644 index 00000000..a17e339f --- /dev/null +++ b/examples/with-scoped-stylesheets-and-postcss/README.md @@ -0,0 +1,53 @@ +# Scoped stylesheets with PostCSS example + +This is an example of using scoped stylesheets and PostCSS, heavily influenced by @davibe's [`with-global-stylesheet`](https://github.com/zeit/next.js/tree/master/examples/with-global-stylesheet). + +## How to use + +Download the example [or clone the repo](https://github.com/zeit/next.js): + +```bash +curl https://codeload.github.com/zeit/next.js/tar.gz/master | tar -xz --strip=2 next.js-master/examples/with-scoped-stylesheets-and-postcss +cd with-scoped-stylesheets-and-postcss +``` + +To get this example running you must + + npm install . + npm run dev + +Visit [http://localhost:3000](http://localhost:3000) and try edit `pages/styles.css`. Your changes should be picked up instantly. + +Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)) + +```bash +now +``` + +# Why + +Scoped CSS is neat and keeps your JS clean. PostCSS is amazing for extended features, such as nesting. CSS Modules keep your class names “local”. + +# Known bugs + +There's a bug, possibly within `next.js`, making composition between files unuseable. Consider the following: + +*`styles.css`* +```css +.paragraph { + composes: font-sans from '../global.css'; +} +``` + +*`global.css`* +```css +.font-sans { + font-family: georgia; /* ;) */ +} +``` + +The following error is thrown: + +``` +Module build failed: Error: Cannot find module '-!./../node_modules/css-loader/index.js??ref--6-4!./../node_modules/postcss-loader/index.js!../global.css' +``` diff --git a/examples/with-scoped-stylesheets-and-postcss/next.config.js b/examples/with-scoped-stylesheets-and-postcss/next.config.js new file mode 100644 index 00000000..2ff60524 --- /dev/null +++ b/examples/with-scoped-stylesheets-and-postcss/next.config.js @@ -0,0 +1,43 @@ +module.exports = { + webpack: (config) => { + config.module.rules.push( + { + test: /\.css$/, + use: [ + { + loader: 'emit-file-loader', + options: { + name: 'dist/[path][name].[ext]' + } + }, + 'raw-loader', + 'val-loader', + { + loader: 'skeleton-loader', + options: { + procedure: (content) => ( + `${content} \n` + ['module.exports = {', + 'stylesheet: module.exports.toString(),', + 'classNames: exports.locals', + '}' + ].join('') + ) + } + }, + { + loader: 'css-loader', + options: { + modules: true, + minimize: true, + importLoaders: 1, + localIdentName: '[local]-[hash:base64:5]' + } + }, + 'postcss-loader' + ] + } + ) + + return config + } +} diff --git a/examples/with-scoped-stylesheets-and-postcss/package.json b/examples/with-scoped-stylesheets-and-postcss/package.json new file mode 100644 index 00000000..ca604cb9 --- /dev/null +++ b/examples/with-scoped-stylesheets-and-postcss/package.json @@ -0,0 +1,27 @@ +{ + "name": "next.js-with-scoped-stylesheets-and-postcss", + "version": "1.0.0", + "description": "", + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start" + }, + "author": "Thomas Lindstrøm ", + "license": "ISC", + "dependencies": { + "babel-plugin-wrap-in-js": "^1.1.1", + "css-loader": "^0.26.1", + "next": "^2.0.0-beta.26", + "postcss-cssnext": "^2.9.0", + "postcss-loader": "^1.3.0", + "raw-loader": "^0.5.1", + "react": "^15.4.2", + "react-dom": "^15.4.2", + "skeleton-loader": "0.0.7", + "val-loader": "^0.5.0" + }, + "devDependencies": { + "now": "^3.1.0" + } +} diff --git a/examples/with-scoped-stylesheets-and-postcss/pages/index.js b/examples/with-scoped-stylesheets-and-postcss/pages/index.js new file mode 100644 index 00000000..2ef58052 --- /dev/null +++ b/examples/with-scoped-stylesheets-and-postcss/pages/index.js @@ -0,0 +1,10 @@ +import React from 'react' +import Head from 'next/head' +import {stylesheet, classNames} from './styles.css' + +export default () => ( +

+