@niibase/uniwind 1.5.0 → 1.6.0

package/dist/module/core/web/cssListener.d.ts

@@ -1,19 +1,24 @@
 declare class CSSListenerBuilder {
+    activeRules: Set<CSSStyleRule>;
     private classNameMediaQueryListeners;
     private listeners;
-    private registeredRules;
+    private registeredRulesMediaQueries;
     private processedStyleSheets;
     private pendingInitialization;
     constructor();
     subscribeToClassName(classNames: string, listener: VoidFunction): () => void;
     private scheduleInitialization;
     private cancelPendingInitialization;
+    private pruneStaleRules;
     private initialize;
     private isStyleRule;
     private isMediaRule;
+    private isSupportsRule;
     private collectParentMediaQueries;
     private addMediaQueriesDeep;
     private addMediaQuery;
+    private isRuleLive;
+    private toggleRule;
 }
 export declare const CSSListener: CSSListenerBuilder;
 export {};

package/dist/module/core/web/cssListener.js

@@ -1,9 +1,10 @@
 import { StyleDependency } from "../../types.js";
 import { UniwindListener } from "../listener.js";
 class CSSListenerBuilder {
+  activeRules = /* @__PURE__ */ new Set();
   classNameMediaQueryListeners = /* @__PURE__ */ new Map();
   listeners = /* @__PURE__ */ new Map();
-  registeredRules = /* @__PURE__ */ new Map();
+  registeredRulesMediaQueries = /* @__PURE__ */ new Map();
   processedStyleSheets = /* @__PURE__ */ new WeakSet();
   pendingInitialization = void 0;
   constructor() {
@@ -12,6 +13,17 @@ class CSSListenerBuilder {
     }
     const observer = new MutationObserver((mutations) => {
       for (const mutation of mutations) {
+        if (mutation.type === "attributes") {
+          const el = mutation.target;
+          if (!("sheet" in el)) {
+            continue;
+          }
+          const sheet = el.sheet;
+          if (sheet) {
+            this.processedStyleSheets.delete(sheet);
+          }
+          this.scheduleInitialization();
+        }
         if (mutation.type === "childList") {
           this.scheduleInitialization();
         }
@@ -65,8 +77,17 @@ class CSSListenerBuilder {
       this.pendingInitialization = void 0;
     }
   }
+  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);
+      }
+    }
+  }
   initialize() {
     this.pendingInitialization = void 0;
+    this.pruneStaleRules();
     for (const sheet of Array.from(document.styleSheets)) {
       if (this.processedStyleSheets.has(sheet)) {
         continue;
@@ -90,6 +111,9 @@ class CSSListenerBuilder {
   isMediaRule(rule) {
     return rule.constructor.name === "CSSMediaRule";
   }
+  isSupportsRule(rule) {
+    return rule.constructor.name === "CSSSupportsRule";
+  }
   collectParentMediaQueries(rule, acc = []) {
     const { parentRule } = rule;
     if (!parentRule) {
@@ -106,32 +130,60 @@ class CSSListenerBuilder {
     for (const rule of Array.from(rules)) {
       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);
         continue;
       }
     }
   }
-  addMediaQuery(mediaQueries, className) {
+  addMediaQuery(mediaQueries, rule) {
+    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, /* @__PURE__ */ 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);
     });
   }
+  isRuleLive(rule) {
+    const sheet = rule.parentStyleSheet;
+    return sheet !== null && Array.from(document.styleSheets).includes(sheet);
+  }
+  toggleRule(mqList, rule) {
+    if (mqList.matches && this.isRuleLive(rule)) {
+      this.activeRules.add(rule);
+    } else {
+      this.activeRules.delete(rule);
+    }
+  }
 }
 export const CSSListener = new CSSListenerBuilder();

package/dist/module/core/web/getWebStyles.js

@@ -1,3 +1,4 @@
+import { CSSListener } from "./cssListener.js";
 import { parseCSSValue } from "./parseCSSValue.js";
 const dummyParent = typeof document !== "undefined" ? Object.assign(document.createElement("div"), {
   style: "display: none"
@@ -7,28 +8,30 @@ if (dummyParent && dummy) {
   document.body.appendChild(dummyParent);
   dummyParent.appendChild(dummy);
 }
-const getComputedStyles = () => {
+const getActiveStylesForClass = (className) => {
+  const extractedStyles = {};
   if (!dummy) {
-    return {};
+    return extractedStyles;
   }
+  const classNames = className.split(/\s+/).filter(Boolean);
   const computedStyles = window.getComputedStyle(dummy);
-  const styles = {};
-  for (let i = 0; i < computedStyles.length; i++) {
-    const prop = computedStyles[i];
-    styles[prop] = computedStyles.getPropertyValue(prop);
-  }
-  return styles;
-};
-const initialStyles = typeof document !== "undefined" ? getComputedStyles() : {};
-const getObjectDifference = (obj1, obj2) => {
-  const diff = {};
-  const keys = Object.keys(obj2);
-  keys.forEach((key) => {
-    if (obj2[key] !== obj1[key]) {
-      diff[key] = obj2[key];
+  CSSListener.activeRules.forEach((rule) => {
+    const selector = rule.selectorText;
+    const mightMatch = classNames.some((cls) => selector.includes(`.${CSS.escape(cls)}`));
+    if (!mightMatch) {
+      return;
+    }
+    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 {
     }
   });
-  return diff;
+  return extractedStyles;
 };
 export const getWebStyles = (className, uniwindContext) => {
   if (className === void 0) {
@@ -43,7 +46,7 @@ export const getWebStyles = (className, uniwindContext) => {
     dummyParent?.removeAttribute("class");
   }
   dummy.className = className;
-  const computedStyles = getObjectDifference(initialStyles, getComputedStyles());
+  const computedStyles = getActiveStylesForClass(className);
   return Object.fromEntries(
     Object.entries(computedStyles).map(([key, value]) => {
       const parsedKey = key[0] === "-" ? key : key.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());

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

@@ -0,0 +1 @@
+export declare const EXTRA_UTILITIES_CSS: string;

package/dist/module/css/extraUtilities.js

@@ -0,0 +1,20 @@
+const toKebabCase = (str) => str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+const generateExtraUtilities = (map) => {
+  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"
+  }
+};
+export const EXTRA_UTILITIES_CSS = generateExtraUtilities(EXTRA_UTILITIES_MAP);

package/dist/module/css/index.js

@@ -1,20 +1,20 @@
 import fs from "fs";
 import path from "path";
-import { generateCSSForInsets } from "./insets.js";
-import { overwrite } from "./overwrite.js";
+import { EXTRA_UTILITIES_CSS } from "./extraUtilities.js";
+import { INSETS_CSS } from "./insets.js";
+import { OVERWRITE_CSS } from "./overwrite.js";
 import { generateCSSForThemes } from "./themes.js";
-import { generateCSSForVariants } from "./variants.js";
+import { VARIANTS_CSS } from "./variants.js";
 const dirname = typeof __dirname !== "undefined" ? __dirname : import.meta.dirname;
 export const buildCSS = async (themes, input) => {
-  const variants = generateCSSForVariants();
-  const insets = generateCSSForInsets();
   const themesCSS = await generateCSSForThemes(themes, input);
   const cssFilePath = path.join(dirname, "../../uniwind.css");
   const oldCSSFile = fs.existsSync(cssFilePath) ? fs.readFileSync(cssFilePath, "utf-8") : "";
   const newCssFile = [
-    variants,
-    insets,
-    overwrite,
+    VARIANTS_CSS,
+    INSETS_CSS,
+    OVERWRITE_CSS,
+    EXTRA_UTILITIES_CSS,
     themesCSS
   ].join("\n");
   if (oldCSSFile === newCssFile) {

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

@@ -1 +1 @@
-export declare const generateCSSForInsets: () => string;
+export declare const INSETS_CSS: string;

package/dist/module/css/insets.js

@@ -3,7 +3,7 @@ const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
 const safeAreaTypes = ["safe", "safe-or-*", "safe-offset-*"];
 const spacing = "--spacing(--value(integer))";
 const length = "--value([length], --spacing-*)";
-export const generateCSSForInsets = () => {
+const generateCSSForInsets = () => {
   let css = `@utility h-screen-safe {
     height: calc(100vh - (env(safe-area-inset-top) + env(safe-area-inset-bottom)));
 }
@@ -86,3 +86,4 @@ export const generateCSSForInsets = () => {
   });
   return css.slice(0, -1);
 };
+export const INSETS_CSS = generateCSSForInsets();

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

@@ -1 +1 @@
-export declare const overwrite = "@custom-variant disabled {\n    &:disabled {\n        @slot;\n    }\n\n    &[aria-disabled=\"true\"] {\n        @slot;\n    }\n\n    &[readonly] {\n        @slot;\n    }\n}\n";
+export declare const OVERWRITE_CSS = "@custom-variant disabled {\n    &:disabled {\n        @slot;\n    }\n\n    &[aria-disabled=\"true\"] {\n        @slot;\n    }\n\n    &[readonly] {\n        @slot;\n    }\n}\n";

package/dist/module/css/overwrite.js

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

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

@@ -1 +1 @@
-export declare const generateCSSForVariants: () => string;
+export declare const VARIANTS_CSS: string;

package/dist/module/css/variants.js

@@ -1,5 +1,5 @@
 const variants = ["ios", "android", "web", "native", "tv", "android-tv", "apple-tv"];
-export const generateCSSForVariants = () => {
+const generateCSSForVariants = () => {
   let css = "";
   variants.forEach((variant) => {
     css += `@custom-variant ${variant} (${variant === "web" ? "html &" : `@media ${variant}`});
@@ -7,3 +7,4 @@ export const generateCSSForVariants = () => {
   });
   return css;
 };
+export const VARIANTS_CSS = generateCSSForVariants();

package/dist/module/index.d.ts

@@ -1,5 +1,6 @@
 export * from './components/ScopedTheme';
 export { Uniwind } from './core';
+export type { ThemeName } from './core/types';
 export { withUniwind } from './hoc';
 export type { ApplyUniwind, ApplyUniwindOptions } from './hoc/types';
 export { useCSSVariable, useResolveClassNames, useUniwind } from './hooks';

package/dist/shared/{uniwind.DTMo4epG.cjs → uniwind.BZyFsest.cjs}

@@ -215,6 +215,27 @@ class UniwindCSSVisitor {
   StyleSheet;
 }
 
+const toKebabCase = (str) => str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+const generateExtraUtilities = (map) => {
+  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"
+  }
+};
+const EXTRA_UTILITIES_CSS = generateExtraUtilities(EXTRA_UTILITIES_MAP);
+
 const types = ["margin", "padding", "inset"];
 const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
 const safeAreaTypes = ["safe", "safe-or-*", "safe-offset-*"];
@@ -301,6 +322,7 @@ const generateCSSForInsets = () => {
   });
   return css.slice(0, -1);
 };
+const INSETS_CSS = generateCSSForInsets();
 
 const overwriteDisabled = `@custom-variant disabled {
     &:disabled {
@@ -316,7 +338,7 @@ const overwriteDisabled = `@custom-variant disabled {
     }
 }
 `;
-const overwrite = overwriteDisabled;
+const OVERWRITE_CSS = overwriteDisabled;
 
 const readFileSafe = (filePath) => {
   try {
@@ -440,18 +462,18 @@ const generateCSSForVariants = () => {
   });
   return css;
 };
+const VARIANTS_CSS = generateCSSForVariants();
 
 const dirname = typeof __dirname !== "undefined" ? __dirname : undefined;
 const buildCSS = async (themes, input) => {
-  const variants = generateCSSForVariants();
-  const insets = generateCSSForInsets();
   const themesCSS = await generateCSSForThemes(themes, input);
   const cssFilePath = path__default.join(dirname, "../../uniwind.css");
   const oldCSSFile = fs__default.existsSync(cssFilePath) ? fs__default.readFileSync(cssFilePath, "utf-8") : "";
   const newCssFile = [
-    variants,
-    insets,
-    overwrite,
+    VARIANTS_CSS,
+    INSETS_CSS,
+    OVERWRITE_CSS,
+    EXTRA_UTILITIES_CSS,
     themesCSS
   ].join("\n");
   if (oldCSSFile === newCssFile) {

package/dist/shared/{uniwind.BWb5KNML.mjs → uniwind.C-rHhHOg.mjs}

@@ -208,6 +208,27 @@ class UniwindCSSVisitor {
   StyleSheet;
 }
 
+const toKebabCase = (str) => str.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+const generateExtraUtilities = (map) => {
+  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"
+  }
+};
+const EXTRA_UTILITIES_CSS = generateExtraUtilities(EXTRA_UTILITIES_MAP);
+
 const types = ["margin", "padding", "inset"];
 const sides = ["inset", "x", "y", "top", "bottom", "left", "right"];
 const safeAreaTypes = ["safe", "safe-or-*", "safe-offset-*"];
@@ -294,6 +315,7 @@ const generateCSSForInsets = () => {
   });
   return css.slice(0, -1);
 };
+const INSETS_CSS = generateCSSForInsets();
 
 const overwriteDisabled = `@custom-variant disabled {
     &:disabled {
@@ -309,7 +331,7 @@ const overwriteDisabled = `@custom-variant disabled {
     }
 }
 `;
-const overwrite = overwriteDisabled;
+const OVERWRITE_CSS = overwriteDisabled;
 
 const readFileSafe = (filePath) => {
   try {
@@ -433,18 +455,18 @@ const generateCSSForVariants = () => {
   });
   return css;
 };
+const VARIANTS_CSS = generateCSSForVariants();
 
 const dirname = typeof __dirname !== "undefined" ? __dirname : import.meta.dirname;
 const buildCSS = async (themes, input) => {
-  const variants = generateCSSForVariants();
-  const insets = generateCSSForInsets();
   const themesCSS = await generateCSSForThemes(themes, input);
   const cssFilePath = path.join(dirname, "../../uniwind.css");
   const oldCSSFile = fs.existsSync(cssFilePath) ? fs.readFileSync(cssFilePath, "utf-8") : "";
   const newCssFile = [
-    variants,
-    insets,
-    overwrite,
+    VARIANTS_CSS,
+    INSETS_CSS,
+    OVERWRITE_CSS,
+    EXTRA_UTILITIES_CSS,
     themesCSS
   ].join("\n");
   if (oldCSSFile === newCssFile) {

package/dist/vite/index.cjs

@@ -3,7 +3,7 @@
 const node = require('@tailwindcss/node');
 const path = require('path');
 const common = require('../shared/uniwind.nl8746mK.cjs');
-const stringifyThemes = require('../shared/uniwind.DTMo4epG.cjs');
+const stringifyThemes = require('../shared/uniwind.BZyFsest.cjs');
 require('fs');
 require('lightningcss');
 

package/dist/vite/index.mjs

@@ -1,7 +1,7 @@
 import { normalizePath } from '@tailwindcss/node';
 import path from 'path';
 import { u as uniq, n as name } from '../shared/uniwind.F-0-Rr--.mjs';
-import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.BWb5KNML.mjs';
+import { s as stringifyThemes, U as UniwindCSSVisitor, a as buildCSS, b as buildDtsFile } from '../shared/uniwind.C-rHhHOg.mjs';
 import 'fs';
 import 'lightningcss';
 

package/package.json

@@ -1,7 +1,7 @@
 {
     "private": false,
     "name": "@niibase/uniwind",
-    "version": "1.5.0",
+    "version": "1.6.0",
     "description": "A fork of Uniwind with Reanimated 4 support",
     "homepage": "https://uniwind.dev",
     "author": "Unistack",
@@ -18,6 +18,7 @@
         "prepublishOnly": "bun run build",
         "circular:check": "dpdm --no-warning --no-tree -T --exit-code circular:1 'src/**/*.ts' 'src/**/*.tsx'",
         "build:css": "bun run src/css/index.ts",
+        "postinstall": "node scripts/postinstall.mjs",
         "test:native": "jest --config jest.config.native.js",
         "test:web": "jest --config jest.config.web.js",
         "test:e2e": "playwright test",
@@ -77,6 +78,7 @@
         "uniwind.css",
         "types.d.ts",
         "readme.md",
+        "CHANGELOG.md",
         "LICENSE"
     ],
     "dependencies": {
@@ -119,7 +121,7 @@
         "ts-jest": "29.4.6",
         "typescript": "catalog:",
         "unbuild": "3.6.1",
-        "vite": "7.3.1",
+        "vite": "catalog:",
         "esbuild": "0.27.3"
     }
 }

package/src/components/web/ActivityIndicator.tsx

@@ -1,6 +1,7 @@
 import { ActivityIndicator as RNActivityIndicator, ActivityIndicatorProps } from 'react-native'
 import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (props: ActivityIndicatorProps) => {
@@ -11,6 +12,7 @@ export const ActivityIndicator = copyComponentProperties(RNActivityIndicator, (p
             {...props}
             style={[toRNWClassName(props.className), props.style]}
             color={props.color ?? color}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/Button.tsx

@@ -1,6 +1,7 @@
 import { Button as RNButton, ButtonProps } from 'react-native'
 import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 
 export const Button = copyComponentProperties(RNButton, (props: ButtonProps) => {
     const color = useUniwindAccent(props.colorClassName)
@@ -9,6 +10,7 @@ export const Button = copyComponentProperties(RNButton, (props: ButtonProps) =>
         <RNButton
             {...props}
             color={props.color ?? color}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/FlatList.tsx

@@ -1,5 +1,6 @@
 import { FlatList as RNFlatList, FlatListProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const FlatList = copyComponentProperties(RNFlatList, (props: FlatListProps<unknown>) => {
@@ -13,6 +14,7 @@ export const FlatList = copyComponentProperties(RNFlatList, (props: FlatListProp
             contentContainerStyle={[toRNWClassName(props.contentContainerClassName), props.contentContainerStyle]}
             ListFooterComponentStyle={[toRNWClassName(props.ListFooterComponentClassName), props.ListFooterComponentStyle]}
             ListHeaderComponentStyle={[toRNWClassName(props.ListHeaderComponentClassName), props.ListHeaderComponentStyle]}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/Image.tsx

@@ -1,6 +1,7 @@
 import { Image as RNImage, ImageProps } from 'react-native'
 import { useResolveClassNames, useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const Image = copyComponentProperties(RNImage, (props: ImageProps) => {
@@ -18,6 +19,7 @@ export const Image = copyComponentProperties(RNImage, (props: ImageProps) => {
             {...props}
             style={[toRNWClassName(props.className), styleReset, props.style]}
             tintColor={props.tintColor ?? tintColor}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/ImageBackground.tsx

@@ -1,6 +1,7 @@
 import { ImageBackground as RNImageBackground, ImageBackgroundProps } from 'react-native'
 import { useUniwindAccent } from '../../hooks'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const ImageBackground = copyComponentProperties(RNImageBackground, (props: ImageBackgroundProps) => {
@@ -12,6 +13,7 @@ export const ImageBackground = copyComponentProperties(RNImageBackground, (props
             style={[toRNWClassName(props.className), props.style]}
             imageStyle={[toRNWClassName(props.imageClassName), props.imageStyle]}
             tintColor={props.tintColor ?? tintColor}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/KeyboardAvoidingView.tsx

@@ -1,5 +1,6 @@
 import { KeyboardAvoidingView as RNKeyboardAvoidingView, KeyboardAvoidingViewProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const KeyboardAvoidingView = copyComponentProperties(RNKeyboardAvoidingView, (props: KeyboardAvoidingViewProps) => {
@@ -8,6 +9,7 @@ export const KeyboardAvoidingView = copyComponentProperties(RNKeyboardAvoidingVi
             {...props}
             style={[toRNWClassName(props.className), props.style]}
             contentContainerStyle={[toRNWClassName(props.contentContainerClassName), props.contentContainerStyle]}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/Modal.tsx

@@ -1,5 +1,6 @@
 import { Modal as RNModal, ModalProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const Modal = copyComponentProperties(RNModal, (props: ModalProps) => {
@@ -7,6 +8,7 @@ export const Modal = copyComponentProperties(RNModal, (props: ModalProps) => {
         <RNModal
             {...props}
             style={[toRNWClassName(props.className), props.style]}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/Pressable.tsx

@@ -1,5 +1,6 @@
 import { Pressable as RNPressable, PressableProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const Pressable = copyComponentProperties(RNPressable, (props: PressableProps) => {
@@ -7,6 +8,7 @@ export const Pressable = copyComponentProperties(RNPressable, (props: PressableP
         <RNPressable
             {...props}
             style={state => [toRNWClassName(props.className), typeof props.style === 'function' ? props.style(state) : props.style]}
+            dataSet={generateDataSet(props)}
         />
     )
 })

package/src/components/web/RefreshControl.tsx

@@ -1,5 +1,6 @@
 import { RefreshControl as RNRefreshControl, RefreshControlProps } from 'react-native'
 import { copyComponentProperties } from '../utils'
+import { generateDataSet } from './generateDataSet'
 import { toRNWClassName } from './rnw'
 
 export const RefreshControl = copyComponentProperties(RNRefreshControl, (props: RefreshControlProps) => {
@@ -7,6 +8,7 @@ export const RefreshControl = copyComponentProperties(RNRefreshControl, (props:
         <RNRefreshControl
             {...props}
             style={[toRNWClassName(props.className), props.style]}
+            dataSet={generateDataSet(props)}
         />
     )
 })