diff --git a/packages/uniwind/src/bundler/css-processor/functions.ts b/packages/uniwind/src/bundler/css-processor/functions.ts
index 7d791647..7c5d4bda 100644
--- a/packages/uniwind/src/bundler/css-processor/functions.ts
+++ b/packages/uniwind/src/bundler/css-processor/functions.ts
@@ -53,6 +53,10 @@ export class Functions {
return `rt.cubicBezier(${cubicArguments})`
}
+ if (fn.name === 'min') {
+ return `Math.min(${this.Processor.CSS.processValue(fn.arguments)})`
+ }
+
if (fn.name === 'max') {
return `Math.max(${this.Processor.CSS.processValue(fn.arguments)})`
}
diff --git a/packages/uniwind/tests/native/styles-parsing/css-functions.test.tsx b/packages/uniwind/tests/native/styles-parsing/css-functions.test.tsx
index b1224b0c..9e812163 100644
--- a/packages/uniwind/tests/native/styles-parsing/css-functions.test.tsx
+++ b/packages/uniwind/tests/native/styles-parsing/css-functions.test.tsx
@@ -1,9 +1,48 @@
import * as React from 'react'
+import { PixelRatio } from 'react-native'
import View from '../../../src/components/native/View'
import { renderUniwind } from '../utils'
-describe('Custom CSS Functions', () => {
+describe('CSS Functions', () => {
+ test('min', () => {
+ const { getStylesFromId } = renderUniwind(
+
+
+
+ ,
+ )
+
+ expect(getStylesFromId('min-width').width).toBe(8)
+ expect(getStylesFromId('min-height').height).toBe(32)
+ })
+
+ test('max', () => {
+ const { getStylesFromId } = renderUniwind(
+
+
+
+ ,
+ )
+
+ expect(getStylesFromId('max-width').width).toBe(12)
+ expect(getStylesFromId('max-height').height).toBe(40)
+ })
+
+ test('calc', () => {
+ const { getStylesFromId } = renderUniwind(
+
+
+
+ ,
+ )
+
+ expect(getStylesFromId('calc-add').width).toBe(20)
+ expect(getStylesFromId('calc-subtract').height).toBe(40)
+ })
+
test('fontScale', () => {
+ const getFontScale = jest.spyOn(PixelRatio, 'getFontScale').mockReturnValue(1.5)
+
const { getStylesFromId } = renderUniwind(
@@ -11,11 +50,15 @@ describe('Custom CSS Functions', () => {
,
)
- expect(getStylesFromId('font-scale').width).toBe(1)
- expect(getStylesFromId('font-scale-2').width).toBe(2)
+ expect(getStylesFromId('font-scale').width).toBe(1.5)
+ expect(getStylesFromId('font-scale-2').width).toBe(3)
+
+ getFontScale.mockRestore()
})
test('pixelRatio', () => {
+ const get = jest.spyOn(PixelRatio, 'get').mockReturnValue(2)
+
const { getStylesFromId } = renderUniwind(
@@ -23,7 +66,29 @@ describe('Custom CSS Functions', () => {
,
)
- expect(getStylesFromId('pixel-ratio').width).toBe(1)
- expect(getStylesFromId('pixel-ratio-2').width).toBe(2)
+ expect(getStylesFromId('pixel-ratio').width).toBe(2)
+ expect(getStylesFromId('pixel-ratio-2').width).toBe(4)
+
+ get.mockRestore()
+ })
+
+ test('combinations', () => {
+ const get = jest.spyOn(PixelRatio, 'get').mockReturnValue(2)
+ const getFontScale = jest.spyOn(PixelRatio, 'getFontScale').mockReturnValue(1.5)
+
+ const { getStylesFromId } = renderUniwind(
+
+
+
+
+ ,
+ )
+
+ expect(getStylesFromId('nested-math').width).toBe(8)
+ expect(getStylesFromId('runtime-calc').height).toBe(10)
+ expect(getStylesFromId('runtime-max').margin).toBe(6)
+
+ get.mockRestore()
+ getFontScale.mockRestore()
})
})