From 1d4e0b249652b0ef9afe188738c2f007a19c97f0 Mon Sep 17 00:00:00 2001
From: Alex Dilley <alex.dilley@gmail.com>
Date: Fri, 21 Jun 2019 09:22:24 +0100
Subject: [PATCH] CSS/JS interoperability with postcss-preset-env

---
 postcss.config.js         | 1 +
 src/components/Nav.svelte | 2 +-
 src/styles/variables.js   | 5 +++++
 3 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 src/styles/variables.js

diff --git a/postcss.config.js b/postcss.config.js
index a99a8d1..1e617c9 100644
--- a/postcss.config.js
+++ b/postcss.config.js
@@ -10,6 +10,7 @@ module.exports = {
     require('postcss-import'),
     require('tailwindcss'),
     require('postcss-preset-env')({
+      importFrom: ['./src/styles/variables.js'],
       features: {
         'color-mod-function': true,
       },
diff --git a/src/components/Nav.svelte b/src/components/Nav.svelte
index f0a4ecd..e6423d7 100644
--- a/src/components/Nav.svelte
+++ b/src/components/Nav.svelte
@@ -4,7 +4,7 @@
 
 <style>
   nav {
-    border-color: color-mod(theme('colors.red.500') a(0.1));
+    border-color: color-mod(var(--theme) a(0.1));
   }
 
   li {
diff --git a/src/styles/variables.js b/src/styles/variables.js
new file mode 100644
index 0000000..c0cad39
--- /dev/null
+++ b/src/styles/variables.js
@@ -0,0 +1,5 @@
+module.exports = {
+  customProperties: {
+    '--theme': '#ff3e00',
+  },
+};