diff --git a/examples/with-linaria/.gitignore b/examples/with-linaria/.gitignore
index 1437c53f70bc2..1abd88425c889 100644
--- a/examples/with-linaria/.gitignore
+++ b/examples/with-linaria/.gitignore
@@ -32,3 +32,6 @@ yarn-error.log*
# vercel
.vercel
+
+# Linaria
+.linaria-cache/
diff --git a/examples/with-linaria/next.config.js b/examples/with-linaria/next.config.js
index 6342bf53a45e4..3906100b95592 100644
--- a/examples/with-linaria/next.config.js
+++ b/examples/with-linaria/next.config.js
@@ -1,19 +1,3 @@
-const withCSS = require('@zeit/next-css')
+const withLinaria = require('next-linaria')
-module.exports = withCSS({
- webpack(config, options) {
- config.module.rules.push({
- test: /\.js$/,
- use: [
- {
- loader: 'linaria/loader',
- options: {
- sourceMap: process.env.NODE_ENV !== 'production',
- },
- },
- ],
- })
-
- return config
- },
-})
+module.exports = withLinaria({})
diff --git a/examples/with-linaria/package.json b/examples/with-linaria/package.json
index e5080ac892123..3d84e80ba4753 100644
--- a/examples/with-linaria/package.json
+++ b/examples/with-linaria/package.json
@@ -7,11 +7,14 @@
"start": "next start"
},
"dependencies": {
- "@zeit/next-css": "^1.0.1",
- "linaria": "2.0.0-alpha.5",
+ "linaria": "^2.1.0",
"next": "latest",
+ "next-linaria": "^0.10.0",
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
+ "devDependencies": {
+ "@babel/core": "^7.13.10"
+ },
"license": "MIT"
}
diff --git a/examples/with-linaria/pages/index.js b/examples/with-linaria/pages/index.js
index f00e46b8065fc..362505ea0ad2d 100644
--- a/examples/with-linaria/pages/index.js
+++ b/examples/with-linaria/pages/index.js
@@ -1,5 +1,6 @@
import Head from 'next/head'
import { styled } from 'linaria/react'
+import { css } from 'linaria'
const Box = styled.div`
margin-top: 40px;
@@ -20,13 +21,17 @@ const Box = styled.div`
}
`
+const anotherClass = css`
+ color: blue;
+`
+
export default function Home() {
return (
<>
With Linaria
- Zero runtime CSS in JS
+ Zero runtime CSS in JS
)
}