@niibase/uniwind 1.6.4 → 1.8.0

package/src/{metro → bundler/css-processor}/addMetaToStylesTemplate.ts

@@ -1,14 +1,14 @@
-import { Platform } from '../common/consts'
-import { isDefined } from '../common/utils'
-import { StyleDependency } from '../types'
-import { ProcessorBuilder } from './processor'
-import { StyleSheetTemplate } from './types'
-import { serialize, toCamelCase } from './utils'
+import { Platform, StyleDependency } from '@/common/consts'
+import { isDefined } from '@/common/utils'
+import type { ProcessorBuilder } from './processor'
+import { serialize } from './serialize'
+import type { StyleSheetTemplate } from './types'
+import { toCamelCase } from './utils'
 
 const extractVarsFromString = (value: string) => {
-    const thisIndexes = [...value.matchAll(/this\[/g)].map(m => m.index)
+    const varsIndexes = [...value.matchAll(/vars\[/g)].map(m => m.index)
 
-    return thisIndexes.map(index => {
+    return varsIndexes.map(index => {
         const afterIndex = value.slice(index + 5)
         const closingIndex = afterIndex.indexOf(']')
         const varName = afterIndex.slice(0, closingIndex)
@@ -29,6 +29,30 @@ const makeSafeForSerialization = (value: any) => {
     return value
 }
 
+const hasThemedVarDependency = (varName: string, Processor: ProcessorBuilder, visited = new Set<string>()): boolean => {
+    if (visited.has(varName)) {
+        return false
+    }
+
+    visited.add(varName)
+
+    const isScopedVar = Object.values(Processor.scopedVars).some(scopedVars => varName in scopedVars)
+
+    if (isScopedVar) {
+        return true
+    }
+
+    const globalVarValue = Processor.vars[varName]
+
+    if (typeof globalVarValue !== 'string') {
+        return false
+    }
+
+    return extractVarsFromString(globalVarValue).some(usedVarName => {
+        return hasThemedVarDependency(usedVarName, Processor, visited)
+    })
+}
+
 export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlatform: Platform) => {
     const stylesheetsEntries = Object.entries(Processor.stylesheets as StyleSheetTemplate)
         .map(([className, stylesPerMediaQuery]) => {
@@ -52,7 +76,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
 
                 const entries = Object.entries(rest)
                     .flatMap(([property, value]) => Processor.RN.cssToRN(property, value))
-                    .map(([property, value]) => [`"${property}"`, `function() { return ${serialize(value)} }`])
+                    .map(([property, value]) => [`"${property}"`, `function(vars) { return ${serialize(value)} }`])
 
                 if (platform) {
                     const isTV = currentPlatform === Platform.AndroidTV || currentPlatform === Platform.AppleTV
@@ -70,13 +94,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                 const dependencies: Array<StyleDependency> = []
                 const stringifiedEntries = JSON.stringify(entries)
                 const usedVars = extractVarsFromString(stringifiedEntries)
-                const isUsingThemedVar = usedVars.some(usedVarName => {
-                    return Object.values(Processor.scopedVars).some(scopedVars => {
-                        const scopedVarsNames = Object.keys(scopedVars)
-
-                        return scopedVarsNames.includes(usedVarName)
-                    })
-                })
+                const isUsingThemedVar = usedVars.some(usedVarName => hasThemedVarDependency(usedVarName, Processor))
 
                 if (usedVars.length > 0) {
                     dependencies.push(StyleDependency.Variables)
@@ -97,6 +115,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                 if (
                     Number(minWidth) !== 0
                     || Number(maxWidth) !== Number.MAX_VALUE
+                    || stringifiedEntries.includes('rt.makeResponsive')
                     || stringifiedEntries.includes('rt.screen')
                 ) {
                     dependencies.push(StyleDependency.Dimensions)
@@ -126,7 +145,7 @@ export const addMetaToStylesTemplate = (Processor: ProcessorBuilder, currentPlat
                     focus,
                     disabled,
                     importantProperties: importantProperties
-                        ?.map(property => property.startsWith('--') ? property : toCamelCase)
+                        ?.map(property => property.startsWith('--') ? property : toCamelCase(property))
                         .map(makeSafeForSerialization) ?? [],
                     dataAttributes,
                     complexity: [

package/src/{metro/processor → bundler/css-processor}/animation.ts

@@ -1,11 +1,11 @@
 import type { TokenOrValue } from 'lightningcss'
-import type { DeclarationValues } from '../types'
-import { toCamelCase } from '../utils'
 
-import {
+import type {
     CSSAnimationDelay,
 } from 'react-native-reanimated'
-import { ParametrizedTimingFunction } from 'react-native-reanimated/lib/typescript/css/easing'
+import type { ParametrizedTimingFunction } from 'react-native-reanimated/lib/typescript/css/easing'
+import type { DeclarationValues } from './types'
+import { toCamelCase } from './utils'
 
 type GetProcessedValue = (value: DeclarationValues) => any
 

package/src/{metro/processor → bundler/css-processor}/color.ts

@@ -1,8 +1,9 @@
-import { Color as ColorType, converter, formatHex, formatHex8, parse } from 'culori'
-import { CssColor, UnresolvedColor } from 'lightningcss'
+import type { Color as ColorType } from 'culori'
+import { converter, formatHex, formatHex8, parse } from 'culori'
+import type { CssColor, UnresolvedColor } from 'lightningcss'
 import { Logger } from '../logger'
-import { pipe } from '../utils'
 import type { ProcessorBuilder } from './processor'
+import { pipe } from './utils'
 
 export class Color {
     private toRgb = converter('rgb')
@@ -36,7 +37,7 @@ export class Color {
 
         try {
             if (color.type === 'currentcolor') {
-                return 'this["currentColor"]'
+                return 'vars["currentColor"]?.(vars)'
             }
 
             if (color.type === 'rgb' || color.type === 'srgb') {

package/src/{metro/processor → bundler/css-processor}/css.ts

@@ -1,21 +1,20 @@
 /* eslint-disable max-lines */
 
-import { Animation, Filter, OverflowKeyword, TokenOrValue } from 'lightningcss'
-
-import { isDefined } from '../../common/utils'
+import { isDefined } from '@/common/utils'
+import type { Animation, Filter, OverflowKeyword, TokenOrValue } from 'lightningcss'
 import { Logger } from '../logger'
-import { DeclarationValues } from '../types'
-import { deepEqual, pipe, roundToPrecision, shouldBeSerialized, toCamelCase } from '../utils'
 import { getProcessedAnimation, getProcessedVarAnimation } from './animation'
 import type { ProcessorBuilder } from './processor'
+import type { DeclarationProperty, DeclarationValues } from './types'
+import { deepEqual, pipe, roundToPrecision, shouldBeSerialized, toCamelCase } from './utils'
 
 export class CSS {
     private readonly logger = new Logger('CSS')
 
     constructor(private readonly Processor: ProcessorBuilder) {}
 
-    processValue(declarationValue: DeclarationValues): any {
-        const processedValue = this.getProcessedValue(declarationValue)
+    processValue(declarationValue: DeclarationValues, declarationProperty?: DeclarationProperty): any {
+        const processedValue = this.getProcessedValue(declarationValue, declarationProperty)
 
         if (typeof processedValue === 'string') {
             return this.makeSafeForSerialization(processedValue)
@@ -106,7 +105,7 @@ export class CSS {
         return filterStrings.join(' ')
     }
 
-    private getProcessedValue(declarationValue: DeclarationValues): any {
+    private getProcessedValue(declarationValue: DeclarationValues, declarationProperty?: DeclarationProperty): any {
         if (typeof declarationValue !== 'object') {
             return declarationValue
         }
@@ -274,7 +273,7 @@ export class CSS {
                     }
 
                     if (declarationValue.value === 'currentcolor') {
-                        return 'this["currentColor"]'
+                        return 'vars["currentColor"]?.(vars)'
                     }
 
                     return declarationValue.value
@@ -318,7 +317,7 @@ export class CSS {
                 case 'pair':
                     return declarationValue.inside.type
                 case 'currentcolor':
-                    return 'this["currentColor"]'
+                    return 'vars["currentColor"]?.(vars)'
                 case 'calc':
                     return this.Processor.Functions.processCalc(declarationValue.value)
                 case 'min':
@@ -424,11 +423,20 @@ export class CSS {
         }
 
         if ('grow' in declarationValue) {
-            return {
+            const parsedFlex = {
                 flexGrow: declarationValue.grow,
                 flexShrink: declarationValue.shrink,
                 flexBasis: this.processValue(declarationValue.basis),
             }
+
+            // CSS `flex: 1` is a shorthand for `flex-grow: 1; flex-shrink: 1; flex-basis: 0%` but for native we just want flex: 1
+            if (declarationProperty === 'flex' && parsedFlex.flexGrow === 1 && parsedFlex.flexShrink === 1 && parsedFlex.flexBasis === '"0%"') {
+                return {
+                    flex: 1,
+                }
+            }
+
+            return parsedFlex
         }
 
         if (Array.isArray(declarationValue)) {

package/src/{metro/processor → bundler/css-processor}/functions.ts

@@ -1,7 +1,7 @@
-import { CalcFor_DimensionPercentageFor_LengthValue, CalcFor_Length, CssColor, Function as FunctionType } from 'lightningcss'
+import type { CalcFor_DimensionPercentageFor_LengthValue, CalcFor_Length, CssColor, Function as FunctionType } from 'lightningcss'
 import { Logger } from '../logger'
-import { pipe } from '../utils'
 import type { ProcessorBuilder } from './processor'
+import { pipe } from './utils'
 
 export class Functions {
     private readonly logger = new Logger('Functions')

package/src/bundler/css-processor/index.ts

@@ -0,0 +1,3 @@
+export * from './addMetaToStylesTemplate'
+export * from './processor'
+export * from './serialize'

package/src/{metro/processor → bundler/css-processor}/mq.ts

@@ -1,8 +1,8 @@
-import { MediaCondition, MediaQuery, QueryFeatureFor_MediaFeatureId } from 'lightningcss'
-import { Platform } from '../../common/consts'
-import { ColorScheme, Orientation } from '../../types'
-import { MediaQueryResolver } from '../types'
+import type { ColorScheme, Orientation } from '@/common/consts'
+import { Platform } from '@/common/consts'
+import type { MediaCondition, MediaQuery, QueryFeatureFor_MediaFeatureId } from 'lightningcss'
 import type { ProcessorBuilder } from './processor'
+import type { MediaQueryResolver } from './types'
 
 export class MQ {
     constructor(private readonly Processor: ProcessorBuilder) {}

package/src/{metro/processor → bundler/css-processor}/processor.ts

@@ -1,13 +1,15 @@
-import { Declaration, MediaQuery, Rule, transform } from 'lightningcss'
-import { CSSAnimationKeyframes } from 'react-native-reanimated'
-import { UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '../../common/consts'
+import { UNIWIND_PLATFORM_VARIABLES, UNIWIND_THEME_VARIABLES } from '@/common/consts'
+import type { Declaration, MediaQuery, Rule } from 'lightningcss'
+import { transform } from 'lightningcss'
+import type { CSSAnimationKeyframes } from 'react-native-reanimated'
 import { parseTransformsMutation } from '../../core/native/parsers/transforms'
-import { AnimationFrame, MediaQueryResolver, Polyfills, ProcessMetaValues } from '../types'
+import type { UniwindBundlerConfig } from '../config'
 import { Color } from './color'
 import { CSS } from './css'
 import { Functions } from './functions'
 import { MQ } from './mq'
 import { RN } from './rn'
+import type { AnimationFrame, DeclarationProperty, MediaQueryResolver, ProcessMetaValues } from './types'
 import { Units } from './units'
 import { Var } from './var'
 
@@ -29,8 +31,8 @@ export class ProcessorBuilder {
     private pendingVarReferences = new Map<string, [Array<string>, boolean]>()
     private declarationConfig = this.getDeclarationConfig()
 
-    constructor(private readonly themes: Array<string>, readonly polyfills: Polyfills | undefined) {
-        this.vars['--uniwind-em'] = polyfills?.rem ?? 16
+    constructor(public readonly bundlerConfig: UniwindBundlerConfig) {
+        this.vars['--uniwind-em'] = this.bundlerConfig.polyfills?.rem ?? 16
     }
 
     transform(css: string) {
@@ -143,7 +145,7 @@ export class ProcessorBuilder {
         }
 
         // Track variable references for later processing (even if media queries don't exist yet)
-        const match = typeof value === 'string' ? value.match(/this\[`(.*?)`\]/) : null
+        const match = typeof value === 'string' ? value.match(/vars\["(.*?)"\]/) : null
 
         if (match && !isVar) {
             const className = this.declarationConfig.className
@@ -209,16 +211,16 @@ export class ProcessorBuilder {
     }
 
     private parseDeclaration(declaration: Declaration) {
-        const parseValue = (property: string, value: any) => {
+        const parseValue = (property: DeclarationProperty, value: any) => {
             if (property === 'animation') {
                 return this.CSS.processAnimation(value)
             }
 
-            return this.CSS.processValue(value)
+            return this.CSS.processValue(value, property)
         }
 
         if (declaration.property === 'unparsed') {
-            const property = declaration.value.propertyId.property
+            const property = declaration.value.propertyId.property as DeclarationProperty
 
             return {
                 property,
@@ -227,7 +229,7 @@ export class ProcessorBuilder {
         }
 
         if (declaration.property === 'custom') {
-            const property = declaration.value.name
+            const property = declaration.value.name as DeclarationProperty
 
             return {
                 property,
@@ -278,7 +280,7 @@ export class ProcessorBuilder {
                     if (selector.type === 'pseudo-class' && selector.kind === 'where') {
                         selector.selectors.forEach(selector => {
                             selector.forEach(selector => {
-                                if (selector.type === 'class' && this.themes.includes(selector.name)) {
+                                if (selector.type === 'class' && this.bundlerConfig.themes.includes(selector.name)) {
                                     theme = selector.name
                                 }
 
@@ -315,12 +317,12 @@ export class ProcessorBuilder {
                 })
 
                 if ([rtl, theme, active, focus, disabled, dataAttributes].some(Boolean)) {
-                    this.declarationConfig.rtl = rtl
-                    this.declarationConfig.theme = theme
-                    this.declarationConfig.active = active
-                    this.declarationConfig.focus = focus
-                    this.declarationConfig.disabled = disabled
-                    this.declarationConfig.dataAttributes = dataAttributes
+                    this.declarationConfig.rtl ??= rtl
+                    this.declarationConfig.theme ??= theme
+                    this.declarationConfig.active ??= active
+                    this.declarationConfig.focus ??= focus
+                    this.declarationConfig.disabled ??= disabled
+                    this.declarationConfig.dataAttributes ??= dataAttributes
 
                     rule.value.declarations?.declarations?.forEach(declaration => this.addDeclaration(declaration))
                     rule.value.declarations?.importantDeclarations?.forEach(declaration => this.addDeclaration(declaration, true))

package/src/{metro/processor → bundler/css-processor}/rn.ts

@@ -1,6 +1,7 @@
-import { isDefined } from '../../common/utils'
-import { addMissingSpaces, pipe, removeKeys, toCamelCase } from '../utils'
+import { DEFAULT_SCREEN_HEIGHT, DEFAULT_SCREEN_WIDTH } from '@/common/consts'
+import { isDefined } from '@/common/utils'
 import type { ProcessorBuilder } from './processor'
+import { addMissingSpaces, pipe, removeKeys, toCamelCase } from './utils'
 
 const transitions: Record<string, any> = { overlay: '"overlayColor"' }
 
@@ -233,6 +234,59 @@ const BORDER_WIDTH_KEYS = ['borderTopWidth', 'borderRightWidth', 'borderBottomWi
 const BORDER_COLOR_KEYS = ['borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor']
 const BORDER_RADIUS_KEYS = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomLeftRadius', 'borderBottomRightRadius']
 
+const COMPONENT_RESPONSIVE_PROPS = new Set([
+    'width',
+    'height',
+    'minWidth',
+    'maxWidth',
+    'minHeight',
+    'maxHeight',
+    'padding',
+    'paddingTop',
+    'paddingRight',
+    'paddingBottom',
+    'paddingLeft',
+    'paddingHorizontal',
+    'paddingVertical',
+    'paddingStart',
+    'paddingEnd',
+    'margin',
+    'marginTop',
+    'marginRight',
+    'marginBottom',
+    'marginLeft',
+    'marginHorizontal',
+    'marginVertical',
+    'marginStart',
+    'marginEnd',
+    'top',
+    'right',
+    'bottom',
+    'left',
+    'gap',
+    'rowGap',
+    'columnGap',
+    'borderWidth',
+    'borderTopWidth',
+    'borderRightWidth',
+    'borderBottomWidth',
+    'borderLeftWidth',
+    'borderStartWidth',
+    'borderEndWidth',
+    'borderRadius',
+    'borderTopLeftRadius',
+    'borderTopRightRadius',
+    'borderBottomLeftRadius',
+    'borderBottomRightRadius',
+    'borderTopStartRadius',
+    'borderTopEndRadius',
+    'borderBottomStartRadius',
+    'borderBottomEndRadius',
+    'flexBasis',
+    'translateX',
+    'translateY',
+])
+
 export class RN {
     constructor(private readonly Processor: ProcessorBuilder) {}
 
@@ -266,7 +320,46 @@ export class RN {
         )
         const joinedStyles = this.joinStyles(rn)
 
-        return Object.entries(joinedStyles).filter(([, value]) => isDefined(value)) as Array<[string, any]>
+        return Object.entries(joinedStyles)
+            .filter(([, value]) => isDefined(value))
+            .map(([prop, val]) => [prop, this.makeResponsive(prop, val)]) as Array<[string, any]>
+    }
+
+    private makeResponsive(property: string, value: any): any {
+        const mode = this.Processor.bundlerConfig.polyfills?.responsive
+
+        if (!mode) {
+            return value
+        }
+
+        if (typeof value === 'string') {
+            const rawValue = value.startsWith('"') && value.endsWith('"') ? value.slice(1, -1) : value
+
+            if (rawValue.endsWith('%')) {
+                const numValue = parseFloat(rawValue)
+
+                if (!isNaN(numValue)) {
+                    return `rt.makeResponsive(${numValue}, 100, true)`
+                }
+            }
+        }
+
+        if (typeof value !== 'number') {
+            return value
+        }
+
+        const isTextMode = mode === true || mode === 'text'
+        const isComponentMode = mode === true || mode === 'components'
+
+        if (isTextMode && (property === 'fontSize' || property === '--uniwind-em')) {
+            return `rt.makeResponsive(${value}, ${DEFAULT_SCREEN_HEIGHT}, true)`
+        }
+
+        if (isComponentMode && COMPONENT_RESPONSIVE_PROPS.has(property)) {
+            return `rt.makeResponsive(${value}, ${DEFAULT_SCREEN_WIDTH})`
+        }
+
+        return value
     }
 
     private transformProperty(property: string, value: any) {

package/src/{metro/utils → bundler/css-processor}/serialize.ts

@@ -1,5 +1,5 @@
-import { Logger } from '../logger'
-import { addMissingSpaces, isNumber, isValidJSValue, pipe, roundToPrecision, smartSplit } from './common'
+import { Logger } from '@/bundler/logger'
+import { addMissingSpaces, isNumber, isValidJSValue, pipe, roundToPrecision, smartSplit } from './utils'
 
 const parseStringValue = (value: string) => {
     if (isValidJSValue(value)) {

package/src/{metro → bundler/css-processor}/types.ts

@@ -1,3 +1,4 @@
+import type { ColorScheme, Orientation, Platform } from '@/common/consts'
 import type {
     AbsoluteFontWeight,
     Declaration,
@@ -11,23 +12,6 @@ import type {
     TokenOrValue,
     UnresolvedColor,
 } from 'lightningcss'
-import { Platform } from '../common/consts'
-import { ColorScheme, Orientation } from '../types'
-
-export type Polyfills = {
-    rem?: number
-}
-
-export type UniwindConfig = {
-    cssEntryFile: string
-    themes: Array<string>
-    extraThemes?: Array<string>
-    extraComponents?: Record<string, string>
-    dtsFile?: string
-    polyfills?: Polyfills
-    debug?: boolean
-    isTV?: boolean
-}
 
 export type MediaQueryResolver = {
     maxWidth: number | null
@@ -62,6 +46,8 @@ export type DeclarationValues =
     | AbsoluteFontWeight
     | UnresolvedColor
 
+export type DeclarationProperty = Declaration['property']
+
 export type ProcessMetaValues = {
     className?: string | null
 }

package/src/{metro/processor → bundler/css-processor}/units.ts

@@ -1,4 +1,4 @@
-import { DimensionPercentageFor_LengthValue, Length, LengthValue } from 'lightningcss'
+import type { DimensionPercentageFor_LengthValue, Length, LengthValue } from 'lightningcss'
 import { Logger } from '../logger'
 import type { ProcessorBuilder } from './processor'
 
@@ -23,7 +23,7 @@ export class Units {
                 case 'rem':
                     return length.value * this.Processor.vars['--uniwind-em']
                 case 'em':
-                    return `this[\`--uniwind-em\`] * ${length.value}`
+                    return `vars["--uniwind-em"]?.(vars) * ${length.value}`
                 default:
                     this.logger.warn(`Unsupported unit - ${length.unit}`)
 

package/src/{metro/utils/common.ts → bundler/css-processor/utils.ts}

@@ -41,15 +41,12 @@ export const smartSplit = (str: string, separator = ' ' as string | RegExp) => {
 export const addMissingSpaces = (str: string) =>
     pipe(str)(
         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,])/g, ') '),
         x => x.replace(/(?<!^)(?<!\s)"(?=\d)/g, '" '),
     )
 
-export const uniq = <T>(arr: Array<T>) => Array.from(new Set(arr))
-
 export const isValidJSValue = (jsValueString: string) => {
     try {
         new Function(`const test = ${jsValueString}`)
@@ -67,7 +64,7 @@ export const shouldBeSerialized = (value: string) => {
 
     return [
         isNumber(value),
-        value.startsWith('this['),
+        value.startsWith('vars['),
         value.startsWith('rt.'),
         /[*/+-]/.test(value),
         value.includes('"'),

package/src/{metro/processor → bundler/css-processor}/var.ts

@@ -1,11 +1,11 @@
-import { Variable } from 'lightningcss'
+import type { Variable } from 'lightningcss'
 import type { ProcessorBuilder } from './processor'
 
 export class Var {
     constructor(private readonly Processor: ProcessorBuilder) {}
 
     processVar(variable: Variable): string {
-        const value = `this[\`${variable.name.ident}\`]`
+        const value = `vars[${JSON.stringify(variable.name.ident)}]?.(vars)`
 
         if (!variable.fallback || variable.fallback.length === 0) {
             return value

package/src/{css-visitor → bundler/css-visitor}/function-visitor.ts

@@ -1,4 +1,4 @@
-import { Function as LightningCSSFunction, TokenOrValue } from 'lightningcss'
+import type { Function as LightningCSSFunction, TokenOrValue } from 'lightningcss'
 
 const ONE_PX = {
     type: 'token',

package/src/{css-visitor → bundler/css-visitor}/rule-visitor.ts

@@ -1,4 +1,5 @@
-import { ReturnedDeclaration, ReturnedMediaQuery, ReturnedRule, Rule, SelectorComponent } from 'lightningcss'
+import type { ReturnedDeclaration, ReturnedMediaQuery, ReturnedRule, Rule, SelectorComponent } from 'lightningcss'
+import type { UniwindBundlerConfig } from '../config'
 
 type LightningRuleVisitor = Rule<ReturnedDeclaration, ReturnedMediaQuery>
 type LightningRuleVisitors = Partial<
@@ -12,7 +13,7 @@ export class RuleVisitor implements LightningRuleVisitors {
     processedVariables = new Set<string>()
     currentLayerName = ''
 
-    constructor(private readonly themes: Array<string>) {}
+    constructor(private readonly bundlerConfig: UniwindBundlerConfig) {}
 
     'layer-block' = (layer: Extract<LightningRuleVisitor, { type: 'layer-block' }>) => {
         this.currentLayerName = layer.value.name?.join('') ?? ''
@@ -86,7 +87,7 @@ export class RuleVisitor implements LightningRuleVisitors {
             return styleRule
         }
 
-        const selectedVariant = this.themes.find(theme => whereSelector.name === theme)
+        const selectedVariant = this.bundlerConfig.themes.find(theme => whereSelector.name === theme)
 
         if (selectedVariant === undefined || this.processedVariables.has(selectedVariant)) {
             return styleRule
@@ -109,7 +110,7 @@ export class RuleVisitor implements LightningRuleVisitors {
         styleRule: Extract<LightningRuleVisitor, { type: 'style' }>,
         firstSelector: Extract<SelectorComponent, { type: 'class' }>,
     ): ReturnedRule | void {
-        const selectedVariant = this.themes.find(theme => firstSelector.name.includes(`${theme}:`))
+        const selectedVariant = this.bundlerConfig.themes.find(theme => firstSelector.name.includes(`${theme}:`))
 
         if (selectedVariant === undefined || this.processedClassNames.has(firstSelector.name)) {
             return
@@ -117,17 +118,17 @@ export class RuleVisitor implements LightningRuleVisitors {
 
         this.processedClassNames.add(firstSelector.name)
 
-        return {
+        return this.removeNulls({
             type: 'scope',
             value: {
                 loc: styleRule.value.loc,
                 rules: [styleRule],
                 scopeStart: [[{ type: 'class', name: selectedVariant }]],
-                scopeEnd: this.themes
+                scopeEnd: this.bundlerConfig.themes
                     .filter(theme => theme !== selectedVariant)
                     .map(theme => [{ type: 'class', name: theme }]),
             },
-        }
+        }) as ReturnedRule
     }
 
     // Fixes lightningcss serialization bug

package/src/{css-visitor → bundler/css-visitor}/visitor.ts

@@ -1,4 +1,5 @@
-import { CustomAtRules, Visitor } from 'lightningcss'
+import type { CustomAtRules, Visitor } from 'lightningcss'
+import type { UniwindBundlerConfig } from '../config'
 import { FunctionVisitor } from './function-visitor'
 import { RuleVisitor } from './rule-visitor'
 
@@ -7,8 +8,8 @@ export class UniwindCSSVisitor implements Visitor<CustomAtRules> {
     Rule: Visitor<CustomAtRules>['Rule']
     StyleSheet: Visitor<CustomAtRules>['StyleSheet']
 
-    constructor(private readonly themes: Array<string>) {
-        const ruleVisitor = new RuleVisitor(this.themes)
+    constructor(bundlerConfig: UniwindBundlerConfig) {
+        const ruleVisitor = new RuleVisitor(bundlerConfig)
 
         this.Function = new FunctionVisitor()
         this.Rule = ruleVisitor

package/src/{metro → bundler}/logger.ts

@@ -16,6 +16,10 @@ export class Logger {
         console.log(`${blue}Uniwind ${meta}- ${message}${reset}`)
     }
 
+    static info(message: string) {
+        console.log(`${blue}[Uniwind] ${message}${reset}`)
+    }
+
     static error(message: string, meta = '') {
         console.log(`${red}Uniwind Error ${meta}- ${message}${reset}`)
     }