78 lines
2.9 KiB
JavaScript
78 lines
2.9 KiB
JavaScript
const fs = require('fs');
|
|
const { relative } = require('path');
|
|
const { assert } = require('console');
|
|
const t = require('@babel/types');
|
|
const generate = require('@babel/generator').default;
|
|
const parser = require("@babel/parser");
|
|
|
|
const defaultOptions = {
|
|
baseDpr: 2, // base device pixel ratio (default: 2)
|
|
rpxUnit: 750, // rpx unit value (default: 750)
|
|
rpxPrecision: 6, // rpx value precision (default: 6)
|
|
forceRpxComment: 'rpx', // force px comment (default: `rpx`)
|
|
keepComment: 'no', // no transform value comment (default: `no`)
|
|
};
|
|
|
|
const rpxRegExp = /\b(\d+(\.\d+)?)rpx\b/;
|
|
|
|
module.exports = (babel) => {
|
|
return {
|
|
visitor: {
|
|
JSXAttribute(path, state) {
|
|
const { cwd, filename } = state;
|
|
if (
|
|
path.node &&
|
|
t.isJSXIdentifier(path.node.name) &&
|
|
path.node.name.name === 'style'
|
|
) {
|
|
const properties =
|
|
path.node.value &&
|
|
path.node.value.expression &&
|
|
path.node.value.expression.properties;
|
|
|
|
if (properties) {
|
|
properties.forEach((node2, index) => {
|
|
const { key, value } = node2;
|
|
const code = generate(value);
|
|
|
|
function getValue(val) {
|
|
return val == 0
|
|
? val
|
|
: `calc(100vw / ${defaultOptions.rpxUnit} * ${val})`;
|
|
}
|
|
|
|
const rpxGlobalRegExp = new RegExp(
|
|
rpxRegExp.source,
|
|
'g'
|
|
);
|
|
let codeStr = code.code;
|
|
if (rpxGlobalRegExp.test(codeStr)) {
|
|
codeStr = codeStr.replace(
|
|
rpxGlobalRegExp,
|
|
function ($0, $1) {
|
|
return getValue($1);
|
|
}
|
|
);
|
|
|
|
const ast2 = parser.parse(
|
|
"30px",
|
|
{
|
|
sourceType: 'module',
|
|
plugins: ['jsx'],
|
|
}
|
|
);
|
|
|
|
properties.splice(
|
|
index,
|
|
1,
|
|
t.objectProperty(key, value)
|
|
);
|
|
}
|
|
});
|
|
}
|
|
}
|
|
},
|
|
},
|
|
};
|
|
};
|