Trying out some more cases with imports

slaskis · Oct 11, 2017 · e0ef4d0 · e0ef4d0
1 parent 9dbe9d0
commit e0ef4d0
Show file tree

Hide file tree

Showing 7 changed files with 222 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.next
diff --git a/lib/colors.js b/lib/colors.js
@@ -0,0 +1,3 @@
+export const blue = "#0000ff";
+export const red = "#ff0000";
+export const green = "#00ff00";
diff --git a/lib/styles.js b/lib/styles.js
@@ -1,7 +1,22 @@
 import css from "styled-jsx/css";
 
+import { blue as b } from "./colors";
+import * as Colors from "./colors";
+
 export const orange = css`
   .orange {
     color: orange;
   }
 `;
+
+export const blue = css`
+  .blue {
+    color: ${b};
+  }
+`;
+
+export const green = css`
+  .green {
+    color: ${Colors.green};
+  }
+`;
diff --git a/package.json b/package.json
@@ -4,11 +4,13 @@
   "main": "index.js",
   "license": "MIT",
   "dependencies": {
-    "next": "^4.0.0-beta.6",
+    "next": "^4.0.3",
     "react": "16",
     "react-dom": "16"
   },
   "scripts": {
-    "dev": "next dev"
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
   }
 }
diff --git a/pages/index.js b/pages/index.js
@@ -1,8 +1,94 @@
-import { orange } from "../lib/styles";
+import Link from "next/link";
+
+import { orange, blue, green } from "../lib/styles";
+import * as Colors from "../lib/colors";
+import { blue as b } from "../lib/colors";
 
 export default () => (
+  <div>
+    PAGE 1{" "}
+    <Link href="/two">
+      <a>Back to 2</a>
+    </Link>
+    <Orange />
+    <Blue />
+    <Green />
+    <Green />
+    <Green />
+    <Green />
+    <GreenColors />
+    <BlueColors />
+    <DoubleColors />
+    <Color color="gray" />
+    <Color color={Colors.red} />
+    <Color color={b} />
+    {["teal", "gold"].map(c => <Color key={c} color={c} />)}
+  </div>
+);
+
+const Orange = () => (
   <div className="orange">
     Hello (i should be orange)
     <style jsx>{orange}</style>
   </div>
 );
+
+const Blue = () => (
+  <div className="blue">
+    Hello (i should be blue)
+    <style jsx>{blue}</style>
+  </div>
+);
+
+const Green = () => (
+  <div className="green">
+    Hello (i should be green)
+    <style jsx>{green}</style>
+  </div>
+);
+
+const GreenColors = () => (
+  <div className="green">
+    Hello (i should be green too)
+    <style jsx>{`
+      .green {
+        color: ${Colors.green};
+      }
+    `}</style>
+  </div>
+);
+
+const BlueColors = () => (
+  <div className="blue">
+    Hello (i should be blue too)
+    <style jsx>{`
+      .blue {
+        color: ${b};
+      }
+    `}</style>
+  </div>
+);
+
+const DoubleColors = () => (
+  <div className="orange z-blue">
+    Hello (i should be orange too but will be blue because of insertion order of
+    the &lt;style> tags)
+    <style jsx>{`
+      .z-blue {
+        color: ${b};
+      }
+    `}</style>
+    <style jsx>{orange}</style>
+  </div>
+);
+
+const Color = ({ color }) => (
+  <div className="color">
+    Hello (i should be the color: {color})
+    <style jsx>{`
+      .color {
+        color: ${color};
+      }
+    `}</style>
+  </div>
+);
diff --git a/pages/two.js b/pages/two.js
@@ -0,0 +1,94 @@
+import Link from "next/link";
+
+import { orange, blue, green } from "../lib/styles";
+import * as Colors from "../lib/colors";
+import { blue as b } from "../lib/colors";
+
+export default () => (
+  <div>
+    PAGE 2{" "}
+    <Link href="/">
+      <a>Back to 1</a>
+    </Link>
+    <Orange />
+    <Blue />
+    <Green />
+    <Green />
+    <Green />
+    <Green />
+    <GreenColors />
+    <BlueColors />
+    <DoubleColors />
+    <Color color="gray" />
+    <Color color={Colors.red} />
+    <Color color={b} />
+    {["teal", "gold"].map(c => <Color key={c} color={c} />)}
+  </div>
+);
+
+const Orange = () => (
+  <div className="orange">
+    Hello (i should be orange)
+    <style jsx>{orange}</style>
+  </div>
+);
+
+const Blue = () => (
+  <div className="blue">
+    Hello (i should be blue)
+    <style jsx>{blue}</style>
+  </div>
+);
+
+const Green = () => (
+  <div className="green">
+    Hello (i should be green)
+    <style jsx>{green}</style>
+  </div>
+);
+
+const GreenColors = () => (
+  <div className="green">
+    Hello (i should be green too)
+    <style jsx>{`
+      .green {
+        color: ${Colors.green};
+      }
+    `}</style>
+  </div>
+);
+
+const BlueColors = () => (
+  <div className="blue">
+    Hello (i should be blue too)
+    <style jsx>{`
+      .blue {
+        color: ${b};
+      }
+    `}</style>
+  </div>
+);
+
+const DoubleColors = () => (
+  <div className="orange z-blue">
+    Hello (i should be orange too but will be blue because of insertion order of
+    the &lt;style> tags)
+    <style jsx>{`
+      .z-blue {
+        color: ${b};
+      }
+    `}</style>
+    <style jsx>{orange}</style>
+  </div>
+);
+
+const Color = ({ color }) => (
+  <div className="color">
+    Hello (i should be the color: {color})
+    <style jsx>{`
+      .color {
+        color: ${color};
+      }
+    `}</style>
+  </div>
+);
diff --git a/yarn.lock b/yarn.lock
@@ -2916,9 +2916,9 @@ netrc@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/netrc/-/netrc-0.1.4.tgz#6be94fcaca8d77ade0a9670dc460914c94472444"
 
