Skip to content

Commit

Permalink
feat(rn): 编译后样式的单位采用 scalePx2dp 函数包裹以处理响应式
Browse files Browse the repository at this point in the history
  • Loading branch information
@Pines-Cheng
Pines-Cheng committed May 28, 2019
1 parent cff7916 commit 8ffbc31
Show file tree
Hide file tree
Showing 5 changed files with 124 additions and 41 deletions.
13 changes: 10 additions & 3 deletions packages/css-to-react-native/src/css-to-react-native/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,14 @@ export const transformRawValue = input => {
const value = input.trim();

const numberMatch = value.match(numberOrLengthRe);
if (numberMatch !== null) return Number(numberMatch[1]);
if (numberMatch !== null) {
const num = Number(numberMatch[1]);
if (/px/.test(value)) {
return `scalePx2dp(${num})`;
} else {
return num;
}
}

const boolMatch = input.match(boolRe);
if (boolMatch !== null) return boolMatch[0].toLowerCase() === "true";
Expand All @@ -30,7 +37,8 @@ export const transformRawValue = input => {
};

const baseTransformShorthandValue = (propName, inputValue) => {
const ast = parse(inputValue.trim().replace(/PX|Px|pX$/g, ""));
// const ast = parse(inputValue.trim().replace(/PX|Px|pX$/g, ""));
const ast = parse(inputValue);
const tokenStream = new TokenStream(ast.nodes);
return transforms[propName](tokenStream);
};
Expand All @@ -55,7 +63,6 @@ export const getStylesForProperty = (propName, inputValue, allowShorthand) => {
const propValue = isRawValue
? transformRawValue(inputValue)
: transformShorthandValue(propName, inputValue.trim());

return propValue && propValue.$merge
? propValue.$merge
: { [propName]: propValue };
Expand Down
9 changes: 6 additions & 3 deletions packages/css-to-react-native/src/css-to-react-native/tokenTypes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ const identRe = /(^-?[_a-z][_a-z0-9-]*$)/i;
// Note if these are wrong, you'll need to change index.js too
const numberRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)$/;
// Note lengthRe is sneaky: you can omit units for 0
const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)(?=px$))/;
const lengthRe = /^(0$|(?:[+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?)((?=px$)|(?=Px$)|(?=PX$)|(?=pX$)))/;
const unsupportedUnitRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(ch|em|ex|rem|vh|vw|vmin|vmax|cm|mm|in|pc|pt))$/;
const angleRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?(?:deg|rad))$/;
const percentRe = /^([+-]?(?:\d*\.)?\d+(?:[Ee][+-]?\d+)?%)$/;
Expand All @@ -50,8 +50,11 @@ export const regExpToken = (regExp, transform = String) => node => {
if (match === null) return null;

const value = transform(match[1]);

return value;
if (/px/.test(node.value)) {
return `scalePx2dp(${value})`;
} else {
return value;
}
};

