typestyle-extensions
Version:
A useful collection of typestyle extensions and helper functions to make working with TypeStyle even more pleasant
62 lines • 3.35 kB
JavaScript
;
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 });
const typestyle_1 = require("typestyle");
const generateRandomClassNameBase_1 = __importDefault(require("./generateRandomClassNameBase"));
function generateNestedStyles($nest, parentSelector, classKeyClassNameMap, classKeys) {
Object.entries($nest).forEach(([currSelector, styles]) => {
if (styles) {
let replacedSelector = currSelector.replace(/&/gm, parentSelector);
classKeys.forEach((classKey) => {
const selector = `.${classKeyClassNameMap[classKey]}`;
replacedSelector = replacedSelector.replace(new RegExp(`\\$${classKey}`, 'gm'), selector);
});
const { $nest: $innerNest } = styles, rest = __rest(styles, ["$nest"]);
typestyle_1.cssRule(replacedSelector, rest);
if ($innerNest) {
generateNestedStyles($innerNest, replacedSelector, classKeyClassNameMap, classKeys);
}
}
});
}
function createStyles(styles, classNamePrefix = '', createNewSheet = false, useFriendlyNames = process.env.NODE_ENV !== 'production') {
const tag = createNewSheet ? document.createElement('style') : null;
if (tag)
document.head.appendChild(tag);
const instance = createNewSheet && tag ? typestyle_1.createTypeStyle(tag) : null;
const s = createNewSheet && instance ? instance.style : typestyle_1.style;
const seen = {};
const out = Object.entries(styles).reduce((prev, [classKey, classKeyStyles]) => {
const { $mediaQueries = [], $nest } = classKeyStyles, 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
const generatedClassName = s(Object.assign({}, rest, { $debugName: useFriendlyNames
? `${classNamePrefix}${classKey}`
: generateRandomClassNameBase_1.default(classNamePrefix) }), ...$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((a, b) => b.length - a.length));
}
return Object.assign(prev, {
[classKey]: generatedClassName,
});
}, {});
return out;
}
exports.default = createStyles;
//# sourceMappingURL=createStyles.js.map