pxtorem-stylis-plugin
Version:
Fork of stylis-pxtorem, can be use with styled-components 6.x+
137 lines • 5.39 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.usePxtoremStylisPlugin = void 0;
var stylis_1 = require("stylis");
var pixel_unit_regex_1 = __importDefault(require("./utils/pixel-unit-regex"));
var filter_prop_list_1 = __importDefault(require("./utils/filter-prop-list"));
var defaults = {
rootValue: 16,
unitPrecision: 5,
selectorBlackList: [],
propList: ["font", "font-size", "line-height", "letter-spacing"],
replace: true,
// mediaQuery: false,
minPixelValue: 0,
};
function usePxtoremStylisPlugin(options) {
var opts = Object.assign({}, defaults, options);
var pxReplace = createPxReplace(opts.rootValue, opts.unitPrecision, opts.minPixelValue);
var satisfyPropList = createPropListMatcher(opts.propList);
function pxtoremStylisPlugin(element, index, children, callback) {
var _a;
switch (element.type) {
case stylis_1.DECLARATION: {
// This should be the fastest test and will remove most declarations
if (element.value.indexOf("px") === -1) {
return;
}
// let property = content.match(/(.*):.*/)[1]; //
if (!satisfyPropList(element.props)) {
return;
}
if (blacklistedSelector(opts.selectorBlackList, [(_a = element.parent) === null || _a === void 0 ? void 0 : _a.value]))
return;
element.return = opts.replace
? element.value.replace(pixel_unit_regex_1.default, pxReplace)
: element.value + element.value.replace(pixel_unit_regex_1.default, pxReplace);
break;
}
// case MEDIA: {
// if (!opts.mediaQuery) return;
// if (element.value.indexOf("px") === -1) return;
// return serialize(
// [
// // @ts-ignore
// copy(element, {
// // @ts-ignore
// value: replace(element.value, /@media.*/g, function _(mq: string) {
// return mq.replace(pxRegex, pxReplace);
// }),
// }),
// ],
// callback
// );
// }
}
}
;
Object.defineProperty(pxtoremStylisPlugin, "name", {
value: "pxtoremStylisPlugin",
});
return pxtoremStylisPlugin;
}
exports.usePxtoremStylisPlugin = usePxtoremStylisPlugin;
function createPxReplace(rootValue, unitPrecision, minPixelValue) {
return function (m, $1) {
if (!$1) {
return m;
}
var pixels = parseFloat($1);
if (pixels < minPixelValue) {
return m;
}
var fixedVal = toFixed(pixels / rootValue, unitPrecision);
return fixedVal === 0 ? "0" : fixedVal + "rem";
};
}
function toFixed(number, precision) {
var multiplier = Math.pow(10, precision + 1), wholeNumber = Math.floor(number * multiplier);
return (Math.round(wholeNumber / 10) * 10) / multiplier;
}
function blacklistedSelector(blacklist, selectors) {
return selectors.some(function (selector) {
if (typeof selector !== "string") {
return false;
}
return blacklist.some(function (regex) {
if (typeof regex === "string") {
return selector.indexOf(regex) !== -1;
}
return selector.match(regex);
});
});
}
function createPropListMatcher(propList) {
var hasWild = propList.indexOf("*") > -1;
var matchAll = hasWild && propList.length === 1;
var lists = {
exact: filter_prop_list_1.default.exact(propList),
contain: filter_prop_list_1.default.contain(propList),
startWith: filter_prop_list_1.default.startWith(propList),
endWith: filter_prop_list_1.default.endWith(propList),
notExact: filter_prop_list_1.default.notExact(propList),
notContain: filter_prop_list_1.default.notContain(propList),
notStartWith: filter_prop_list_1.default.notStartWith(propList),
notEndWith: filter_prop_list_1.default.notEndWith(propList),
};
return function (prop) {
if (matchAll) {
return true;
}
return ((hasWild ||
lists.exact.indexOf(prop) > -1 ||
lists.contain.some(function (m) {
return prop.indexOf(m) > -1;
}) ||
lists.startWith.some(function (m) {
return prop.indexOf(m) === 0;
}) ||
lists.endWith.some(function (m) {
return prop.indexOf(m) === prop.length - m.length;
})) &&
!(lists.notExact.indexOf(prop) > -1 ||
lists.notContain.some(function (m) {
return prop.indexOf(m) > -1;
}) ||
lists.notStartWith.some(function (m) {
return prop.indexOf(m) === 0;
}) ||
lists.notEndWith.some(function (m) {
return prop.indexOf(m) === prop.length - m.length;
})));
};
}
//# sourceMappingURL=stylis-pxtorem.js.map