From ee3855175f3e486e0cd37715a50a2edc3460e615 Mon Sep 17 00:00:00 2001 From: Turadg Aleahmad Date: Tue, 23 Mar 2021 15:30:10 -0700 Subject: [PATCH 1/4] zero runtime Linaria example --- examples/with-linaria/.gitignore | 3 +++ examples/with-linaria/package.json | 2 +- examples/with-linaria/pages/index.js | 5 ++++- 3 files changed, 8 insertions(+), 2 deletions(-) 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/package.json b/examples/with-linaria/package.json index e5080ac892123..33253d5ff3c91 100644 --- a/examples/with-linaria/package.json +++ b/examples/with-linaria/package.json @@ -8,7 +8,7 @@ }, "dependencies": { "@zeit/next-css": "^1.0.1", - "linaria": "2.0.0-alpha.5", + "linaria": "^2.1.0", "next": "latest", "react": "^16.13.1", "react-dom": "^16.13.1" diff --git a/examples/with-linaria/pages/index.js b/examples/with-linaria/pages/index.js index f00e46b8065fc..4c56a7053916b 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,15 @@ 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 ) } From 579754965fd96aff379aeb3374fce909163a98ff Mon Sep 17 00:00:00 2001 From: Turadg Aleahmad Date: Tue, 23 Mar 2021 15:35:25 -0700 Subject: [PATCH 2/4] use Next's built-in CSS --- examples/with-linaria/next.config.js | 20 ++------------------ examples/with-linaria/package.json | 3 ++- 2 files changed, 4 insertions(+), 19 deletions(-) diff --git a/examples/with-linaria/next.config.js b/examples/with-linaria/next.config.js index 6342bf53a45e4..d96c910a656c1 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 33253d5ff3c91..7ea7de8290081 100644 --- a/examples/with-linaria/package.json +++ b/examples/with-linaria/package.json @@ -7,9 +7,10 @@ "start": "next start" }, "dependencies": { - "@zeit/next-css": "^1.0.1", + "@babel/core": "^7.13.10", "linaria": "^2.1.0", "next": "latest", + "next-linaria": "^0.10.0", "react": "^16.13.1", "react-dom": "^16.13.1" }, From c53d3f996ad74ac50700939b41270884ab13a708 Mon Sep 17 00:00:00 2001 From: Turadg Aleahmad Date: Tue, 23 Mar 2021 16:00:59 -0700 Subject: [PATCH 3/4] move babel to devDep --- examples/with-linaria/package.json | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/examples/with-linaria/package.json b/examples/with-linaria/package.json index 7ea7de8290081..3d84e80ba4753 100644 --- a/examples/with-linaria/package.json +++ b/examples/with-linaria/package.json @@ -7,12 +7,14 @@ "start": "next start" }, "dependencies": { - "@babel/core": "^7.13.10", "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" } From 574518d6d9c831a464d52d0eaa80f1eef5caefc6 Mon Sep 17 00:00:00 2001 From: Turadg Aleahmad Date: Tue, 23 Mar 2021 16:55:08 -0700 Subject: [PATCH 4/4] prettier-fix --- examples/with-linaria/next.config.js | 2 +- examples/with-linaria/pages/index.js | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/examples/with-linaria/next.config.js b/examples/with-linaria/next.config.js index d96c910a656c1..3906100b95592 100644 --- a/examples/with-linaria/next.config.js +++ b/examples/with-linaria/next.config.js @@ -1,3 +1,3 @@ -const withLinaria = require('next-linaria'); +const withLinaria = require('next-linaria') module.exports = withLinaria({}) diff --git a/examples/with-linaria/pages/index.js b/examples/with-linaria/pages/index.js index 4c56a7053916b..362505ea0ad2d 100644 --- a/examples/with-linaria/pages/index.js +++ b/examples/with-linaria/pages/index.js @@ -21,7 +21,9 @@ const Box = styled.div` } ` -const anotherClass = css`color: blue`; +const anotherClass = css` + color: blue; +` export default function Home() { return (