[d565449] | 1 | 'use strict';
|
---|
| 2 |
|
---|
| 3 | var KEBAB_REGEX = /[A-Z]/g;
|
---|
| 4 |
|
---|
| 5 | var hash = function (str) {
|
---|
| 6 | var h = 5381, i = str.length;
|
---|
| 7 |
|
---|
| 8 | while (i) h = (h * 33) ^ str.charCodeAt(--i);
|
---|
| 9 |
|
---|
| 10 | return '_' + (h >>> 0).toString(36);
|
---|
| 11 | };
|
---|
| 12 |
|
---|
| 13 | exports.create = function (config) {
|
---|
| 14 | config = config || {};
|
---|
| 15 | var assign = config.assign || Object.assign;
|
---|
| 16 | var client = typeof window === 'object';
|
---|
| 17 |
|
---|
| 18 | // Check if we are really in browser environment.
|
---|
| 19 | if (process.env.NODE_ENV !== 'production') {
|
---|
| 20 | if (client) {
|
---|
| 21 | if ((typeof document !== 'object') || !document.getElementsByTagName('HTML')) {
|
---|
| 22 | console.error(
|
---|
| 23 | 'nano-css detected browser environment because of "window" global, but ' +
|
---|
| 24 | '"document" global seems to be defective.'
|
---|
| 25 | );
|
---|
| 26 | }
|
---|
| 27 | }
|
---|
| 28 | }
|
---|
| 29 |
|
---|
| 30 | var renderer = assign({
|
---|
| 31 | raw: '',
|
---|
| 32 | pfx: '_',
|
---|
| 33 | client: client,
|
---|
| 34 | assign: assign,
|
---|
| 35 | stringify: JSON.stringify,
|
---|
| 36 | kebab: function (prop) {
|
---|
| 37 | return prop.replace(KEBAB_REGEX, '-$&').toLowerCase();
|
---|
| 38 | },
|
---|
| 39 | decl: function (key, value) {
|
---|
| 40 | key = renderer.kebab(key);
|
---|
| 41 | return key + ':' + value + ';';
|
---|
| 42 | },
|
---|
| 43 | hash: function (obj) {
|
---|
| 44 | return hash(renderer.stringify(obj));
|
---|
| 45 | },
|
---|
| 46 | selector: function (parent, selector) {
|
---|
| 47 | return parent + (selector[0] === ':' ? '' : ' ') + selector;
|
---|
| 48 | },
|
---|
| 49 | putRaw: function (rawCssRule) {
|
---|
| 50 | renderer.raw += rawCssRule;
|
---|
| 51 | }
|
---|
| 52 | }, config);
|
---|
| 53 |
|
---|
| 54 | if (renderer.client) {
|
---|
| 55 | if (!renderer.sh)
|
---|
| 56 | document.head.appendChild(renderer.sh = document.createElement('style'));
|
---|
| 57 |
|
---|
| 58 | if (process.env.NODE_ENV !== 'production') {
|
---|
| 59 | renderer.sh.setAttribute('data-nano-css-dev', '');
|
---|
| 60 |
|
---|
| 61 | // Test style sheet used in DEV mode to test if .insetRule() would throw.
|
---|
| 62 | renderer.shTest = document.createElement('style');
|
---|
| 63 | renderer.shTest.setAttribute('data-nano-css-dev-tests', '');
|
---|
| 64 | document.head.appendChild(renderer.shTest);
|
---|
| 65 | }
|
---|
| 66 |
|
---|
| 67 | renderer.putRaw = function (rawCssRule) {
|
---|
| 68 | // .insertRule() is faster than .appendChild(), that's why we use it in PROD.
|
---|
| 69 | // But CSS injected using .insertRule() is not displayed in Chrome Devtools,
|
---|
| 70 | // that's why we use .appendChild in DEV.
|
---|
| 71 | if (process.env.NODE_ENV === 'production') {
|
---|
| 72 | var sheet = renderer.sh.sheet;
|
---|
| 73 |
|
---|
| 74 | // Unknown pseudo-selectors will throw, this try/catch swallows all errors.
|
---|
| 75 | try {
|
---|
| 76 | sheet.insertRule(rawCssRule, sheet.cssRules.length);
|
---|
| 77 | // eslint-disable-next-line no-empty
|
---|
| 78 | } catch (error) {}
|
---|
| 79 | } else {
|
---|
| 80 | // Test if .insertRule() works in dev mode. Unknown pseudo-selectors will throw when
|
---|
| 81 | // .insertRule() is used, but .appendChild() will not throw.
|
---|
| 82 | try {
|
---|
| 83 | renderer.shTest.sheet.insertRule(rawCssRule, renderer.shTest.sheet.cssRules.length);
|
---|
| 84 | } catch (error) {
|
---|
| 85 | if (config.verbose) {
|
---|
| 86 | console.error(error);
|
---|
| 87 | }
|
---|
| 88 | }
|
---|
| 89 |
|
---|
| 90 | // Insert pretty-printed CSS for dev mode.
|
---|
| 91 | renderer.sh.appendChild(document.createTextNode(rawCssRule));
|
---|
| 92 | }
|
---|
| 93 | };
|
---|
| 94 | }
|
---|
| 95 |
|
---|
| 96 | renderer.put = function (selector, decls, atrule) {
|
---|
| 97 | var str = '';
|
---|
| 98 | var prop, value;
|
---|
| 99 | var postponed = [];
|
---|
| 100 |
|
---|
| 101 | for (prop in decls) {
|
---|
| 102 | value = decls[prop];
|
---|
| 103 |
|
---|
| 104 | if ((value instanceof Object) && !(value instanceof Array)) {
|
---|
| 105 | postponed.push(prop);
|
---|
| 106 | } else {
|
---|
| 107 | if ((process.env.NODE_ENV !== 'production') && !renderer.sourcemaps) {
|
---|
| 108 | str += ' ' + renderer.decl(prop, value, selector, atrule) + '\n';
|
---|
| 109 | } else {
|
---|
| 110 | str += renderer.decl(prop, value, selector, atrule);
|
---|
| 111 | }
|
---|
| 112 | }
|
---|
| 113 | }
|
---|
| 114 |
|
---|
| 115 | if (str) {
|
---|
| 116 | if ((process.env.NODE_ENV !== 'production') && !renderer.sourcemaps) {
|
---|
| 117 | str = '\n' + selector + ' {\n' + str + '}\n';
|
---|
| 118 | } else {
|
---|
| 119 | str = selector + '{' + str + '}';
|
---|
| 120 | }
|
---|
| 121 | renderer.putRaw(atrule ? atrule + '{' + str + '}' : str);
|
---|
| 122 | }
|
---|
| 123 |
|
---|
| 124 | for (var i = 0; i < postponed.length; i++) {
|
---|
| 125 | prop = postponed[i];
|
---|
| 126 |
|
---|
| 127 | if (prop[0] === '@' && prop !== '@font-face') {
|
---|
| 128 | renderer.putAt(selector, decls[prop], prop);
|
---|
| 129 | } else {
|
---|
| 130 | renderer.put(renderer.selector(selector, prop), decls[prop], atrule);
|
---|
| 131 | }
|
---|
| 132 | }
|
---|
| 133 | };
|
---|
| 134 |
|
---|
| 135 | renderer.putAt = renderer.put;
|
---|
| 136 |
|
---|
| 137 | return renderer;
|
---|
| 138 | };
|
---|