export const tokens = {
Expand Down
121 changes: 88 additions & 33 deletions packages/css-to-react-native/src/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,22 @@ describe("misc", () => {
expect(transform(``)).toEqual({});
});

it("transforms flex", () => {
expect(
transform(`
.test {
flex: 1;
}
`),
).toEqual({
test: {
flexBasis: 0,
flexGrow: 1,
flexShrink: 1,
},
});
});

it("transforms numbers", () => {
expect(
transform(`
Expand Down Expand Up @@ -41,7 +57,7 @@ describe("misc", () => {
}
`),
).toEqual({
test: { top: 0 },
test: { top: "scalePx2dp(0)" },
});
});

Expand All @@ -65,7 +81,7 @@ describe("misc", () => {
}
`),
).toEqual({
test: { marginTop: 0.5 },
test: { marginTop: "scalePx2dp(0.5)" },
});
expect(
transform(`
Expand All @@ -74,7 +90,7 @@ describe("misc", () => {
}
`),
).toEqual({
test: { marginTop: 100.5 },
test: { marginTop: "scalePx2dp(100.5)" },
});
expect(
transform(`
Expand All @@ -83,7 +99,7 @@ describe("misc", () => {
}
`),
).toEqual({
test: { marginTop: -0.5 },
test: { marginTop: "scalePx2dp(-0.5)" },
});
expect(
transform(`
Expand All @@ -92,7 +108,7 @@ describe("misc", () => {
}
`),
).toEqual({
test: { marginTop: -100.5 },
test: { marginTop: "scalePx2dp(-100.5)" },
});
expect(
transform(`
Expand All @@ -101,7 +117,7 @@ describe("misc", () => {
}
`),
).toEqual({
test: { marginTop: 0.5 },
test: { marginTop: "scalePx2dp(0.5)" },
});
expect(
transform(`
Expand All @@ -110,24 +126,50 @@ describe("misc", () => {
}
`),
).toEqual({
test: { marginTop: -0.5 },
test: { marginTop: "scalePx2dp(-0.5)" },
});
});

it("allows PX or PX values", () => {
expect(
transform(`
.test {
top: 1PX;
top: 1Px;
margin: 10Px 30px;
}
`),
).toEqual({
test: {
marginBottom: 10,
marginLeft: "scalePx2dp(30)",
marginRight: "scalePx2dp(30)",
marginTop: 10,
top: 1,
},
});
});

it("allows PX or PX values scalePx2dp", () => {
expect(
transform(`
.test {
top: 10Px;
left:10px;
margin: 10Px 30px;
}
`),
).toEqual({
test: {
left: "scalePx2dp(10)",
marginBottom: 10,
marginLeft: "scalePx2dp(30)",
marginRight: "scalePx2dp(30)",
marginTop: 10,
top: 10,
},
});
});

it("allows decimal values in transformed values", () => {
expect(
transform(`
Expand All @@ -137,7 +179,7 @@ describe("misc", () => {
`),
).toEqual({
test: {
borderRadius: 1.5,
borderRadius: "scalePx2dp(1.5)",
},
});
});
Expand All @@ -151,7 +193,7 @@ describe("misc", () => {
`),
).toEqual({
test: {
borderRadius: -1.5,
borderRadius: "scalePx2dp(-1.5)",
},
});
});
Expand Down Expand Up @@ -196,9 +238,9 @@ describe("misc", () => {
`),
).toEqual({
test: {
marginTop: 10,
marginTop: "scalePx2dp(10)",
marginRight: 0,
marginBottom: 10,
marginBottom: "scalePx2dp(10)",
marginLeft: 0,
},
});
Expand Down Expand Up @@ -226,7 +268,12 @@ describe("misc", () => {
}
`),
).toEqual({
test: { shadowOffset: { width: 10, height: 5 } },
test: {
shadowOffset: {
height: "scalePx2dp(5)",
width: "scalePx2dp(10)",
},
},
});
});

Expand All @@ -238,7 +285,12 @@ describe("misc", () => {
}
`),
).toEqual({
test: { textShadowOffset: { width: 10, height: 5 } },
test: {
textShadowOffset: {
height: "scalePx2dp(5)",
width: "scalePx2dp(10)",
},
},
});
});

Expand All @@ -262,25 +314,28 @@ describe("misc", () => {
`),
).toEqual({
description: {
marginBottom: 20,
fontSize: 18,
fontSize: "scalePx2dp(18)",
marginBottom: "scalePx2dp(20)",
textAlign: "center",
color: "#656656",
shadowColor: "#fff",
shadowOffset: { height: 20, width: 10 },
shadowRadius: 30,
shadowOffset: {
height: "scalePx2dp(20)",
width: "scalePx2dp(10)",
},
shadowRadius: "scalePx2dp(30)",
shadowOpacity: 1,
},
container: {
paddingBottom: 30,
paddingLeft: 30,
paddingRight: 30,
paddingTop: 30,
marginTop: 65,
paddingBottom: "scalePx2dp(30)",
paddingLeft: "scalePx2dp(30)",
paddingRight: "scalePx2dp(30)",
paddingTop: "scalePx2dp(30)",
marginTop: "scalePx2dp(65)",
alignItems: "center",
borderColor: "#f00",
borderStyle: "dashed",
borderWidth: 2,
borderWidth: "scalePx2dp(2)",
},
});
});
Expand Down Expand Up @@ -311,15 +366,15 @@ describe("misc", () => {
).toEqual({
test: {
backgroundColor: "#f00",
paddingBottom: 10,
paddingLeft: 10,
paddingRight: 10,
paddingTop: 10,
fontSize: 20,
marginBottom: 5,
marginLeft: 5,
marginRight: 5,
marginTop: 5,
fontSize: "scalePx2dp(20)",
marginBottom: "scalePx2dp(5)",
marginLeft: "scalePx2dp(5)",
marginRight: "scalePx2dp(5)",
marginTop: "scalePx2dp(5)",
paddingBottom: "scalePx2dp(10)",
paddingLeft: "scalePx2dp(10)",
paddingRight: "scalePx2dp(10)",
paddingTop: "scalePx2dp(10)",
},
});
});
Expand Down
20 changes: 19 additions & 1 deletion packages/taro-cli/src/rn/styleProcess.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,24 @@ import * as stylelintConfig from '../config/rn-stylelint.json'

const DEVICE_RATIO = 'deviceRatio'

function getWrapedCSS (css) {
return (`
import { StyleSheet, Dimensions } from 'react-native'
// 一般app 只有竖屏模式，所以可以只获取一次 width
const deviceWidthDp = Dimensions.get('window').width
// UI 默认给图是 750
const uiWidthPx = 750
function scalePx2dp (uiElementPx) {
return uiElementPx * deviceWidthDp / uiWidthPx
}
export default StyleSheet.create(${css})
`)
}


/**
* @description 读取 css/scss/less 文件，预处理后，返回 css string
* @param {string} filePath
Expand Down Expand Up @@ -108,7 +126,7 @@ function validateStyle({styleObject, filePath}) {
}

function writeStyleFile({css, tempFilePath}) {
const fileContent = `import { StyleSheet } from 'react-native'\n\nexport default StyleSheet.create(${css})`
const fileContent = getWrapedCSS(css.replace(/"(scalePx2dp\(\d+\))"/g, '$1'))
fs.ensureDirSync(path.dirname(tempFilePath))
fs.writeFileSync(tempFilePath, fileContent)
Util.printLog(processTypeEnum.GENERATE, '生成样式文件', tempFilePath)
Expand Down
2 changes: 1 addition & 1 deletion packages/taro-components-rn/src/components/Image/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ class _Image extends React.Component<ImageProps, ImageState> {

const flattenStyle = StyleSheet.flatten(style) || {}

// The parameter passed to require must be a string literal
// The parameter passed to require mpxTransformust be a string literal
const source: ImageSourcePropType = typeof src === 'string' ? { uri: src } : src

const isWidthFix = mode === 'widthFix'
Expand Down

1 comment on commit 8ffbc31

@PangYiMing
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

您好，请问一下，这个问题为什么依然存在？

Please sign in to comment.