babel-plugin-styled-components-px2rem
Version:
Babel plugin for convert px to rem units of styled-components
189 lines • 7.25 kB
JavaScript
;
var __spreadArrays = (this && this.__spreadArrays) || function () {
for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
for (var r = Array(s), k = 0, i = 0; i < il; i++)
for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
r[k] = a[j];
return r;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var helper_plugin_utils_1 = require("@babel/helper-plugin-utils");
var types_1 = require("@babel/types");
var configuration_1 = __importDefault(require("./configuration"));
var replace_1 = require("./replace");
var createPx2rem_1 = __importDefault(require("./createPx2rem"));
var _px2rem;
var _used = false;
function isStyledTagged(tagged) {
var tag = tagged.tag;
if (types_1.isIdentifier(tag)) {
return isStyled(tag);
}
else if (types_1.isMemberExpression(tag)) {
return isStyledMember(tag);
}
else if (types_1.isCallExpression(tag)) {
return isStyledFunction(tag);
}
return false;
}
function isStyledMember(member) {
if (types_1.isIdentifier(member.object)) {
return isStyled(member.object);
}
else if (types_1.isMemberExpression(member.object)) {
return isStyledMember(member.object);
}
return false;
}
function isStyledFunction(call) {
var callee = call.callee;
if (types_1.isMemberExpression(callee)) {
return isStyledMember(callee);
}
else if (types_1.isIdentifier(callee)) {
return isStyled(callee);
}
else if (types_1.isCallExpression(callee)) {
return isStyledFunction(callee);
}
return false;
}
function isStyled(id) {
return configuration_1.default.config.tags.indexOf(id.name) >= 0;
}
function isPureExpression(node) {
return (types_1.isIdentifier(node) ||
types_1.isCallExpression(node) ||
types_1.isOptionalCallExpression(node) ||
types_1.isBinaryExpression(node) ||
types_1.isStringLiteral(node) ||
types_1.isNumericLiteral(node) ||
types_1.isMemberExpression(node) ||
types_1.isOptionalMemberExpression(node) ||
types_1.isLogicalExpression(node));
}
function createCallPx2rem(px2rem) {
var expressions = [];
for (var _i = 1; _i < arguments.length; _i++) {
expressions[_i - 1] = arguments[_i];
}
_used = true;
return types_1.callExpression(px2rem, expressions);
}
function transformTemplateExpression(expression, px2rem) {
if (types_1.isArrowFunctionExpression(expression)) {
if (types_1.isBlock(expression.body)) {
expression.body = createCallPx2rem(px2rem, types_1.arrowFunctionExpression([], expression.body));
}
else if (isPureExpression(expression.body)) {
expression.body = createCallPx2rem(px2rem, expression.body);
}
else {
expression.body = transformTemplateExpression(expression.body, px2rem);
}
}
else if (types_1.isConditionalExpression(expression)) {
expression.alternate = transformTemplateExpression(expression.alternate, px2rem);
expression.consequent = transformTemplateExpression(expression.consequent, px2rem);
}
else if (types_1.isFunctionExpression(expression)) {
return types_1.arrowFunctionExpression([types_1.restElement(types_1.identifier('args'))], createCallPx2rem(px2rem, expression, types_1.spreadElement(types_1.identifier('args'))));
}
else {
return createCallPx2rem(px2rem, expression);
}
return expression;
}
function transform(template) {
var _a, _b;
if (_px2rem) {
var expressions = __spreadArrays(template.expressions, template.quasis);
expressions.sort(function (it1, it2) { return (it1.start || 0) - (it2.start || 0); });
var _loop_1 = function (i) {
var expression = expressions[i];
if (types_1.isTemplateElement(expression))
return "continue";
var next = expressions[i + 1];
if (next && types_1.isTemplateElement(next)) {
var text = ((_a = next.value) === null || _a === void 0 ? void 0 : _a.raw) || ((_b = next.value) === null || _b === void 0 ? void 0 : _b.cooked);
if (text && /^px/.test(text)) {
var idx = template.expressions.findIndex(function (it) { return it === expression; });
if (idx !== -1) {
template.expressions[idx] = transformTemplateExpression(expression, _px2rem);
if (next.value && next.value.raw) {
next.value.raw = next.value.raw.replace(/^px/, '');
}
if (next.value && next.value.cooked) {
next.value.cooked = next.value.cooked.replace(/^px/, '');
}
}
}
}
};
for (var i = 0; i < expressions.length; i++) {
_loop_1(i);
}
}
}
exports.default = helper_plugin_utils_1.declare(function (api, options) {
api.assertVersion(7);
configuration_1.default.updateConfig(options);
var templateVisitor = {
TemplateElement: function (path) {
var it = path.node;
if (it.value && it.value.raw) {
it.value.raw = replace_1.replace(it.value.raw);
}
if (it.value && it.value.cooked) {
it.value.cooked = replace_1.replace(it.value.cooked);
}
},
StringLiteral: function (path) {
path.node.value = replace_1.replace(path.node.value);
},
};
if (configuration_1.default.config.transformRuntime) {
templateVisitor.TemplateLiteral = function (path) {
transform(path.node);
};
}
var visitor = {
Program: {
exit: function (programPath) {
if (_used && _px2rem) {
programPath.node.body.push(createPx2rem_1.default(_px2rem, configuration_1.default.config));
}
},
enter: function (programPath) {
if (configuration_1.default.config.transformRuntime) {
_px2rem = programPath.scope.generateUidIdentifier('px2rem');
}
else {
_px2rem = undefined;
}
_used = false;
programPath.traverse({
TaggedTemplateExpression: function (path) {
if (isStyledTagged(path.node)) {
path.traverse(templateVisitor);
}
},
CallExpression: function (path) {
if (isStyledFunction(path.node)) {
path.traverse(templateVisitor);
}
},
});
},
},
};
return {
name: 'styled-components-px2rem',
visitor: visitor,
};
});
//# sourceMappingURL=index.js.map