Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(rn): 增加css中对百分比单位的支持 #17314

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+88 −48
Open

feat(rn): 增加css中对百分比单位的支持 #17314

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5241bcf
feat(rn): 增加css中对百分比单位的支持
yinone Feb 13, 2025
54af689
Merge branch 'main' into main
yinone Feb 27, 2025
02a61a2
Merge branch 'main' into main
yinone Feb 28, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
111 changes: 77 additions & 34 deletions packages/css-to-react-native/__tests__/index.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,52 @@
import transform from '../src/index'
import transform from '../src'

describe('misc', () => {
it('returns empty object when input is empty', () => {
expect(transform('')).toEqual({})
})

it('transform percent', () => {
expect(
transform(`
.test {
transform: translateY(100%) translateX(100%);
}
`)
).toEqual({
test: {
transform: [{ translateX: '100%' }, { translateY: '100%' }]
}
})
})

it('transform percent translateY', () => {
expect(
transform(`
.test {
transform: translateY(100%);
}
`)
).toEqual({
test: {
transform: [{ translateY: '100%' }]
}
})
})

it('transform percent translateX', () => {
expect(
transform(`
.test {
transform: translateX(100%);
}
`)
).toEqual({
test: {
transform: [{ translateX: '100%' }]
}
})
})

it('transforms flex', () => {
expect(
transform(`
Expand Down Expand Up @@ -1052,7 +1094,8 @@ describe('border', () => {

it('should transform border-color with rgb(a) property', () => {
expect(
transform(`
transform(
`
.top {
border-color: rgba(65, 131, 196, 0.2);
}
Expand All @@ -1065,7 +1108,9 @@ describe('border', () => {
.left {
border-color: rgb(65, 131, 196);
}
`, { scalable: false })
`,
{ scalable: false }
)
).toEqual({
top: {
borderColor: 'rgba(65, 131, 196, 0.2)'
Expand Down Expand Up @@ -1384,7 +1429,12 @@ describe('margin', () => {
}
`)
).toEqual({
test: { marginTop: 'scalePx2dp(1)', marginRight: 'scalePx2dp(1)', marginBottom: 'scalePx2dp(1)', marginLeft: 'scalePx2dp(1)' }
test: {
marginTop: 'scalePx2dp(1)',
marginRight: 'scalePx2dp(1)',
marginBottom: 'scalePx2dp(1)',
marginLeft: 'scalePx2dp(1)'
}
})
})

Expand Down Expand Up @@ -1646,9 +1696,7 @@ describe('text-decoration', () => {
text-decoration: underline red yellow;
}
`)
).toThrow(
'Failed to parse declaration "textDecoration: underline red yellow"'
)
).toThrow('Failed to parse declaration "textDecoration: underline red yellow"')
})
})

Expand Down Expand Up @@ -2174,9 +2222,7 @@ describe('font', () => {
font-family: Goudy Bookletter 1911;
}
`)
}).toThrowError(
'Failed to parse declaration "fontFamily: Goudy Bookletter 1911"'
)
}).toThrowError('Failed to parse declaration "fontFamily: Goudy Bookletter 1911"')
})
})

Expand Down Expand Up @@ -2424,9 +2470,7 @@ describe('box-shadow', () => {
box-shadow: 0 0 0 red yellow green blue;
}
`)
}).toThrowError(
'Failed to parse declaration "boxShadow: 0 0 0 red yellow green blue"'
)
}).toThrowError('Failed to parse declaration "boxShadow: 0 0 0 red yellow green blue"')
})

it('transforms box-shadow and enforces offset-y if offset-x present', () => {
Expand All @@ -2446,9 +2490,7 @@ describe('box-shadow', () => {
box-shadow: 10 20px 30px #f00;
}
`)
}).toThrowError(
'Failed to parse declaration "boxShadow: 10 20px 30px #f00"'
)
}).toThrowError('Failed to parse declaration "boxShadow: 10 20px 30px #f00"')
expect(() => {
transform(`
.test {
Expand Down Expand Up @@ -3491,11 +3533,14 @@ describe('ICSS :export pseudo-selector', () => {

it('does not transform value to scalePx2dp when option scalable false', () => {
expect(
transform(`
transform(
`
.foo {
padding: 10px 20px;
}
`, { scalable: false })
`,
{ scalable: false }
)
).toEqual({
foo: {
paddingTop: 10,
Expand All @@ -3508,7 +3553,8 @@ describe('ICSS :export pseudo-selector', () => {

it('should transform border-[direction] property', () => {
expect(
transform(`
transform(
`
.left {
border-left: red 1px solid;
}
Expand All @@ -3521,7 +3567,9 @@ describe('ICSS :export pseudo-selector', () => {
.top {
border-top: 1px red solid;
}
`, { scalable: false })
`,
{ scalable: false }
)
).toEqual({
top: {
borderTopWidth: 1,
Expand All @@ -3548,11 +3596,14 @@ describe('ICSS :export pseudo-selector', () => {

it('should transform propertyValue remove !import key', () => {
expect(
transform(`
transform(
`
.foo {
color: red !import;
}
`, { scalable: false })
`,
{ scalable: false }
)
).toEqual({
foo: {
color: 'red'
Expand All @@ -3572,9 +3623,7 @@ describe('ICSS :export pseudo-selector', () => {
color: blue;
}
`)
).toThrow(
'Failed to parse :export block because a CSS class in the same file is already using the name "bar"'
)
).toThrow('Failed to parse :export block because a CSS class in the same file is already using the name "bar"')
})

