feat: add rem polyfill to withUniwindConfig (#71)

Author: Brentlok

apps/expo-example/metro.config.js

@@ -17,5 +17,5 @@ module.exports = (async () => {
         path.join(workspaceRoot, 'node_modules'),
     ]
 
-    return withUniwindConfig(config, { cssEntryFile: 'global.css', extraThemes: ['premium'] })
+    return withUniwindConfig(config, { cssEntryFile: 'global.css', extraThemes: ['premium'], polyfills: { rem: 14 } })
 })()

packages/uniwind/src/metro/compileVirtual.ts

@@ -2,17 +2,18 @@ import { compile } from '@tailwindcss/node'
 import { polyfillWeb } from './polyfillWeb'
 import { ProcessorBuilder } from './processor'
 import { addMetaToStylesTemplate, serializeStylesheet } from './stylesheet'
-import { Platform } from './types'
+import { Platform, Polyfills } from './types'
 
 type CompileVirtualConfig = {
     cssPath: string
     css: string
     candidates: Array<string>
     platform: Platform
     themes: Array<string>
+    polyfills: Polyfills | undefined
 }
 
-export const compileVirtual = async ({ candidates, css, cssPath, platform, themes }: CompileVirtualConfig) => {
+export const compileVirtual = async ({ candidates, css, cssPath, platform, themes, polyfills }: CompileVirtualConfig) => {
     const compiler = await compile(css, {
         base: cssPath,
         onDependency: () => void 0,
@@ -23,7 +24,7 @@ export const compileVirtual = async ({ candidates, css, cssPath, platform, theme
         return polyfillWeb(tailwindCSS)
     }
 
-    const Processor = new ProcessorBuilder(themes)
+    const Processor = new ProcessorBuilder(themes, polyfills)
 
     Processor.transform(tailwindCSS)
 

packages/uniwind/src/metro/index.d.ts

@@ -1,9 +1,14 @@
 import type { MetroConfig } from 'metro-config'
 
+type Polyfills = {
+    rem?: number
+}
+
 type UniwindConfig = {
     cssEntryFile: string
     extraThemes?: Array<string>
     dtsFile?: string
+    polyfills?: Polyfills
 }
 
 export declare function withUniwindConfig(config: MetroConfig, options: UniwindConfig): MetroConfig

packages/uniwind/src/metro/processor/processor.ts

@@ -1,4 +1,5 @@
 import { Declaration, MediaQuery, Rule, transform } from 'lightningcss'
+import { Polyfills } from '../types'
 import { Color } from './color'
 import { CSS } from './css'
 import { Functions } from './functions'
@@ -9,9 +10,7 @@ import { Var } from './var'
 
 export class ProcessorBuilder {
     stylesheets = {} as Record<string, Array<any>>
-    vars = {
-        '--uniwind-em': 16,
-    } as Record<string, any>
+    vars = {} as Record<string, any>
     CSS = new CSS(this)
     RN = new RN(this)
     Var = new Var(this)
@@ -22,7 +21,9 @@ export class ProcessorBuilder {
 
     private declarationConfig = this.getDeclarationConfig()
 
-    constructor(private readonly themes: Array<string>) {}
+    constructor(private readonly themes: Array<string>, readonly polyfills: Polyfills | undefined) {
+        this.vars['--uniwind-em'] = polyfills?.rem ?? 16
+    }
 
     transform(css: string) {
         transform({

packages/uniwind/src/metro/processor/units.ts

@@ -21,7 +21,7 @@ export class Units {
                 case 'vh':
                     return `rt.screen.height * ${length.value / 100}`
                 case 'rem':
-                    return length.value * 16
+                    return length.value * this.Processor.vars['--uniwind-em']
                 case 'em':
                     return `this[\`--uniwind-em\`] * ${length.value}`
                 default:

packages/uniwind/src/metro/types.ts

@@ -25,11 +25,16 @@ export type ExtendedFileSystem = {
     getSha1: WithUniwindPatch<(filename: string) => string>
 }
 
+export type Polyfills = {
+    rem?: number
+}
+
 export type UniwindConfig = {
     cssEntryFile: string
     themes: Array<string>
     extraThemes?: Array<string>
     dtsFile?: string
+    polyfills?: Polyfills
 }
 
 export type MediaQueryResolver = {

packages/uniwind/src/metro/withUniwindConfig.ts

@@ -132,6 +132,7 @@ export const withUniwindConfig = (
             css: uniwind.cssFile,
             platform,
             themes: uniwindConfig.themes,
+            polyfills: uniwindConfig.polyfills,
         })
 
         uniwind.virtualModules.set(getVirtualPath(platform), virtualFile)