update with-linaria example (vercel#23332)

## Documentation / Examples * removes deprecated `@zeit/next-css`. * adds https://github.com/Mistereo/next-linaria to work with the new built-in CSS functionality. * updates Linaria to latest release (v3 will require Mistereo/next-linaria#3 ) * adds an example of using Linaria without React * gitignores `.linaria-cache`
blitz-js · Mar 26, 2021 · b8a889d · b8a889d
1 parent e1ae721
commit b8a889d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 21 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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 (
     <>
       <Head>
         <title>With Linaria</title>
       </Head>
-      <Box>Zero runtime CSS in JS</Box>
+      <Box className={anotherClass}>Zero runtime CSS in JS</Box>
     </>
   )
 }