CSS/JS interoperability with postcss-preset-env

alexdilley · Jun 21, 2019 · 1d4e0b2 · 1d4e0b2
1 parent 899e8a8
commit 1d4e0b2
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 1 deletion.
diff --git 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
@@ -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
@@ -0,0 +1,5 @@
+module.exports = {
+  customProperties: {
+    '--theme': '#ff3e00',
+  },
+};