-next@^4.0.0-beta.6:
-  version "4.0.0-beta.6"
-  resolved "https://registry.yarnpkg.com/next/-/next-4.0.0-beta.6.tgz#e6c1fc601a1d5055d7a8863c5bd7b63a83bd0d6d"
+next@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/next/-/next-4.0.3.tgz#ccf66fa79848e49f07125a12fca9f4bf2fcaf904"
   dependencies:
     ansi-html "0.0.7"
     babel-core "6.26.0"
@@ -2959,12 +2959,12 @@ next@^4.0.0-beta.6:
     pkg-up "2.0.0"
     prop-types "15.6.0"
     prop-types-exact "1.1.1"
-    react-hot-loader "3.0.0-beta.7"
+    react-hot-loader "^3.0.0"
     recursive-copy "2.0.6"
     send "0.15.6"
     source-map-support "0.4.18"
     strip-ansi "4.0.0"
-    styled-jsx "2.0.1-beta.5"
+    styled-jsx "2.0.2"
     touch "3.1.0"
     unfetch "3.0.0"
     url "0.11.0"
@@ -3506,7 +3506,7 @@ rc@^1.1.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-deep-force-update@^2.0.1:
+react-deep-force-update@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/react-deep-force-update/-/react-deep-force-update-2.1.1.tgz#8ea4263cd6455a050b37445b3f08fd839d86e909"
 
@@ -3519,16 +3519,16 @@ react-dom@16:
     object-assign "^4.1.1"
     prop-types "^15.6.0"
 
-[email protected]-beta.7:
-  version "3.0.0-beta.7"
-  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-3.0.0-beta.7.tgz#d5847b8165d731c4d5b30d86d5d4716227a0fa83"
+react-hot-loader@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/react-hot-loader/-/react-hot-loader-3.0.0.tgz#6e28da9d459da8085f5ee8bdd775046ba4b5cd0b"
   dependencies:
     babel-template "^6.7.0"
     global "^4.3.0"
-    react-deep-force-update "^2.0.1"
+    react-deep-force-update "^2.1.1"
     react-proxy "^3.0.0-alpha.0"
     redbox-react "^1.3.6"
-    source-map "^0.4.4"
+    source-map "^0.6.1"
 
 react-proxy@^3.0.0-alpha.0:
   version "3.0.0-alpha.1"
@@ -3991,6 +3991,10 @@ source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.1, source-map@~0.5.3:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
 
+source-map@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+
 sourcemapped-stacktrace@^1.1.6:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/sourcemapped-stacktrace/-/sourcemapped-stacktrace-1.1.7.tgz#17e05374ff78b71a9d89ad3975a49f22725ba935"
@@ -4151,9 +4155,9 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-[email protected].1-beta.5:
-  version "2.0.1-beta.5"
-  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.0.1-beta.5.tgz#7995dfd3a5aa88e94d9e36dc0e431d03cfacecce"
+[email protected].2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-2.0.2.tgz#71acf7720efec3fb051a4cceaa29d19a1bee4f65"
   dependencies:
     babel-plugin-syntax-jsx "6.18.0"
     babel-types "6.23.0"