@niibase/uniwind 1.1.11 → 1.4.0

package/src/hooks/useUniwind.ts

@@ -1,14 +1,20 @@
 import { useLayoutEffect, useState } from 'react'
 import { Uniwind } from '../core'
+import { useUniwindContext } from '../core/context'
 import { UniwindListener } from '../core/listener'
 import { ThemeName } from '../core/types'
 import { StyleDependency } from '../types'
 
 export const useUniwind = () => {
+    const uniwindContext = useUniwindContext()
     const [theme, setTheme] = useState(Uniwind.currentTheme)
     const [hasAdaptiveThemes, setHasAdaptiveThemes] = useState(Uniwind.hasAdaptiveThemes)
 
     useLayoutEffect(() => {
+        if (uniwindContext.scopedTheme !== null) {
+            return
+        }
+
         const dispose = UniwindListener.subscribe(() => {
             setTheme(Uniwind.currentTheme)
             setHasAdaptiveThemes(Uniwind.hasAdaptiveThemes)
@@ -17,10 +23,10 @@ export const useUniwind = () => {
         return () => {
             dispose()
         }
-    }, [])
+    }, [uniwindContext])
 
     return {
-        theme: theme as ThemeName,
-        hasAdaptiveThemes,
+        theme: uniwindContext.scopedTheme ?? theme as ThemeName,
+        hasAdaptiveThemes: uniwindContext.scopedTheme !== null ? false : hasAdaptiveThemes,
     }
 }

package/src/index.ts

@@ -1,3 +1,4 @@
+export * from './components/ScopedTheme'
 export { Uniwind } from './core'
 export { withUniwind } from './hoc'
 export type { ApplyUniwind, ApplyUniwindOptions } from './hoc/types'

package/src/metro/compileVirtual.ts

@@ -1,9 +1,10 @@
 import { compile } from '@tailwindcss/node'
 import { Scanner } from '@tailwindcss/oxide'
+import { transform } from 'lightningcss'
 import path from 'path'
+import { UniwindCSSVisitor } from '../css-visitor'
 import { addMetaToStylesTemplate } from './addMetaToStylesTemplate'
 import { Logger } from './logger'
-import { polyfillWeb } from './polyfillWeb'
 import { ProcessorBuilder } from './processor'
 import { Platform, Polyfills } from './types'
 import { serializeJSObject } from './utils'
@@ -36,7 +37,11 @@ export const compileVirtual = async ({ css, cssPath, platform, themes, polyfills
     const tailwindCSS = compiler.build(candidates ?? scanner.scan())
 
     if (platform === Platform.Web) {
-        return polyfillWeb(tailwindCSS)
+        return transform({
+            code: Buffer.from(tailwindCSS),
+            filename: 'uniwind.css',
+            visitor: new UniwindCSSVisitor(themes),
+        }).code.toString()
     }
 
     const Processor = new ProcessorBuilder(themes, polyfills)

package/src/metro/processor/functions.ts

@@ -163,10 +163,18 @@ export class Functions {
         }
 
         if (fn.name === 'pixelRatio') {
+            if (fn.arguments.length === 0) {
+                return 'rt.pixelRatio(1)'
+            }
+
             return `rt.pixelRatio(${this.Processor.CSS.processValue(fn.arguments)})`
         }
 
         if (fn.name === 'fontScale') {
+            if (fn.arguments.length === 0) {
+                return 'rt.fontScale(1)'
+            }
+
             return `rt.fontScale(${this.Processor.CSS.processValue(fn.arguments)})`
         }
 

package/src/metro/processor/rn.ts

@@ -219,6 +219,7 @@ const cssToRNMap: Record<string, (value: any) => Record<string, any>> = {
 }
 
 const BORDER_WIDTH_KEYS = ['borderTopWidth', 'borderRightWidth', 'borderBottomWidth', 'borderLeftWidth']
+const BORDER_COLOR_KEYS = ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor']
 
 export class RN {
     constructor(private readonly Processor: ProcessorBuilder) {}
@@ -231,6 +232,8 @@ export class RN {
                 x => {
                     if (x.includes('padding') || x.includes('margin')) {
                         return x
+                            .replace('InlineStart', 'Start')
+                            .replace('InlineEnd', 'End')
                             .replace('Inline', 'Horizontal')
                             .replace('Block', 'Vertical')
                     }
@@ -356,6 +359,18 @@ export class RN {
             }
         }
 
+        if (BORDER_COLOR_KEYS.every(key => keys.includes(key))) {
+            const borderColor = styles.borderTopColor
+
+            // Join border colors
+            if (BORDER_COLOR_KEYS.every(key => styles[key] === borderColor)) {
+                return {
+                    ...removeKeys(styles, BORDER_COLOR_KEYS),
+                    borderColor,
+                }
+            }
+        }
+
         return styles
     }
 }

package/src/metro/utils/common.ts

@@ -45,6 +45,7 @@ export const addMissingSpaces = (str: string) =>
         x => x.trim(),
         x => x.replace(/([^ {])this/g, '$1 this'),
         x => x.replace(/\](?=\d)/g, '] '),
+        x => x.replace(/\](?=")/g, '] '),
         x => x.replace(/\)(?=\S)/g, ') '),
         x => x.replace(/(?<!^)(?<!\s)"(?=\d)/g, '" '),
     )

package/src/metro/utils/serialize.ts

@@ -29,10 +29,16 @@ const parseStringValue = (value: string) => {
 
         // Expressions that need to be wrapped with ${}
         const endsWithComma = token.endsWith(',')
+        const expr = endsWithComma ? token.slice(0, -1) : token
+
+        // Only wrap in ${} if the expression is valid JS — otherwise treat as plain string
+        if (!isValidJSValue(expr)) {
+            return token
+        }
 
         return [
             '${',
-            endsWithComma ? token.slice(0, -1) : token,
+            expr,
             '}',
             endsWithComma ? ',' : '',
         ].join('')

package/src/vite/vite.ts

@@ -3,7 +3,7 @@ import path from 'path'
 import type { Plugin } from 'vite'
 import { name as UNIWIND_PACKAGE_NAME } from '../../package.json'
 import { buildCSS } from '../css'
-import { processFunctions } from '../css/processFunctions'
+import { UniwindCSSVisitor } from '../css-visitor'
 import { uniq } from '../metro/utils'
 import { buildDtsFile } from '../utils/buildDtsFile'
 import { stringifyThemes } from '../utils/stringifyThemes'
@@ -52,9 +52,7 @@ export const uniwind = ({
             css: {
                 transformer: 'lightningcss',
                 lightningcss: {
-                    visitor: {
-                        Function: processFunctions,
-                    },
+                    visitor: new UniwindCSSVisitor(themes),
                 },
             },
             optimizeDeps: {

package/dist/module/css/processFunctions.d.ts

@@ -1,2 +0,0 @@
-import { CustomAtRules, Visitor } from 'lightningcss';
-export declare const processFunctions: Visitor<CustomAtRules>['Function'];

package/src/metro/polyfillWeb.ts

@@ -1,14 +0,0 @@
-import { transform } from 'lightningcss'
-import { processFunctions } from '../css/processFunctions'
-
-export const polyfillWeb = (css: string) => {
-    const result = transform({
-        code: Buffer.from(css),
-        filename: 'uniwind.css',
-        visitor: {
-            Function: processFunctions,
-        },
-    })
-
-    return result.code.toString()
-}