perf: use custom properties to pass values to JS

uikit · Sep 21, 2018 · e001424 · e001424
1 parent b14374d
commit e001424
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 20 deletions.
diff --git a/docs/components/leader.md b/docs/components/leader.md
@@ -41,7 +41,8 @@ To change the dot to any custom character, just add the `fill: STRING` option to
 **Note** The default fill character can be set through CSS or a LESS variable.
 
 ```css
-.var-leader-fill:before { content: '.'; }
+.uk-leader-fill-content::before { content: '.'; }
+:root { --uk-leader-fill-content: '.'; }
 ```
 
 ```less

diff --git a/src/js/core/leader.js b/src/js/core/leader.js
@@ -21,7 +21,7 @@ export default {
     computed: {
 
         fill({fill}) {
-            return fill || getCssVar('leader-fill');
+            return fill || getCssVar('leader-fill-content');
         }
 
     },

diff --git a/src/js/util/style.js b/src/js/util/style.js
@@ -1,4 +1,5 @@
-import {append} from './dom';
+import {isIE} from './env';
+import {append, remove} from './dom';
 import {addClass} from './class';
 import {each, hyphenate, isArray, isNumeric, isObject, isString, isUndefined, toNode, toNodes} from './lang';
 
@@ -66,22 +67,23 @@ const vars = {};
 
 export function getCssVar(name) {
 
-    if (!(name in vars)) {
+    const docEl = document.documentElement;
 
-        /* usage in css: .var-name:before { content:"xyz" } */
+    if (!isIE) {
+        return getStyles(docEl).getPropertyValue(`--uk-${name}`);
+    }
 
-        const element = append(document.documentElement, document.createElement('div'));
+    if (!(name in vars)) {
 
-        addClass(element, `var-${name}`);
+        /* usage in css: .uk-name:before { content:"xyz" } */
 
-        try {
+        const element = append(docEl, document.createElement('div'));
 
-            vars[name] = getStyle(element, 'content', ':before').replace(/^["'](.*)["']$/, '$1');
-            vars[name] = JSON.parse(vars[name]);
+        addClass(element, `uk-${name}`);
 
-        } catch (e) {}
+        vars[name] = getStyle(element, 'content', ':before').replace(/^["'](.*)["']$/, '$1');
 
-        document.documentElement.removeChild(element);
+        remove(element);
 
     }
 

diff --git a/src/less/components/base.less b/src/less/components/base.less
@@ -560,11 +560,17 @@ template { display: none; }
  * Breakpoints
  */
 
-.var-media-s::before  { content: '@{breakpoint-small}'; }
-.var-media-m::before  { content: '@{breakpoint-medium}'; }
-.var-media-l::before  { content: '@{breakpoint-large}'; }
-.var-media-xl::before { content: '@{breakpoint-xlarge}'; }
-
+.uk-breakpoint-s::before  { content: '@{breakpoint-small}'; }
+.uk-breakpoint-m::before  { content: '@{breakpoint-medium}'; }
+.uk-breakpoint-l::before  { content: '@{breakpoint-large}'; }
+.uk-breakpoint-xl::before { content: '@{breakpoint-xlarge}'; }
+
+:root {
+    --uk-breakpoint-s: @breakpoint-small;
+    --uk-breakpoint-m: @breakpoint-medium;
+    --uk-breakpoint-l: @breakpoint-large;
+    --uk-breakpoint-xl: @breakpoint-xlarge;
+}
 
 // Hooks
 // ========================================================================

diff --git a/src/less/components/leader.less b/src/less/components/leader.less
@@ -9,7 +9,7 @@
 // Variables
 // ========================================================================
 
-@leader-fill-content:                           '.';
+@leader-fill-content:                           ~'.';
 @leader-fill-margin-left:                       @global-small-gutter;
 
 
@@ -45,8 +45,12 @@
 
 .uk-leader-fill.uk-leader-hide::after { display: none; }
 
-/* Pass fill character to JS */
-.var-leader-fill::before { content: @leader-fill-content; }
+/*
+ * Pass fill character to JS
+ */
+
+.uk-leader-fill-content::before { content: '@{leader-fill-content}'; }
+:root { --uk-leader-fill-content: @leader-fill-content; }
 
 
 // Hooks