it('should throw an error if exportedKey has the same name as a class', () => {
Expand All @@ -3588,9 +3637,7 @@ describe('ICSS :export pseudo-selector', () => {
foo: 1;
}
`)
).toThrow(
'Failed to parse :export block because a CSS class in the same file is already using the name "foo"'
)
).toThrow('Failed to parse :export block because a CSS class in the same file is already using the name "foo"')
expect(() =>
transform(`
:export {
Expand All @@ -3601,9 +3648,7 @@ describe('ICSS :export pseudo-selector', () => {
color: red;
}
`)
).toThrow(
'Failed to parse :export block because a CSS class in the same file is already using the name "foo"'
)
).toThrow('Failed to parse :export block because a CSS class in the same file is already using the name "foo"')
expect(() =>
transform(`
.foo {
Expand All @@ -3618,9 +3663,7 @@ describe('ICSS :export pseudo-selector', () => {
color: red;
}
`)
).toThrow(
'Failed to parse :export block because a CSS class in the same file is already using the name "foo"'
)
).toThrow('Failed to parse :export block because a CSS class in the same file is already using the name "foo"')
})

it('should throw for :export that is not top level', () => {
Expand Down
25 changes: 11 additions & 14 deletions packages/css-to-react-native/src/css-to-react-native/transforms/transform.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,26 +1,23 @@
import { tokens } from '../tokenTypes'

const { SPACE, COMMA, LENGTH, NUMBER, ANGLE } = tokens
const { SPACE, COMMA, LENGTH, NUMBER, ANGLE, PERCENT } = tokens

const oneOfType = tokenType => functionStream => {
const value = functionStream.expect(tokenType)
const value = functionStream.expect(...tokenType)
functionStream.expectEmpty()
return value
}

const singleNumber = oneOfType(NUMBER)
const singleLength = oneOfType(LENGTH)
const singleAngle = oneOfType(ANGLE)
const xyTransformFactory = tokenType => (
key,
valueIfOmitted
) => functionStream => {
const x = functionStream.expect(tokenType)
const singleNumber = oneOfType([NUMBER])
const singleLength = oneOfType([LENGTH, PERCENT])
const singleAngle = oneOfType([ANGLE])
const xyTransformFactory = tokenType => (key, valueIfOmitted) => functionStream => {
const x = functionStream.expect(...tokenType)

let y
if (functionStream.hasTokens()) {
functionStream.expect(COMMA)
y = functionStream.expect(tokenType)
y = functionStream.expect(...tokenType)
} else if (typeof valueIfOmitted !== 'undefined') {
y = valueIfOmitted
} else {
Expand All @@ -33,9 +30,9 @@ const xyTransformFactory = tokenType => (

return [{ [`${key}Y`]: y }, { [`${key}X`]: x }]
}
const xyNumber = xyTransformFactory(NUMBER)
const xyLength = xyTransformFactory(LENGTH)
const xyAngle = xyTransformFactory(ANGLE)
const xyNumber = xyTransformFactory([NUMBER])
const xyLength = xyTransformFactory([LENGTH, PERCENT])
const xyAngle = xyTransformFactory([ANGLE])

const partTransforms = {
perspective: singleNumber,
Expand Down