add css-custom-config example

examples/css-custom-config/next.config.js

@@ -0,0 +1,11 @@
+const withCss = require('@zeit/next-css')
+const withPurgeCss = require('../../index')
+
+module.exports = withCss(
+ withPurgeCss({
+ purgeCssPaths: ['pages/**/*', 'components/**/*', 'other-components/**/*'],
+ purgeCss: {
+ whitelist: () => ['unused-but-whitelisted-class']
+ }
+ })
+)

examples/css-custom-config/other-components/button.js

@@ -0,0 +1 @@
+export default () => <div className="button-blue">Blue button</div>

examples/css-custom-config/package.json

@@ -0,0 +1,16 @@
+{
+ "scripts": {
+ "dev": "next",
+ "build": "next build",
+ "start": "next start"
+ },
+ "dependencies": {
+ "next": "^7.0.2",
+ "react": "^16.6.0",
+ "react-dom": "^16.6.0"
+ },
+ "devDependencies": {
+ "@zeit/next-css": "^1.0.1",
+ "next-purgecss": "^2.0.0-beta.1"
+ }
+}

examples/css-custom-config/pages/index.js

@@ -0,0 +1,3 @@
+import '../style.css'
+
+export default () => <div className="example">Hello World!</div>

examples/css-custom-config/readme.md

@@ -0,0 +1,6 @@
+Example with a custom config (check out [next.config.js](next.config.js)).
+
+To start :
+
+- `yarn install`
+- `yarn dev`

examples/css-custom-config/style.css

@@ -0,0 +1,15 @@
+.example {
+ font-size: 50px;
+}
+
+.button-blue {
+ color: blue;
+}
+
+.unused-but-whitelisted-class {
+ color: green;
+}
+
+.unused-css-class {
+ color: red;
+}