typestyle-extensions
Version:
A useful collection of typestyle extensions and helper functions to make working with TypeStyle even more pleasant
79 lines • 4.1 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var typestyle_1 = require("typestyle");
var generateRandomClassNameBase_1 = __importDefault(require("./generateRandomClassNameBase"));
function generateNestedStyles($nest, parentSelector, classKeyClassNameMap, classKeys) {
Object.entries($nest).forEach(function (_a) {
var currSelector = _a[0], styles = _a[1];
if (styles) {
var replacedSelector_1 = currSelector.replace(/&/gm, parentSelector);
classKeys.forEach(function (classKey) {
var selector = "." + classKeyClassNameMap[classKey];
replacedSelector_1 = replacedSelector_1.replace(new RegExp("\\$" + classKey, 'gm'), selector);
});
var $innerNest = styles.$nest, rest = __rest(styles, ["$nest"]);
typestyle_1.cssRule(replacedSelector_1, rest);
if ($innerNest) {
generateNestedStyles($innerNest, replacedSelector_1, classKeyClassNameMap, classKeys);
}
}
});
}
function createStyles(styles, classNamePrefix, createNewSheet, useFriendlyNames) {
if (classNamePrefix === void 0) { classNamePrefix = ''; }
if (createNewSheet === void 0) { createNewSheet = false; }
if (useFriendlyNames === void 0) { useFriendlyNames = process.env.NODE_ENV !== 'production'; }
var tag = createNewSheet ? document.createElement('style') : null;
if (tag)
document.head.appendChild(tag);
var instance = createNewSheet && tag ? typestyle_1.createTypeStyle(tag) : null;
var s = createNewSheet && instance ? instance.style : typestyle_1.style;
var seen = {};
var out = Object.entries(styles).reduce(function (prev, _a) {
var _b;
var classKey = _a[0], classKeyStyles = _a[1];
var _c = classKeyStyles.$mediaQueries, $mediaQueries = _c === void 0 ? [] : _c, $nest = classKeyStyles.$nest, rest = __rest(classKeyStyles, ["$mediaQueries", "$nest"]);
// While this is less optimal that letting TypeStyle figure out which styles it can duplicate
// it results in many fewer styling issues that are non obvious because of rule sharing among parent selectors
var generatedClassName = s.apply(void 0, [__assign({}, rest, { $debugName: useFriendlyNames
? "" + classNamePrefix + classKey
: generateRandomClassNameBase_1.default(classNamePrefix) })].concat($mediaQueries));
seen[classKey] = generatedClassName;
// Send in the current accumulated classKeys array, sorted by length in descending order.
// This will prevent errors from occuring by premature matching of subset classkeys
if ($nest) {
generateNestedStyles($nest, "." + generatedClassName, seen, Object.keys(seen).sort(function (a, b) { return b.length - a.length; }));
}
return Object.assign(prev, (_b = {},
_b[classKey] = generatedClassName,
_b));
}, {});
return out;
}
exports.default = createStyles;
//# sourceMappingURL=createStyles.js.map