From af99607ab3d4bcaec2fe369b5031018d46e75f4f Mon Sep 17 00:00:00 2001
From: moyu <moyuboy@gmail.com>
Date: Fri, 8 Mar 2019 15:44:49 +0800
Subject: [PATCH] fix: fix css variables not working on some components (#351)

---
 build/rollup/build-css-variables.js         |  4 ++--
 build/stylus-mixin.js                       |  4 ++--
 components/_style/mixin/theme.variable.styl |  1 -
 components/codebox/index.vue                | 16 ++++++++++++----
 components/tab-bar/index.vue                |  8 ++++++--
 5 files changed, 22 insertions(+), 11 deletions(-)

diff --git a/build/rollup/build-css-variables.js b/build/rollup/build-css-variables.js
index 628f2dfc..73d77a0e 100644
--- a/build/rollup/build-css-variables.js
+++ b/build/rollup/build-css-variables.js
@@ -47,7 +47,7 @@ function generateVariablesStyl(variables) {
   let stylContent = '/**\r\n  Automatically generated when running script \'build:variables\'\r\n  Do not edit or delete manually\r\n**/\r\n'
 
   for (const variable in variables) {
-    if (variables.hasOwnProperty(variable)) {
+    if (variables.hasOwnProperty(variable) && variable !== 'support-for-ie') {
       stylContent += `${variable} = var(--${variable})\n`
     }
   }
@@ -60,7 +60,7 @@ try {
   const variablesAll = {}
   files.forEach(file => {
     const variablesJson = getStyleJson(file)
-    
+
     if (!fs.existsSync(outputLibDir)) {
       fs.mkdirSync(outputLibDir)
     }
diff --git a/build/stylus-mixin.js b/build/stylus-mixin.js
index f3da0412..c13b4ceb 100644
--- a/build/stylus-mixin.js
+++ b/build/stylus-mixin.js
@@ -4,9 +4,9 @@ const isSpecial = process.env.BUILD_TYPE === 'special'
 module.exports = function useMixin(style) {
   if (process.env.BUILD_TYPE === 'variables') {
     return style
-    .import(path.join(__dirname, '../components/_style/mixin/theme.variable.styl'))
     .import(path.join(__dirname, '../components/_style/mixin/theme.components.styl'))
     .import(path.join(__dirname, '../components/_style/mixin/theme.basic.styl'))
+    .import(path.join(__dirname, '../components/_style/mixin/theme.variable.styl'))
     .import(path.join(__dirname, '../components/_style/mixin/util.styl'))
     .import(path.join(__dirname, '../node_modules/nib/lib/nib/vendor'))
     .import(path.join(__dirname, '../node_modules/nib/lib/nib/gradients'))
@@ -18,4 +18,4 @@ module.exports = function useMixin(style) {
     .import(path.join(__dirname, '../node_modules/nib/lib/nib/vendor'))
     .import(path.join(__dirname, '../node_modules/nib/lib/nib/gradients'))
   }
-}
\ No newline at end of file
+}
diff --git a/components/_style/mixin/theme.variable.styl b/components/_style/mixin/theme.variable.styl
index 97fda9db..68a39714 100644
--- a/components/_style/mixin/theme.variable.styl
+++ b/components/_style/mixin/theme.variable.styl
@@ -2,7 +2,6 @@
   Automatically generated when running script 'build:variables'
   Do not edit or delete manually
 **/
-support-for-ie = var(--support-for-ie)
 color-primary = var(--color-primary)
 color-text-base = var(--color-text-base)
 color-text-base-inverse = var(--color-text-base-inverse)
diff --git a/components/codebox/index.vue b/components/codebox/index.vue
index 429bdeec..7d1bfa28 100644
--- a/components/codebox/index.vue
+++ b/components/codebox/index.vue
@@ -13,7 +13,7 @@
           v-for="i in num"
           :key="i"
           :class="[
-            'md-codebox-box', 
+            'md-codebox-box',
             (i === code.length + 1) && focused && 'is-active',
             code.charAt(i-1) !== '' && 'is-filled'
           ]"
@@ -264,8 +264,13 @@ export default {
   font-size codebox-font-size
   font-weight normal
   line-height 1.2
-  margin-left (codebox-gutter / 2)
-  margin-right (codebox-gutter / 2)
+  if codebox-gutter is a 'unit'
+    margin-left (codebox-gutter / 2)
+    margin-right (codebox-gutter / 2)
+  else
+    margin-left "calc(%s / 2)" % codebox-gutter
+    margin-right "calc(%s / 2)" % codebox-gutter
+
   border-bottom codebox-border-width solid codebox-border-color
   &:first-child
     margin-left 0
@@ -276,7 +281,10 @@ export default {
 
 .md-codebox-blink
   display block
-  height (codebox-height * 0.8)
+  if tab-height is a 'unit'
+    height (codebox-height * 0.8)
+  else
+    height "calc(%s * 0.8)" % codebox-height
   width 2px
   background-color codebox-blink-color
   animation md-codebox-flash steps(2) 1s infinite
diff --git a/components/tab-bar/index.vue b/components/tab-bar/index.vue
index 877c3b19..c78c03d9 100644
--- a/components/tab-bar/index.vue
+++ b/components/tab-bar/index.vue
@@ -288,8 +288,12 @@ export default {
     left -14px
     top 50%
     width 14px
-    margin-top 0 - tab-height * 0.4
-    height tab-height * 0.8
+    if tab-height is a 'unit'
+      margin-top 0 - tab-height * 0.4
+      height tab-height * 0.8
+    else
+      margin-top "calc(0 - %s * 0.4)" % tab-height
+      height "calc(%s * 0.8)" % tab-height
     border-radius 50%
     box-shadow: -1px 0 12px 0 rgba(0,0,0,0.2)
 .md-tab-bar-end