@niibase/uniwind 1.5.0 → 1.5.1

package/src/core/web/cssListener.ts

@@ -2,9 +2,10 @@ import { StyleDependency } from '../../types'
 import { UniwindListener } from '../listener'
 
 class CSSListenerBuilder {
+    activeRules = new Set<CSSStyleRule>()
     private classNameMediaQueryListeners = new Map<string, MediaQueryList>()
     private listeners = new Map<MediaQueryList, Set<VoidFunction>>()
-    private registeredRules = new Map<string, MediaQueryList>()
+    private registeredRulesMediaQueries = new Map<string, MediaQueryList>()
     private processedStyleSheets = new WeakSet<CSSStyleSheet>()
     private pendingInitialization: number | undefined = undefined
 
@@ -15,6 +16,22 @@ class CSSListenerBuilder {
 
         const observer = new MutationObserver(mutations => {
             for (const mutation of mutations) {
+                if (mutation.type === 'attributes') {
+                    const el = mutation.target as HTMLLinkElement | HTMLStyleElement
+
+                    if (!('sheet' in el)) {
+                        continue
+                    }
+
+                    const sheet = el.sheet
+
+                    if (sheet) {
+                        this.processedStyleSheets.delete(sheet)
+                    }
+
+                    this.scheduleInitialization()
+                }
+
                 if (mutation.type === 'childList') {
                     this.scheduleInitialization()
                 }
@@ -83,8 +100,19 @@ class CSSListenerBuilder {
         }
     }
 
+    private pruneStaleRules() {
+        const activeSheets = new Set(Array.from(document.styleSheets))
+
+        for (const rule of this.activeRules) {
+            if (!rule.parentStyleSheet || !activeSheets.has(rule.parentStyleSheet)) {
+                this.activeRules.delete(rule)
+            }
+        }
+    }
+
     private initialize() {
         this.pendingInitialization = undefined
+        this.pruneStaleRules()
 
         for (const sheet of Array.from(document.styleSheets)) {
             // Skip already processed stylesheets
@@ -121,6 +149,10 @@ class CSSListenerBuilder {
         return rule.constructor.name === 'CSSMediaRule'
     }
 
+    private isSupportsRule(rule: CSSRule): rule is CSSSupportsRule {
+        return rule.constructor.name === 'CSSSupportsRule'
+    }
+
     private collectParentMediaQueries(rule: CSSRule, acc = [] as Array<CSSMediaRule>): Array<CSSMediaRule> {
         const { parentRule } = rule
 
@@ -144,13 +176,25 @@ class CSSListenerBuilder {
             if (this.isStyleRule(rule)) {
                 const mediaQueries = this.collectParentMediaQueries(rule)
 
+                this.activeRules.add(rule)
+
                 if (mediaQueries.length > 0) {
-                    this.addMediaQuery(mediaQueries, rule.selectorText)
+                    this.addMediaQuery(mediaQueries, rule)
                 }
 
                 continue
             }
 
+            if (this.isSupportsRule(rule)) {
+                if (!CSS.supports(rule.conditionText)) {
+                    continue
+                }
+
+                this.addMediaQueriesDeep(rule.cssRules)
+
+                continue
+            }
+
             if ('cssRules' in rule && rule.cssRules instanceof CSSRuleList) {
                 this.addMediaQueriesDeep(rule.cssRules)
 
@@ -159,27 +203,50 @@ class CSSListenerBuilder {
         }
     }
 
-    private addMediaQuery(mediaQueries: Array<CSSMediaRule>, className: string) {
+    private addMediaQuery(mediaQueries: Array<CSSMediaRule>, rule: CSSStyleRule) {
+        const className = rule.selectorText
         const rules = mediaQueries.map(mediaQuery => mediaQuery.conditionText).sort().join(' and ')
         const parsedClassName = className.replace('.', '').replace('\\', '')
-        const cachedMediaQueryList = this.registeredRules.get(rules)
+        const cachedMediaQueryList = this.registeredRulesMediaQueries.get(rules)
 
         if (cachedMediaQueryList) {
             this.classNameMediaQueryListeners.set(parsedClassName, cachedMediaQueryList)
+            this.toggleRule(cachedMediaQueryList, rule)
+
+            cachedMediaQueryList.addEventListener('change', () => {
+                this.toggleRule(cachedMediaQueryList, rule)
+            })
 
             return
         }
 
         const mediaQueryList = window.matchMedia(rules)
 
-        this.registeredRules.set(rules, mediaQueryList)
+        this.toggleRule(mediaQueryList, rule)
+        this.registeredRulesMediaQueries.set(rules, mediaQueryList)
         this.listeners.set(mediaQueryList, new Set())
         this.classNameMediaQueryListeners.set(parsedClassName, mediaQueryList)
 
         mediaQueryList.addEventListener('change', () => {
-            this.listeners.get(mediaQueryList)!.forEach(listener => listener())
+            this.listeners.get(mediaQueryList)!.forEach(listener => {
+                listener()
+            })
+            this.toggleRule(mediaQueryList, rule)
         })
     }
+
+    private isRuleLive(rule: CSSStyleRule) {
+        const sheet = rule.parentStyleSheet
+        return sheet !== null && Array.from(document.styleSheets).includes(sheet)
+    }
+
+    private toggleRule(mqList: MediaQueryList, rule: CSSStyleRule) {
+        if (mqList.matches && this.isRuleLive(rule)) {
+            this.activeRules.add(rule)
+        } else {
+            this.activeRules.delete(rule)
+        }
+    }
 }
 
 export const CSSListener = new CSSListenerBuilder()

package/src/core/web/getWebStyles.ts

@@ -1,4 +1,5 @@
 import { RNStyle, UniwindContextType } from '../types'
+import { CSSListener } from './cssListener'
 import { parseCSSValue } from './parseCSSValue'
 
 const dummyParent = typeof document !== 'undefined'
@@ -15,40 +16,40 @@ if (dummyParent && dummy) {
     dummyParent.appendChild(dummy)
 }
 
-const getComputedStyles = () => {
+const getActiveStylesForClass = (className: string) => {
+    const extractedStyles = {} as Record<string, string>
+
     if (!dummy) {
-        return {} as CSSStyleDeclaration
+        return extractedStyles
     }
 
+    const classNames = className.split(/\s+/).filter(Boolean)
     const computedStyles = window.getComputedStyle(dummy)
-    const styles = {} as CSSStyleDeclaration
-
-    // eslint-disable-next-line @typescript-eslint/prefer-for-of
-    for (let i = 0; i < computedStyles.length; i++) {
-        // Typescript is unable to infer it properly
-        const prop = computedStyles[i] as any
 
-        styles[prop] = computedStyles.getPropertyValue(prop)
-    }
+    CSSListener.activeRules.forEach(rule => {
+        const selector = rule.selectorText
+        const mightMatch = classNames.some((cls) => selector.includes(`.${CSS.escape(cls)}`))
 
-    return styles
-}
-
-const initialStyles = typeof document !== 'undefined'
-    ? getComputedStyles()
-    : {} as CSSStyleDeclaration
-
-const getObjectDifference = <T extends object>(obj1: T, obj2: T): T => {
-    const diff = {} as T
-    const keys = Object.keys(obj2) as Array<keyof T>
+        if (!mightMatch) {
+            return
+        }
 
-    keys.forEach(key => {
-        if (obj2[key] !== obj1[key]) {
-            diff[key] = obj2[key]
+        // element.matches() throws errors if it sees pseudo-elements like ::before
+        // So we strip them out safely just for the matching test
+        const safeSelector = selector.replace(/::[a-z-]+/gi, '')
+
+        try {
+            if (safeSelector !== '' && dummy.matches(safeSelector)) {
+                for (const propertyName of rule.style) {
+                    extractedStyles[propertyName] = computedStyles.getPropertyValue(propertyName)
+                }
+            }
+        } catch {
+            // Failsafe for unparseable selectors
         }
     })
 
-    return diff
+    return extractedStyles
 }
 
 export const getWebStyles = (className: string | undefined, uniwindContext: UniwindContextType): RNStyle => {
@@ -68,7 +69,7 @@ export const getWebStyles = (className: string | undefined, uniwindContext: Uniw
 
     dummy.className = className
 
-    const computedStyles = getObjectDifference(initialStyles, getComputedStyles())
+    const computedStyles = getActiveStylesForClass(className)
 
     return Object.fromEntries(
         Object.entries(computedStyles)

package/src/css/extraUtilities.ts

@@ -0,0 +1,26 @@
+import { RNStyle } from '../core/types'
+
+const toKebabCase = (str: string) => str.replace(/[A-Z]/g, letter => `-${letter.toLowerCase()}`)
+
+const generateExtraUtilities = (map: Record<string, RNStyle>) => {
+    return Object.entries(map)
+        .map(([name, style]) =>
+            [
+                `@utility ${name} {`,
+                ...Object.entries(style).map(([key, value]) => `  ${toKebabCase(key)}: ${value};`),
+                `}`,
+                '',
+            ].join('\n')
+        ).join('\n')
+}
+
+const EXTRA_UTILITIES_MAP = {
+    'border-continuous': {
+        borderCurve: 'continuous',
+    },
+    'border-circular': {
+        borderCurve: 'circular',
+    },
+} satisfies Record<string, RNStyle>
+
+export const EXTRA_UTILITIES_CSS = generateExtraUtilities(EXTRA_UTILITIES_MAP)

package/src/css/index.ts

@@ -1,15 +1,14 @@
 import fs from 'fs'
 import path from 'path'
-import { generateCSSForInsets } from './insets'
-import { overwrite } from './overwrite'
+import { EXTRA_UTILITIES_CSS } from './extraUtilities'
+import { INSETS_CSS } from './insets'
+import { OVERWRITE_CSS } from './overwrite'
 import { generateCSSForThemes } from './themes'
-import { generateCSSForVariants } from './variants'
+import { VARIANTS_CSS } from './variants'
 
 const dirname = typeof __dirname !== 'undefined' ? __dirname : import.meta.dirname
 
 export const buildCSS = async (themes: Array<string>, input: string) => {
-    const variants = generateCSSForVariants()
-    const insets = generateCSSForInsets()
     const themesCSS = await generateCSSForThemes(themes, input)
     const cssFilePath = path.join(dirname, '../../uniwind.css')
     const oldCSSFile = fs.existsSync(cssFilePath)
@@ -17,9 +16,10 @@ export const buildCSS = async (themes: Array<string>, input: string) => {
         : ''
 
     const newCssFile = [
-        variants,
-        insets,
-        overwrite,
+        VARIANTS_CSS,
+        INSETS_CSS,
+        OVERWRITE_CSS,
+        EXTRA_UTILITIES_CSS,
         themesCSS,
     ].join('\n')
 

package/src/css/insets.ts

@@ -9,7 +9,7 @@ type TypeName = (typeof types)[number]
 type SafeAreaType = (typeof safeAreaTypes)[number]
 type Inset = 'top' | 'bottom' | 'left' | 'right'
 
-export const generateCSSForInsets = () => {
+const generateCSSForInsets = () => {
     let css = `@utility h-screen-safe {
     height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
 }\n\n`
@@ -104,3 +104,5 @@ export const generateCSSForInsets = () => {
     // Remove the last newline character
     return css.slice(0, -1)
 }
+
+export const INSETS_CSS = generateCSSForInsets()

package/src/css/overwrite.ts

@@ -13,4 +13,4 @@ const overwriteDisabled = `@custom-variant disabled {
 }
 `
 
-export const overwrite = overwriteDisabled
+export const OVERWRITE_CSS = overwriteDisabled

package/src/css/variants.ts

@@ -1,6 +1,6 @@
 const variants = ['ios', 'android', 'web', 'native', 'tv', 'android-tv', 'apple-tv']
 
-export const generateCSSForVariants = () => {
+const generateCSSForVariants = () => {
     let css = ''
 
     variants.forEach(variant => {
@@ -9,3 +9,5 @@ export const generateCSSForVariants = () => {
 
     return css
 }
+
+export const VARIANTS_CSS = generateCSSForVariants()

package/uniwind.css

@@ -393,6 +393,14 @@
     }
 }
 
+@utility border-continuous {
+  border-curve: continuous;
+}
+
+@utility border-circular {
+  border-curve: circular;
+}
+
 @custom-variant light {
    &:where(.light, .light *) {
        @slot;