react-native-unistyles 3.0.0-alpha.20 → 3.0.0-alpha.22

package/lib/commonjs/web/utils/unistyle.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.schemeToTheme = exports.isInDocument = exports.hexToRGBA = exports.getStyles = exports.getMediaQuery = exports.extractUnistyleDependencies = exports.extractSecrets = exports.extractMediaQueryValue = exports.assignSecrets = void 0;
+var _types = require("../../specs/types");
+var _mq = require("../mq");
+var _state = require("../state");
+var _common = require("./common");
+const schemeToTheme = scheme => {
+  switch (scheme) {
+    case _types.ColorScheme.Dark:
+      return 'dark';
+    case _types.ColorScheme.Light:
+    default:
+      return 'light';
+  }
+};
+exports.schemeToTheme = schemeToTheme;
+const hexToRGBA = (hex, opacity) => hex.replace('#', '').split(/(?=(?:..)*$)/).map(x => parseInt(x, 16)).filter(num => !isNaN(num)).reduce((acc, color) => `${acc}${color},`, 'rgba(').concat(`${opacity})`);
+exports.hexToRGBA = hexToRGBA;
+const assignSecrets = (object, secrets) => {
+  // @ts-expect-error - assign secrets to object
+  object[`__uni__secrets__${Math.random().toString(16).slice(2)}`] = secrets;
+  return object;
+};
+exports.assignSecrets = assignSecrets;
+const extractSecrets = object => {
+  const secrets = Object.entries(object).reduce((acc, [key, value]) => {
+    if (key.startsWith('__uni__secrets__')) {
+      acc.push(value);
+    }
+    return acc;
+  }, []);
+  return secrets;
+};
+exports.extractSecrets = extractSecrets;
+const getStyles = values => {
+  const returnValue = {};
+  Object.defineProperties(returnValue, (0, _common.reduceObject)(values, value => ({
+    value,
+    enumerable: false,
+    configurable: true
+  })));
+  return returnValue;
+};
+exports.getStyles = getStyles;
+const isInDocument = element => document.body.contains(element);
+exports.isInDocument = isInDocument;
+const extractMediaQueryValue = query => {
+  const [_, px] = query.match(/(\d+)px/) ?? [];
+  if (!px) {
+    return undefined;
+  }
+  const value = Number(px);
+  return isNaN(value) ? undefined : value;
+};
+exports.extractMediaQueryValue = extractMediaQueryValue;
+const getMediaQuery = query => {
+  if (Object.values(_types.Orientation).includes(query)) {
+    return `(orientation: ${query})`;
+  }
+  if ((0, _mq.isUnistylesMq)(query)) {
+    const {
+      minWidth,
+      maxWidth,
+      minHeight,
+      maxHeight
+    } = (0, _mq.parseMq)(query);
+    return [minWidth ? `(min-width: ${minWidth}px)` : undefined, maxWidth ? `(max-width: ${maxWidth}px)` : undefined, minHeight ? `(min-height: ${minHeight}px)` : undefined, maxHeight ? `(max-height: ${maxHeight}px)` : undefined].filter(Boolean).join(' and ');
+  }
+  const minWidth = _state.UnistylesState.breakpoints && (0, _common.keyInObject)(_state.UnistylesState.breakpoints, query) ? _state.UnistylesState.breakpoints[query] : undefined;
+  return `(min-width: ${minWidth ?? 0}px)`;
+};
+exports.getMediaQuery = getMediaQuery;
+const extractUnistyleDependencies = value => {
+  const dependencies = (0, _common.keyInObject)(value, 'uni__dependencies') ? value.uni__dependencies : [];
+  return dependencies;
+};
+exports.extractUnistyleDependencies = extractUnistyleDependencies;
+//# sourceMappingURL=unistyle.js.map

package/lib/commonjs/web/utils/unistyle.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_types","require","_mq","_state","_common","schemeToTheme","scheme","ColorScheme","Dark","Light","exports","hexToRGBA","hex","opacity","replace","split","map","x","parseInt","filter","num","isNaN","reduce","acc","color","concat","assignSecrets","object","secrets","Math","random","toString","slice","extractSecrets","Object","entries","key","value","startsWith","push","getStyles","values","returnValue","defineProperties","reduceObject","enumerable","configurable","isInDocument","element","document","body","contains","extractMediaQueryValue","query","_","px","match","undefined","Number","getMediaQuery","Orientation","includes","isUnistylesMq","minWidth","maxWidth","minHeight","maxHeight","parseMq","Boolean","join","UnistylesState","breakpoints","keyInObject","extractUnistyleDependencies","dependencies","uni__dependencies"],"sourceRoot":"../../../../src","sources":["web/utils/unistyle.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/web/convert/boxShadow.js

@@ -1,9 +1,7 @@
 "use strict";
 
-import { media } from 'typestyle';
 import { deepMergeObjects, warn } from '../utils';
 import { validateShadow } from './shadow';
-import { convertBreakpoint } from './breakpoint';
 import { BOX_SHADOW_STYLES } from './types';
 import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils';
 const createBoxShadowValue = style => {
@@ -53,17 +51,19 @@ export const getBoxShadowStyle = styles => {
     } = extractShadowValue('shadowOffset', breakpoint, styles);
     const radius = extractShadowValue('shadowRadius', breakpoint, styles);
     const opacity = extractShadowValue('shadowOpacity', breakpoint, styles);
-    return media(convertBreakpoint(breakpoint), {
-      boxShadow: createBoxShadowValue({
-        shadowColor: color,
-        shadowOffset: {
-          width,
-          height
-        },
-        shadowRadius: radius,
-        shadowOpacity: opacity
-      })
-    });
+    return {
+      [breakpoint]: {
+        boxShadow: createBoxShadowValue({
+          shadowColor: color,
+          shadowOffset: {
+            width,
+            height
+          },
+          shadowRadius: radius,
+          shadowOpacity: opacity
+        })
+      }
+    };
   });
 
   // Merge all breakpoints styles into one

package/lib/module/web/convert/boxShadow.js.map

@@ -1 +1 @@
-{"version":3,"names":["media","deepMergeObjects","warn","validateShadow","convertBreakpoint","BOX_SHADOW_STYLES","extractShadowValue","normalizeColor","normalizeNumericValue","createBoxShadowValue","style","shadowColor","shadowOffset","shadowOpacity","shadowRadius","offsetX","width","offsetY","height","radius","color","getBoxShadowStyle","styles","missingStyles","filter","key","length","join","breakpointsSet","Set","error","breakpoints","Array","from","boxShadow","breakpointStyles","map","breakpoint","opacity"],"sourceRoot":"../../../../src","sources":["web/convert/boxShadow.ts"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,WAAW;AAEjC,SAASC,gBAAgB,EAAEC,IAAI,QAAQ,UAAU;AACjD,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,iBAAiB,QAAQ,cAAc;AAChD,SAASC,iBAAiB,QAAwB,SAAS;AAC3D,SAASC,kBAAkB,EAAEC,cAAc,EAAEC,qBAAqB,QAAQ,SAAS;AAEnF,MAAMC,oBAAoB,GAAIC,KAAgB,IAAK;EAC/C;EACA,MAAM;IAAEC,WAAW;IAAEC,YAAY;IAAEC,aAAa;IAAEC;EAAa,CAAC,GAAGJ,KAAK;EACxE,MAAMK,OAAO,GAAGP,qBAAqB,CAACI,YAAY,CAACI,KAAK,CAAC;EACzD,MAAMC,OAAO,GAAGT,qBAAqB,CAACI,YAAY,CAACM,MAAM,CAAC;EAC1D,MAAMC,MAAM,GAAGX,qBAAqB,CAACM,YAAY,CAAC;EAClD,MAAMM,KAAK,GAAGb,cAAc,CAACI,WAAW,EAAYE,aAAuB,CAAC;EAE5E,OAAO,GAAGE,OAAO,IAAIE,OAAO,IAAIE,MAAM,IAAIC,KAAK,EAAE;AACrD,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAIC,MAA2B,IAA0B;EACnF,MAAMC,aAAa,GAAGlB,iBAAiB,CAACmB,MAAM,CAACC,GAAG,IAAI,EAAEA,GAAG,IAAIH,MAAM,CAAC,CAAC;EAEvE,IAAIC,aAAa,CAACG,MAAM,EAAE;IACtBxB,IAAI,CAAC,wDAAwDqB,aAAa,CAACI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;IAExF,OAAO,CAAC,CAAC;EACb;EAEA,MAAMC,cAAc,GAAG,IAAIC,GAAG,CAAS,CAAC;EAExC,IAAI;IACA1B,cAAc,CAACE,iBAAiB,EAAEiB,MAAM,EAAEM,cAAc,CAAC;EAC7D,CAAC,CAAC,OAAOE,KAAK,EAAE;IACZ,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC3B5B,IAAI,CAAC4B,KAAK,CAAC;IACf;IAEA,OAAO,CAAC,CAAC;EACb;EAEA,MAAMC,WAAW,GAAGC,KAAK,CAACC,IAAI,CAACL,cAAc,CAAC;;EAE9C;EACA,IAAIG,WAAW,CAACL,MAAM,KAAK,CAAC,EAAE;IAC1B,OAAO;MACHQ,SAAS,EAAEzB,oBAAoB,CAACa,MAAmB;IACvD,CAAC;EACL;;EAEA;EACA,MAAMa,gBAAgB,GAAGJ,WAAW,CAACK,GAAG,CAACC,UAAU,IAAI;IACnD,MAAMjB,KAAK,GAAGd,kBAAkB,CAAC,aAAa,EAAE+B,UAAU,EAAEf,MAAM,CAAC;IACnE,MAAM;MAAEN,KAAK;MAAEE;IAAO,CAAC,GAAGZ,kBAAkB,CAAC,cAAc,EAAE+B,UAAU,EAAEf,MAAM,CAAC;IAChF,MAAMH,MAAM,GAAGb,kBAAkB,CAAC,cAAc,EAAE+B,UAAU,EAAEf,MAAM,CAAC;IACrE,MAAMgB,OAAO,GAAGhC,kBAAkB,CAAC,eAAe,EAAE+B,UAAU,EAAEf,MAAM,CAAC;IAEvE,OAAOtB,KAAK,CAACI,iBAAiB,CAACiC,UAAU,CAAC,EAAE;MACxCH,SAAS,EAAEzB,oBAAoB,CAAC;QAC5BE,WAAW,EAAES,KAAK;QAClBR,YAAY,EAAE;UACVI,KAAK;UACLE;QACJ,CAAC;QACDJ,YAAY,EAAEK,MAAM;QACpBN,aAAa,EAAEyB;MACnB,CAAC;IACL,CAAC,CAAC;EACN,CAAC,CAAC;;EAEF;EACA,OAAOrC,gBAAgB,CAAC,GAAGkC,gBAAgB,CAAC;AAChD,CAAC","ignoreList":[]}
+{"version":3,"names":["deepMergeObjects","warn","validateShadow","BOX_SHADOW_STYLES","extractShadowValue","normalizeColor","normalizeNumericValue","createBoxShadowValue","style","shadowColor","shadowOffset","shadowOpacity","shadowRadius","offsetX","width","offsetY","height","radius","color","getBoxShadowStyle","styles","missingStyles","filter","key","length","join","breakpointsSet","Set","error","breakpoints","Array","from","boxShadow","breakpointStyles","map","breakpoint","opacity"],"sourceRoot":"../../../../src","sources":["web/convert/boxShadow.ts"],"mappings":";;AAAA,SAASA,gBAAgB,EAAEC,IAAI,QAAQ,UAAU;AACjD,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,iBAAiB,QAAwB,SAAS;AAC3D,SAASC,kBAAkB,EAAEC,cAAc,EAAEC,qBAAqB,QAAQ,SAAS;AAEnF,MAAMC,oBAAoB,GAAIC,KAAgB,IAAK;EAC/C;EACA,MAAM;IAAEC,WAAW;IAAEC,YAAY;IAAEC,aAAa;IAAEC;EAAa,CAAC,GAAGJ,KAAK;EACxE,MAAMK,OAAO,GAAGP,qBAAqB,CAACI,YAAY,CAACI,KAAK,CAAC;EACzD,MAAMC,OAAO,GAAGT,qBAAqB,CAACI,YAAY,CAACM,MAAM,CAAC;EAC1D,MAAMC,MAAM,GAAGX,qBAAqB,CAACM,YAAY,CAAC;EAClD,MAAMM,KAAK,GAAGb,cAAc,CAACI,WAAW,EAAYE,aAAuB,CAAC;EAE5E,OAAO,GAAGE,OAAO,IAAIE,OAAO,IAAIE,MAAM,IAAIC,KAAK,EAAE;AACrD,CAAC;AAED,OAAO,MAAMC,iBAAiB,GAAIC,MAA2B,IAAK;EAC9D,MAAMC,aAAa,GAAGlB,iBAAiB,CAACmB,MAAM,CAACC,GAAG,IAAI,EAAEA,GAAG,IAAIH,MAAM,CAAC,CAAC;EAEvE,IAAIC,aAAa,CAACG,MAAM,EAAE;IACtBvB,IAAI,CAAC,wDAAwDoB,aAAa,CAACI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;IAExF,OAAO,CAAC,CAAC;EACb;EAEA,MAAMC,cAAc,GAAG,IAAIC,GAAG,CAAS,CAAC;EAExC,IAAI;IACAzB,cAAc,CAACC,iBAAiB,EAAEiB,MAAM,EAAEM,cAAc,CAAC;EAC7D,CAAC,CAAC,OAAOE,KAAK,EAAE;IACZ,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC3B3B,IAAI,CAAC2B,KAAK,CAAC;IACf;IAEA,OAAO,CAAC,CAAC;EACb;EAEA,MAAMC,WAAW,GAAGC,KAAK,CAACC,IAAI,CAACL,cAAc,CAAC;;EAE9C;EACA,IAAIG,WAAW,CAACL,MAAM,KAAK,CAAC,EAAE;IAC1B,OAAO;MACHQ,SAAS,EAAEzB,oBAAoB,CAACa,MAAmB;IACvD,CAAC;EACL;;EAEA;EACA,MAAMa,gBAAgB,GAAGJ,WAAW,CAACK,GAAG,CAACC,UAAU,IAAI;IACnD,MAAMjB,KAAK,GAAGd,kBAAkB,CAAC,aAAa,EAAE+B,UAAU,EAAEf,MAAM,CAAC;IACnE,MAAM;MAAEN,KAAK;MAAEE;IAAO,CAAC,GAAGZ,kBAAkB,CAAC,cAAc,EAAE+B,UAAU,EAAEf,MAAM,CAAC;IAChF,MAAMH,MAAM,GAAGb,kBAAkB,CAAC,cAAc,EAAE+B,UAAU,EAAEf,MAAM,CAAC;IACrE,MAAMgB,OAAO,GAAGhC,kBAAkB,CAAC,eAAe,EAAE+B,UAAU,EAAEf,MAAM,CAAC;IAEvE,OAAO;MACH,CAACe,UAAU,GAAG;QACVH,SAAS,EAAEzB,oBAAoB,CAAC;UAC5BE,WAAW,EAAES,KAAK;UAClBR,YAAY,EAAE;YACVI,KAAK;YACLE;UACJ,CAAC;UACDJ,YAAY,EAAEK,MAAM;UACpBN,aAAa,EAAEyB;QACnB,CAAC;MACL;IACJ,CAAC;EACL,CAAC,CAAC;;EAEF;EACA,OAAOpC,gBAAgB,CAAC,GAAGiC,gBAAgB,CAAC;AAChD,CAAC","ignoreList":[]}

package/lib/module/web/convert/index.js

@@ -1,15 +1,13 @@
 "use strict";
 
-import { media } from 'typestyle';
-import { isPseudo } from '../pseudo';
-import { convertBreakpoint } from './breakpoint';
+import { isPseudo } from './pseudo';
 import { getStyle } from './style';
 import { deepMergeObjects } from '../utils';
 import { getTransformStyle } from './transform';
 import { isBoxShadow, isTextShadow, isTransform } from './utils';
 import { getTextShadowStyle } from './textShadow';
 import { getBoxShadowStyle } from './boxShadow';
-export const convertToTypeStyle = value => {
+export const convertUnistyles = value => {
   // Flag to mark if textShadow is already created
   let hasTextShadow = false;
   // Flag to mark if boxShadow is already created
@@ -25,11 +23,9 @@ export const convertToTypeStyle = value => {
 
     // Pseudo classes :hover, :before etc.
     if (isPseudo(unistylesKey)) {
-      const typestyleValues = convertToTypeStyle(unistylesValue);
+      const flattenValues = convertUnistyles(unistylesValue);
       return {
-        $nest: {
-          [unistylesKey.replace('_', '&:')]: typestyleValues
-        }
+        [unistylesKey]: flattenValues
       };
     }
 
@@ -59,7 +55,9 @@ export const convertToTypeStyle = value => {
     // Breakpoints
     if (typeof unistylesValue === 'object' && unistylesValue !== null) {
       return Object.entries(unistylesValue).map(([breakpointKey, breakpointValue]) => {
-        return media(convertBreakpoint(breakpointKey), getStyle(unistylesKey, breakpointValue));
+        return {
+          [breakpointKey]: getStyle(unistylesKey, breakpointValue)
+        };
       });
     }
 

package/lib/module/web/convert/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["media","isPseudo","convertBreakpoint","getStyle","deepMergeObjects","getTransformStyle","isBoxShadow","isTextShadow","isTransform","getTextShadowStyle","getBoxShadowStyle","convertToTypeStyle","value","hasTextShadow","hasBoxShadow","stylesArray","Object","entries","_web","flatMap","unistylesKey","unistylesValue","includes","startsWith","typestyleValues","$nest","replace","map","breakpointKey","breakpointValue"],"sourceRoot":"../../../../src","sources":["web/convert/index.ts"],"mappings":";;AAEA,SAASA,KAAK,QAAQ,WAAW;AACjC,SAASC,QAAQ,QAAQ,WAAW;AACpC,SAASC,iBAAiB,QAAQ,cAAc;AAChD,SAASC,QAAQ,QAAQ,SAAS;AAClC,SAASC,gBAAgB,QAAQ,UAAU;AAC3C,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,SAAS;AAChE,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,iBAAiB,QAAQ,aAAa;AAE/C,OAAO,MAAMC,kBAAkB,GAAIC,KAAsB,IAAK;EAC1D;EACA,IAAIC,aAAa,GAAG,KAAK;EACzB;EACA,IAAIC,YAAY,GAAG,KAAK;EAExB,MAAMC,WAAW,GAAGC,MAAM,CAACC,OAAO,CAAC;IAC/B,GAAGL,KAAK;IACR,GAAGA,KAAK,CAACM;EACb,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC,CAACC,YAAY,EAAEC,cAAc,CAAC,KAAK;IAC3C;IACA,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,uBAAuB,CAAC,CAACC,QAAQ,CAACF,YAAY,CAAC,IAAIA,YAAY,CAACG,UAAU,CAAC,UAAU,CAAC,EAAE;MACrK,OAAO,EAAE;IACb;;IAEA;IACA,IAAItB,QAAQ,CAACmB,YAAY,CAAC,EAAE;MACxB,MAAMI,eAAe,GAAGb,kBAAkB,CAACU,cAAiC,CAAC;MAE7E,OAAO;QACHI,KAAK,EAAE;UACH,CAACL,YAAY,CAACM,OAAO,CAAC,GAAG,EAAE,IAAI,CAAC,GAAGF;QACvC;MACJ,CAAC;IACL;;IAEA;IACA,IAAIjB,YAAY,CAACa,YAAY,CAAC,EAAE;MAC5B,IAAIP,aAAa,EAAE;QACf,OAAO,EAAE;MACb;MAEAA,aAAa,GAAG,IAAI;MAEpB,OAAOJ,kBAAkB,CAACG,KAAK,CAAC;IACpC;;IAEA;IACA,IAAIN,WAAW,CAACc,YAAY,CAAC,EAAE;MAC3B,IAAIN,YAAY,EAAE;QACd,OAAO,EAAE;MACb;MAEAA,YAAY,GAAG,IAAI;MAEnB,OAAOJ,iBAAiB,CAACE,KAAK,CAAC;IACnC;;IAEA;IACA,IAAIJ,WAAW,CAACY,YAAY,EAAEC,cAAc,CAAC,EAAE;MAC3C,OAAOhB,iBAAiB,CAACgB,cAAc,CAAC;IAC5C;;IAEA;IACA,IAAI,OAAOA,cAAc,KAAK,QAAQ,IAAIA,cAAc,KAAK,IAAI,EAAE;MAC/D,OAAOL,MAAM,CAACC,OAAO,CAACI,cAAc,CAAC,CAACM,GAAG,CAAC,CAAC,CAACC,aAAa,EAAEC,eAAe,CAAC,KAAK;QAC5E,OAAO7B,KAAK,CAACE,iBAAiB,CAAC0B,aAAa,CAAC,EAAEzB,QAAQ,CAACiB,YAAY,EAAES,eAAe,CAAC,CAAC;MAC3F,CAAC,CAAC;IACN;;IAEA;IACA,OAAO1B,QAAQ,CAACiB,YAAY,EAAEC,cAAc,CAAC;EACjD,CAAC,CAA+B;EAEhC,OAAOjB,gBAAgB,CAAC,GAAGW,WAAW,CAAC;AAC3C,CAAC","ignoreList":[]}
+{"version":3,"names":["isPseudo","getStyle","deepMergeObjects","getTransformStyle","isBoxShadow","isTextShadow","isTransform","getTextShadowStyle","getBoxShadowStyle","convertUnistyles","value","hasTextShadow","hasBoxShadow","stylesArray","Object","entries","_web","flatMap","unistylesKey","unistylesValue","includes","startsWith","flattenValues","map","breakpointKey","breakpointValue"],"sourceRoot":"../../../../src","sources":["web/convert/index.ts"],"mappings":";;AACA,SAASA,QAAQ,QAAQ,UAAU;AACnC,SAASC,QAAQ,QAAQ,SAAS;AAClC,SAASC,gBAAgB,QAAQ,UAAU;AAC3C,SAASC,iBAAiB,QAAQ,aAAa;AAC/C,SAASC,WAAW,EAAEC,YAAY,EAAEC,WAAW,QAAQ,SAAS;AAChE,SAASC,kBAAkB,QAAQ,cAAc;AACjD,SAASC,iBAAiB,QAAQ,aAAa;AAE/C,OAAO,MAAMC,gBAAgB,GAAIC,KAAsB,IAAK;EACxD;EACA,IAAIC,aAAa,GAAG,KAAK;EACzB;EACA,IAAIC,YAAY,GAAG,KAAK;EAExB,MAAMC,WAAW,GAAGC,MAAM,CAACC,OAAO,CAAC;IAC/B,GAAGL,KAAK;IACR,GAAGA,KAAK,CAACM;EACb,CAAC,CAAC,CAACC,OAAO,CAAC,CAAC,CAACC,YAAY,EAAEC,cAAc,CAAC,KAAK;IAC3C;IACA,IAAI,CAAC,aAAa,EAAE,MAAM,EAAE,UAAU,EAAE,kBAAkB,EAAE,mBAAmB,EAAE,uBAAuB,CAAC,CAACC,QAAQ,CAACF,YAAY,CAAC,IAAIA,YAAY,CAACG,UAAU,CAAC,UAAU,CAAC,EAAE;MACrK,OAAO,EAAE;IACb;;IAEA;IACA,IAAIrB,QAAQ,CAACkB,YAAY,CAAC,EAAE;MACxB,MAAMI,aAAa,GAAGb,gBAAgB,CAACU,cAAiC,CAAC;MAEzE,OAAO;QAAE,CAACD,YAAY,GAAGI;MAAc,CAAC;IAC5C;;IAEA;IACA,IAAIjB,YAAY,CAACa,YAAY,CAAC,EAAE;MAC5B,IAAIP,aAAa,EAAE;QACf,OAAO,EAAE;MACb;MAEAA,aAAa,GAAG,IAAI;MAEpB,OAAOJ,kBAAkB,CAACG,KAAK,CAAC;IACpC;;IAEA;IACA,IAAIN,WAAW,CAACc,YAAY,CAAC,EAAE;MAC3B,IAAIN,YAAY,EAAE;QACd,OAAO,EAAE;MACb;MAEAA,YAAY,GAAG,IAAI;MAEnB,OAAOJ,iBAAiB,CAACE,KAAK,CAAC;IACnC;;IAEA;IACA,IAAIJ,WAAW,CAACY,YAAY,EAAEC,cAAc,CAAC,EAAE;MAC3C,OAAOhB,iBAAiB,CAACgB,cAAc,CAAC;IAC5C;;IAEA;IACA,IAAI,OAAOA,cAAc,KAAK,QAAQ,IAAIA,cAAc,KAAK,IAAI,EAAE;MAC/D,OAAOL,MAAM,CAACC,OAAO,CAACI,cAAc,CAAC,CAACI,GAAG,CAAC,CAAC,CAACC,aAAa,EAAEC,eAAe,CAAC,KAAK;QAC5E,OAAO;UAAE,CAACD,aAAa,GAAGvB,QAAQ,CAACiB,YAAY,EAAEO,eAAe;QAAE,CAAC;MACvE,CAAC,CAAC;IACN;;IAEA;IACA,OAAOxB,QAAQ,CAACiB,YAAY,EAAEC,cAAc,CAAC;EACjD,CAAC,CAA+B;EAEhC,OAAOjB,gBAAgB,CAAC,GAAGW,WAAW,CAAC;AAC3C,CAAC","ignoreList":[]}

package/lib/module/web/convert/pseudo.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["pseudos","isPseudo","selector","some","pseudo","startsWith"],"sourceRoot":"../../../../src","sources":["web/convert/pseudo.ts"],"mappings":";;AAAA,OAAO,MAAMA,OAAO,GAAG,CACnB,cAAc,EACd,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EACvB,uBAAuB,EACvB,wBAAwB,EACxB,iBAAiB,EACjB,eAAe,EACf,uBAAuB,EACvB,uBAAuB,EACvB,uBAAuB,EACvB,sBAAsB,EACtB,kBAAkB,EAClB,qBAAqB,EACrB,uBAAuB,EACvB,SAAS,EACT,WAAW,EACX,WAAW,EACX,QAAQ,EACR,YAAY,EACZ,UAAU,EACV,UAAU,EACV,UAAU,EACV,UAAU,EACV,OAAO,EACP,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,cAAc,EACd,gBAAgB,EAChB,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,SAAS,EACT,OAAO,EACP,OAAO,EACP,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,gBAAgB,EAChB,UAAU,EACV,MAAM,EACN,QAAQ,EACR,aAAa,EACb,eAAe,EACf,OAAO,EACP,OAAO,EACP,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,aAAa,EACb,kBAAkB,EAClB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,eAAe,EACf,WAAW,EACX,eAAe,EACf,OAAO,EACP,SAAS,EACT,qBAAqB,EACrB,oBAAoB,EACpB,UAAU,EACV,eAAe,EACf,YAAY,EACZ,aAAa,EACb,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,UAAU,EACV,SAAS,EACT,SAAS,EACT,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,QAAQ,EACR,UAAU,EACV,gBAAgB,EAChB,SAAS,EACT,oBAAoB,EACpB,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,iBAAiB,EACjB,oBAAoB,EACpB,sBAAsB,EACtB,mBAAmB,EACnB,mBAAmB,EACnB,4BAA4B,EAC5B,8BAA8B,EAC9B,qCAAqC,EACrC,8BAA8B,EAC9B,8BAA8B,EAC9B,iCAAiC,EACjC,uBAAuB,EACvB,iCAAiC,EACjC,yBAAyB,EACzB,oBAAoB,EACpB,+BAA+B,EAC/B,gCAAgC,EAChC,gCAAgC,EAChC,uBAAuB,EACvB,QAAQ,EACR,WAAW,EACX,SAAS,EACT,MAAM,EACN,uBAAuB,EACvB,eAAe,EACf,aAAa,EACb,gBAAgB,EAChB,aAAa,EACb,SAAS,EACT,QAAQ,EACR,cAAc,EACd,YAAY,EACZ,WAAW,EACX,iBAAiB,EACjB,cAAc,EACd,kBAAkB,EAClB,wBAAwB,EACxB,6BAA6B,EAC7B,sBAAsB,EACtB,sBAAsB,CAChB;AAEV,OAAO,MAAMC,QAAQ,GAAIC,QAAgB,IAAKF,OAAO,CAACG,IAAI,CAACC,MAAM,IAAIF,QAAQ,CAACG,UAAU,CAACD,MAAM,CAAC,CAAC","ignoreList":[]}

package/lib/module/web/convert/style.js

@@ -1,7 +1,8 @@
 "use strict";
 
 import { keyInObject } from '../utils';
-const stylesToSkip = ['borderCurve', 'elevation', 'textAlignVertical', 'includeFontPadding', 'overlayColor', 'tintColor'];
+const SKIP_STYLES = ['borderCurve', 'elevation', 'textAlignVertical', 'includeFontPadding', 'overlayColor', 'tintColor'];
+const CSS_NUMBER_KEYS = ['animationIterationCount', 'borderImageOutset', 'borderImageSlice', 'borderImageWidth', 'boxFlex', 'boxFlexGroup', 'boxOrdinalGroup', 'columnCount', 'columns', 'counterIncrement', 'counterReset', 'flex', 'flexGrow', 'flexPositive', 'flexShrink', 'flexNegative', 'flexOrder', 'fontWeight', 'gridArea', 'gridColumn', 'gridColumnEnd', 'gridColumnSpan', 'gridColumnStart', 'gridRow', 'gridRowEnd', 'gridRowSpan', 'gridRowStart', 'line-clamp', 'line-height', 'opacity', 'order', 'orphans', 'tabSize', 'widows', 'zIndex', 'zoom', 'fillOpacity', 'floodOpacity', 'stopOpacity', 'strokeDasharray', 'strokeDashoffset', 'strokeMiterlimit', 'strokeOpacity', 'strokeWidth'];
 const convertMap = {
   marginHorizontal: value => ({
     marginInline: value
@@ -65,20 +66,23 @@ const convertMap = {
   }),
   resizeMode: value => ({
     backgroundSize: value
-  }),
-  lineHeight: value => ({
-    lineHeight: `${value}px`
   })
 };
+const convertNumber = (key, value) => {
+  if (typeof value === 'number') {
+    return CSS_NUMBER_KEYS.includes(key, value) ? value : `${value}px`;
+  }
+  return value;
+};
 export const getStyle = (key, value) => {
-  if (stylesToSkip.includes(key)) {
+  if (SKIP_STYLES.includes(key)) {
     return {};
   }
   if (keyInObject(convertMap, key)) {
-    return convertMap[key]?.(value) ?? {};
+    return convertMap[key]?.(convertNumber(key, value)) ?? {};
   }
   return {
-    [key]: value
+    [key]: convertNumber(key, value)
   };
 };
 //# sourceMappingURL=style.js.map

package/lib/module/web/convert/style.js.map

@@ -1 +1 @@
-{"version":3,"names":["keyInObject","stylesToSkip","convertMap","marginHorizontal","value","marginInline","marginVertical","marginBlock","paddingHorizontal","paddingInline","paddingVertical","paddingBlock","writingDirection","direction","borderBottomEndRadius","borderBottomRightRadius","borderBottomStartRadius","borderBottomLeftRadius","borderEndColor","borderInlineEndColor","borderStartColor","borderInlineStartColor","borderTopEndRadius","borderTopRightRadius","borderTopStartRadius","borderTopLeftRadius","borderEndWidth","borderInlineEndWidth","borderStartWidth","borderInlineStartWidth","end","right","start","left","marginEnd","marginRight","marginStart","marginLeft","paddingEnd","paddingRight","paddingStart","paddingLeft","transformMatrix","transform","join","resizeMode","backgroundSize","lineHeight","getStyle","key","includes"],"sourceRoot":"../../../../src","sources":["web/convert/style.ts"],"mappings":";;AAAA,SAASA,WAAW,QAAQ,UAAU;AAGtC,MAAMC,YAAY,GAAG,CACjB,aAAa,EACb,WAAW,EACX,mBAAmB,EACnB,oBAAoB,EACpB,cAAc,EACd,WAAW,CACd;AAED,MAAMC,UAAU,GAAG;EACfC,gBAAgB,EAAGC,KAAa,KAAM;IAClCC,YAAY,EAAED;EAClB,CAAC,CAAC;EACFE,cAAc,EAAGF,KAAa,KAAM;IAChCG,WAAW,EAAEH;EACjB,CAAC,CAAC;EACFI,iBAAiB,EAAGJ,KAAa,KAAM;IACnCK,aAAa,EAAEL;EACnB,CAAC,CAAC;EACFM,eAAe,EAAGN,KAAa,KAAM;IACjCO,YAAY,EAAEP;EAClB,CAAC,CAAC;EACFQ,gBAAgB,EAAGR,KAAa,KAAM;IAClCS,SAAS,EAAET;EACf,CAAC,CAAC;EACFU,qBAAqB,EAAGV,KAAa,KAAM;IACvCW,uBAAuB,EAAEX;EAC7B,CAAC,CAAC;EACFY,uBAAuB,EAAGZ,KAAa,KAAM;IACzCa,sBAAsB,EAAEb;EAC5B,CAAC,CAAC;EACFc,cAAc,EAAGd,KAAa,KAAM;IAChCe,oBAAoB,EAAEf;EAC1B,CAAC,CAAC;EACFgB,gBAAgB,EAAGhB,KAAa,KAAM;IAClCiB,sBAAsB,EAAEjB;EAC5B,CAAC,CAAC;EACFkB,kBAAkB,EAAGlB,KAAa,KAAM;IACpCmB,oBAAoB,EAAEnB;EAC1B,CAAC,CAAC;EACFoB,oBAAoB,EAAGpB,KAAa,KAAM;IACtCqB,mBAAmB,EAAErB;EACzB,CAAC,CAAC;EACFsB,cAAc,EAAGtB,KAAa,KAAM;IAChCuB,oBAAoB,EAAEvB;EAC1B,CAAC,CAAC;EACFwB,gBAAgB,EAAGxB,KAAa,KAAM;IAClCyB,sBAAsB,EAAEzB;EAC5B,CAAC,CAAC;EACF0B,GAAG,EAAG1B,KAAa,KAAM;IACrB2B,KAAK,EAAE3B;EACX,CAAC,CAAC;EACF4B,KAAK,EAAG5B,KAAa,KAAM;IACvB6B,IAAI,EAAE7B;EACV,CAAC,CAAC;EACF8B,SAAS,EAAG9B,KAAa,KAAM;IAC3B+B,WAAW,EAAE/B;EACjB,CAAC,CAAC;EACFgC,WAAW,EAAGhC,KAAa,KAAM;IAC7BiC,UAAU,EAAEjC;EAChB,CAAC,CAAC;EACFkC,UAAU,EAAGlC,KAAa,KAAM;IAC5BmC,YAAY,EAAEnC;EAClB,CAAC,CAAC;EACFoC,YAAY,EAAGpC,KAAa,KAAM;IAC9BqC,WAAW,EAAErC;EACjB,CAAC,CAAC;EACFsC,eAAe,EAAGtC,KAAoB,KAAM;IACxCuC,SAAS,EAAE,UAAUvC,KAAK,CAACwC,IAAI,CAAC,IAAI,CAAC;EACzC,CAAC,CAAC;EACFC,UAAU,EAAGzC,KAAa,KAAM;IAC5B0C,cAAc,EAAE1C;EACpB,CAAC,CAAC;EACF2C,UAAU,EAAG3C,KAAa,KAAM;IAC5B2C,UAAU,EAAE,GAAG3C,KAAK;EACxB,CAAC;AACL,CAA6D;AAE7D,OAAO,MAAM4C,QAAQ,GAAGA,CAACC,GAAW,EAAE7C,KAAU,KAAK;EACjD,IAAIH,YAAY,CAACiD,QAAQ,CAACD,GAAG,CAAC,EAAE;IAC5B,OAAO,CAAC,CAAC;EACb;EAEA,IAAIjD,WAAW,CAACE,UAAU,EAAE+C,GAAG,CAAC,EAAE;IAC9B,OAAO/C,UAAU,CAAC+C,GAAG,CAAC,GAAG7C,KAAK,CAAC,IAAI,CAAC,CAAC;EACzC;EAEA,OAAO;IACH,CAAC6C,GAAG,GAAG7C;EACX,CAAC;AACL,CAAC","ignoreList":[]}
+{"version":3,"names":["keyInObject","SKIP_STYLES","CSS_NUMBER_KEYS","convertMap","marginHorizontal","value","marginInline","marginVertical","marginBlock","paddingHorizontal","paddingInline","paddingVertical","paddingBlock","writingDirection","direction","borderBottomEndRadius","borderBottomRightRadius","borderBottomStartRadius","borderBottomLeftRadius","borderEndColor","borderInlineEndColor","borderStartColor","borderInlineStartColor","borderTopEndRadius","borderTopRightRadius","borderTopStartRadius","borderTopLeftRadius","borderEndWidth","borderInlineEndWidth","borderStartWidth","borderInlineStartWidth","end","right","start","left","marginEnd","marginRight","marginStart","marginLeft","paddingEnd","paddingRight","paddingStart","paddingLeft","transformMatrix","transform","join","resizeMode","backgroundSize","convertNumber","key","includes","getStyle"],"sourceRoot":"../../../../src","sources":["web/convert/style.ts"],"mappings":"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","ignoreList":[]}

package/lib/module/web/convert/textShadow.js

@@ -1,9 +1,7 @@
 "use strict";
 
-import { media } from 'typestyle';
 import { deepMergeObjects, warn } from '../utils';
 import { validateShadow } from './shadow';
-import { convertBreakpoint } from './breakpoint';
 import { TEXT_SHADOW_STYLES } from './types';
 import { extractShadowValue, normalizeColor, normalizeNumericValue } from './utils';
 const createTextShadowValue = style => {
@@ -50,16 +48,18 @@ export const getTextShadowStyle = styles => {
       height
     } = extractShadowValue('textShadowOffset', breakpoint, styles);
     const radius = extractShadowValue('textShadowRadius', breakpoint, styles);
-    return media(convertBreakpoint(breakpoint), {
-      textShadow: createTextShadowValue({
-        textShadowColor: color,
-        textShadowOffset: {
-          width,
-          height
-        },
-        textShadowRadius: radius
-      })
-    });
+    return {
+      [breakpoint]: {
+        textShadow: createTextShadowValue({
+          textShadowColor: color,
+          textShadowOffset: {
+            width,
+            height
+          },
+          textShadowRadius: radius
+        })
+      }
+    };
   });
 
   // Merge all breakpoints styles into one

package/lib/module/web/convert/textShadow.js.map

@@ -1 +1 @@
-{"version":3,"names":["media","deepMergeObjects","warn","validateShadow","convertBreakpoint","TEXT_SHADOW_STYLES","extractShadowValue","normalizeColor","normalizeNumericValue","createTextShadowValue","style","textShadowColor","textShadowOffset","textShadowRadius","offsetX","width","offsetY","height","radius","color","getTextShadowStyle","styles","missingStyles","filter","key","length","join","breakpointsSet","Set","error","breakpoints","Array","from","textShadow","breakpointStyles","map","breakpoint"],"sourceRoot":"../../../../src","sources":["web/convert/textShadow.ts"],"mappings":";;AAAA,SAASA,KAAK,QAAQ,WAAW;AAEjC,SAASC,gBAAgB,EAAEC,IAAI,QAAQ,UAAU;AACjD,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,iBAAiB,QAAQ,cAAc;AAChD,SAASC,kBAAkB,QAAyB,SAAS;AAC7D,SAASC,kBAAkB,EAAEC,cAAc,EAAEC,qBAAqB,QAAQ,SAAS;AAEnF,MAAMC,qBAAqB,GAAIC,KAAiB,IAAK;EACjD,MAAM;IAAEC,eAAe;IAAEC,gBAAgB;IAAEC;EAAiB,CAAC,GAAGH,KAAK;EACrE,MAAMI,OAAO,GAAGN,qBAAqB,CAACI,gBAAgB,CAACG,KAAK,CAAC;EAC7D,MAAMC,OAAO,GAAGR,qBAAqB,CAACI,gBAAgB,CAACK,MAAM,CAAC;EAC9D,MAAMC,MAAM,GAAGV,qBAAqB,CAACK,gBAAgB,CAAC;EACtD,MAAMM,KAAK,GAAGZ,cAAc,CAACI,eAAyB,CAAC;EAEvD,OAAO,GAAGG,OAAO,IAAIE,OAAO,IAAIE,MAAM,IAAIC,KAAK,EAAE;AACrD,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAIC,MAA2B,IAA0B;EACpF,MAAMC,aAAa,GAAGjB,kBAAkB,CAACkB,MAAM,CAACC,GAAG,IAAI,EAAEA,GAAG,IAAIH,MAAM,CAAC,CAAC;EAExE,IAAIC,aAAa,CAACG,MAAM,EAAE;IACtBvB,IAAI,CAAC,yDAAyDoB,aAAa,CAACI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;IAEzF,OAAO,CAAC,CAAC;EACb;EAEA,MAAMC,cAAc,GAAG,IAAIC,GAAG,CAAS,CAAC;EAExC,IAAI;IACAzB,cAAc,CAACE,kBAAkB,EAAEgB,MAAM,EAAEM,cAAc,CAAC;EAC9D,CAAC,CAAC,OAAOE,KAAK,EAAE;IACZ,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC3B3B,IAAI,CAAC2B,KAAK,CAAC;IACf;IAEA,OAAO,CAAC,CAAC;EACb;EAEA,MAAMC,WAAW,GAAGC,KAAK,CAACC,IAAI,CAACL,cAAc,CAAC;;EAE9C;EACA,IAAIG,WAAW,CAACL,MAAM,KAAK,CAAC,EAAE;IAC1B,OAAO;MACHQ,UAAU,EAAExB,qBAAqB,CAACY,MAAoB;IAC1D,CAAC;EACL;;EAEA;EACA,MAAMa,gBAAgB,GAAGJ,WAAW,CAACK,GAAG,CAACC,UAAU,IAAI;IACnD,MAAMjB,KAAK,GAAGb,kBAAkB,CAAC,iBAAiB,EAAE8B,UAAU,EAAEf,MAAM,CAAC;IACvE,MAAM;MAAEN,KAAK;MAAEE;IAAO,CAAC,GAAGX,kBAAkB,CAAC,kBAAkB,EAAE8B,UAAU,EAAEf,MAAM,CAAC;IACpF,MAAMH,MAAM,GAAGZ,kBAAkB,CAAC,kBAAkB,EAAE8B,UAAU,EAAEf,MAAM,CAAC;IAEzE,OAAOrB,KAAK,CAACI,iBAAiB,CAACgC,UAAU,CAAC,EAAE;MACxCH,UAAU,EAAExB,qBAAqB,CAAC;QAC9BE,eAAe,EAAEQ,KAAK;QACtBP,gBAAgB,EAAE;UACdG,KAAK;UACLE;QACJ,CAAC;QACDJ,gBAAgB,EAAEK;MACtB,CAAC;IACL,CAAC,CAAC;EACN,CAAC,CAAC;;EAEF;EACA,OAAOjB,gBAAgB,CAAC,GAAGiC,gBAAgB,CAAC;AAChD,CAAC","ignoreList":[]}
+{"version":3,"names":["deepMergeObjects","warn","validateShadow","TEXT_SHADOW_STYLES","extractShadowValue","normalizeColor","normalizeNumericValue","createTextShadowValue","style","textShadowColor","textShadowOffset","textShadowRadius","offsetX","width","offsetY","height","radius","color","getTextShadowStyle","styles","missingStyles","filter","key","length","join","breakpointsSet","Set","error","breakpoints","Array","from","textShadow","breakpointStyles","map","breakpoint"],"sourceRoot":"../../../../src","sources":["web/convert/textShadow.ts"],"mappings":";;AAAA,SAASA,gBAAgB,EAAEC,IAAI,QAAQ,UAAU;AACjD,SAASC,cAAc,QAAQ,UAAU;AACzC,SAASC,kBAAkB,QAAyB,SAAS;AAC7D,SAASC,kBAAkB,EAAEC,cAAc,EAAEC,qBAAqB,QAAQ,SAAS;AAEnF,MAAMC,qBAAqB,GAAIC,KAAiB,IAAK;EACjD,MAAM;IAAEC,eAAe;IAAEC,gBAAgB;IAAEC;EAAiB,CAAC,GAAGH,KAAK;EACrE,MAAMI,OAAO,GAAGN,qBAAqB,CAACI,gBAAgB,CAACG,KAAK,CAAC;EAC7D,MAAMC,OAAO,GAAGR,qBAAqB,CAACI,gBAAgB,CAACK,MAAM,CAAC;EAC9D,MAAMC,MAAM,GAAGV,qBAAqB,CAACK,gBAAgB,CAAC;EACtD,MAAMM,KAAK,GAAGZ,cAAc,CAACI,eAAyB,CAAC;EAEvD,OAAO,GAAGG,OAAO,IAAIE,OAAO,IAAIE,MAAM,IAAIC,KAAK,EAAE;AACrD,CAAC;AAED,OAAO,MAAMC,kBAAkB,GAAIC,MAA2B,IAAK;EAC/D,MAAMC,aAAa,GAAGjB,kBAAkB,CAACkB,MAAM,CAACC,GAAG,IAAI,EAAEA,GAAG,IAAIH,MAAM,CAAC,CAAC;EAExE,IAAIC,aAAa,CAACG,MAAM,EAAE;IACtBtB,IAAI,CAAC,yDAAyDmB,aAAa,CAACI,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC;IAEzF,OAAO,CAAC,CAAC;EACb;EAEA,MAAMC,cAAc,GAAG,IAAIC,GAAG,CAAS,CAAC;EAExC,IAAI;IACAxB,cAAc,CAACC,kBAAkB,EAAEgB,MAAM,EAAEM,cAAc,CAAC;EAC9D,CAAC,CAAC,OAAOE,KAAK,EAAE;IACZ,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;MAC3B1B,IAAI,CAAC0B,KAAK,CAAC;IACf;IAEA,OAAO,CAAC,CAAC;EACb;EAEA,MAAMC,WAAW,GAAGC,KAAK,CAACC,IAAI,CAACL,cAAc,CAAC;;EAE9C;EACA,IAAIG,WAAW,CAACL,MAAM,KAAK,CAAC,EAAE;IAC1B,OAAO;MACHQ,UAAU,EAAExB,qBAAqB,CAACY,MAAoB;IAC1D,CAAC;EACL;;EAEA;EACA,MAAMa,gBAAgB,GAAGJ,WAAW,CAACK,GAAG,CAACC,UAAU,IAAI;IACnD,MAAMjB,KAAK,GAAGb,kBAAkB,CAAC,iBAAiB,EAAE8B,UAAU,EAAEf,MAAM,CAAC;IACvE,MAAM;MAAEN,KAAK;MAAEE;IAAO,CAAC,GAAGX,kBAAkB,CAAC,kBAAkB,EAAE8B,UAAU,EAAEf,MAAM,CAAC;IACpF,MAAMH,MAAM,GAAGZ,kBAAkB,CAAC,kBAAkB,EAAE8B,UAAU,EAAEf,MAAM,CAAC;IAEzE,OAAO;MACH,CAACe,UAAU,GAAG;QACVH,UAAU,EAAExB,qBAAqB,CAAC;UAC9BE,eAAe,EAAEQ,KAAK;UACtBP,gBAAgB,EAAE;YACdG,KAAK;YACLE;UACJ,CAAC;UACDJ,gBAAgB,EAAEK;QACtB,CAAC;MACL;IACJ,CAAC;EACL,CAAC,CAAC;;EAEF;EACA,OAAOhB,gBAAgB,CAAC,GAAGgC,gBAAgB,CAAC;AAChD,CAAC","ignoreList":[]}

package/lib/module/web/convert/transform.js

@@ -1,9 +1,7 @@
 "use strict";
 
-import { media } from 'typestyle';
 import { deepMergeObjects, keyInObject } from '../utils';
 import { normalizeNumericValue } from './utils';
-import { convertBreakpoint } from './breakpoint';
 const normalizeTransform = (key, value) => {
   if (key.includes('scale')) {
     return value;
@@ -56,9 +54,11 @@ export const getTransformStyle = transforms => {
       }
       return [];
     });
-    return media(convertBreakpoint(breakpoint), {
-      transform: createTransformValue(transformsPerBreakpoint)
-    });
+    return [{
+      [breakpoint]: {
+        transform: createTransformValue(transformsPerBreakpoint)
+      }
+    }];
   });
   return deepMergeObjects({
     transform: createTransformValue(normalTransforms)

package/lib/module/web/convert/transform.js.map

@@ -1 +1 @@
-{"version":3,"names":["media","deepMergeObjects","keyInObject","normalizeNumericValue","convertBreakpoint","normalizeTransform","key","value","includes","createTransformValue","transforms","map","transform","Object","keys","undefined","join","filter","Boolean","getTransformStyle","breakpoints","Set","normalTransforms","forEach","property","Array","isArray","breakpoint","add","push","breakpointTransforms","from","flatMap","transformsPerBreakpoint"],"sourceRoot":"../../../../src","sources":["web/convert/transform.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["deepMergeObjects","keyInObject","normalizeNumericValue","normalizeTransform","key","value","includes","createTransformValue","transforms","map","transform","Object","keys","undefined","join","filter","Boolean","getTransformStyle","breakpoints","Set","normalTransforms","forEach","property","Array","isArray","breakpoint","add","push","breakpointTransforms","from","flatMap","transformsPerBreakpoint"],"sourceRoot":"../../../../src","sources":["web/convert/transform.ts"],"mappings":";;AAAA,SAASA,gBAAgB,EAAEC,WAAW,QAAQ,UAAU;AACxD,SAASC,qBAAqB,QAAQ,SAAS;AAI/C,MAAMC,kBAAkB,GAAGA,CAACC,GAAW,EAAEC,KAAU,KAAK;EACpD,IAAID,GAAG,CAACE,QAAQ,CAAC,OAAO,CAAC,EAAE;IACvB,OAAOD,KAAK;EAChB;EAEA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC3B,OAAOH,qBAAqB,CAACG,KAAK,CAAC;EACvC;EAEA,OAAOA,KAAK;AAChB,CAAC;AAED,MAAME,oBAAoB,GAAIC,UAAsB,IAAKA,UAAU,CAC9DC,GAAG,CAACC,SAAS,IAAI;EACd,MAAM,CAACN,GAAG,CAAC,GAAGO,MAAM,CAACC,IAAI,CAACF,SAAS,CAAC;EAEpC,IAAI,CAACN,GAAG,EAAE;IACN,OAAOS,SAAS;EACpB;EAEA,MAAMR,KAAK,GAAGK,SAAS,CAACN,GAAG,CAAC;EAE5B,QAAOA,GAAG;IACN,KAAK,QAAQ;IACb,KAAK,UAAU;MACX,OAAO,GAAGA,GAAG,IAAKC,KAAK,CAAmBS,IAAI,CAAC,GAAG,CAAC,GAAG;IAC1D;MACI,OAAO,GAAGV,GAAG,IAAID,kBAAkB,CAACC,GAAG,EAAEC,KAAK,CAAC,GAAG;EAC1D;AACJ,CAAC,CAAC,CACDU,MAAM,CAACC,OAAO,CAAC,CACfF,IAAI,CAAC,GAAG,CAAC;AAEd,OAAO,MAAMG,iBAAiB,GAAIT,UAAsB,IAAK;EACzD,MAAMU,WAAW,GAAG,IAAIC,GAAG,CAAS,CAAC;EACrC,MAAMC,gBAA4B,GAAG,EAAE;EAEvCZ,UAAU,CAACa,OAAO,CAACX,SAAS,IAAI;IAC5B,MAAM,CAACY,QAAQ,CAAC,GAAGX,MAAM,CAACC,IAAI,CAACF,SAAS,CAAC;IAEzC,IAAI,CAACY,QAAQ,EAAE;MACX;IACJ;IAEA,MAAMjB,KAAK,GAAGK,SAAS,CAACY,QAAQ,CAAC;IAEjC,IAAI,OAAOjB,KAAK,KAAK,QAAQ,IAAI,CAACkB,KAAK,CAACC,OAAO,CAACnB,KAAK,CAAC,EAAE;MACpDM,MAAM,CAACC,IAAI,CAACP,KAAK,CAAC,CAACgB,OAAO,CAACI,UAAU,IAAIP,WAAW,CAACQ,GAAG,CAACD,UAAU,CAAC,CAAC;MAErE;IACJ;IAEAL,gBAAgB,CAACO,IAAI,CAACjB,SAAS,CAAC;EACpC,CAAC,CAAC;EAEF,MAAMkB,oBAAoB,GAAGL,KAAK,CAACM,IAAI,CAACX,WAAW,CAAC,CAACY,OAAO,CAACL,UAAU,IAAI;IACvE,MAAMM,uBAAuB,GAAGvB,UAAU,CAACsB,OAAO,CAACpB,SAAS,IAAI;MAC5D,MAAM,CAACY,QAAQ,CAAC,GAAGX,MAAM,CAACC,IAAI,CAACF,SAAS,CAAC;MAEzC,IAAI,CAACY,QAAQ,EAAE;QACX,OAAO,EAAE;MACb;MAEA,MAAMjB,KAAK,GAAGK,SAAS,CAACY,QAAQ,CAAC;MAEjC,IAAI,OAAOjB,KAAK,KAAK,QAAQ,IAAI,CAACkB,KAAK,CAACC,OAAO,CAACnB,KAAK,CAAC,EAAE;QACpD,OAAOJ,WAAW,CAACI,KAAK,EAAEoB,UAAU,CAAC,GAAG,CAAC;UAAE,CAACH,QAAQ,GAAGjB,KAAK,CAACoB,UAAU;QAAE,CAAC,CAAC,GAAG,EAAE;MACpF;MAEA,OAAO,EAAE;IACb,CAAC,CAAC;IAEF,OAAO,CAAC;MACJ,CAACA,UAAU,GAAG;QACVf,SAAS,EAAEH,oBAAoB,CAACwB,uBAAuB;MAC3D;IACJ,CAAC,CAAC;EACN,CAAC,CAAC;EAEF,OAAO/B,gBAAgB,CAAsB;IACzCU,SAAS,EAAEH,oBAAoB,CAACa,gBAAgB;EACpD,CAAC,EAAE,GAAGQ,oBAAoB,CAAC;AAC/B,CAAC","ignoreList":[]}

package/lib/module/web/{listener/listener.js → listener.js}

@@ -1,7 +1,7 @@
 "use strict";
 
-import { UnistyleDependency } from '../../specs/NativePlatform';
-import { UnistylesRuntime } from '../runtime';
+import { UnistyleDependency } from '../specs/NativePlatform';
+import { UnistylesRuntime } from './runtime';
 class UnistylesListenerBuilder {
   isInitialized = false;
   listeners = Array.from({

package/lib/module/web/listener.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["UnistyleDependency","UnistylesRuntime","UnistylesListenerBuilder","isInitialized","listeners","Array","from","length","Object","keys","Set","emitChange","dependency","forEach","listener","initListeners","darkMedia","addEventListener","ColorScheme","lightMedia","window","Orientation","Dimensions","addListeners","dependencies","add","delete","UnistylesListener"],"sourceRoot":"../../../src","sources":["web/listener.ts"],"mappings":";;AAAA,SAASA,kBAAkB,QAAQ,yBAAyB;AAC5D,SAASC,gBAAgB,QAAQ,WAAW;AAE5C,MAAMC,wBAAwB,CAAC;EACnBC,aAAa,GAAG,KAAK;EACrBC,SAAS,GAAGC,KAAK,CAACC,IAAI,CAAC;IAAEC,MAAM,EAAEC,MAAM,CAACC,IAAI,CAACT,kBAAkB,CAAC,CAACO,MAAM,GAAG;EAAE,CAAC,EAAE,MAAM,IAAIG,GAAG,CAAe,CAAC,CAAC;EAErHC,UAAU,GAAIC,UAA8B,IAAK;IAC7C,IAAI,CAACR,SAAS,CAACQ,UAAU,CAAC,EAAEC,OAAO,CAACC,QAAQ,IAAIA,QAAQ,CAAC,CAAC,CAAC;EAC/D,CAAC;EAEDC,aAAa,GAAGA,CAAA,KAAM;IAClB,IAAI,IAAI,CAACZ,aAAa,EAAE;MACpB;IACJ;IAEA,IAAI,CAACA,aAAa,GAAG,IAAI;IACzBF,gBAAgB,CAACe,SAAS,EAAEC,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,CAACN,UAAU,CAACX,kBAAkB,CAACkB,WAAW,CAAC,CAAC;IAC7GjB,gBAAgB,CAACkB,UAAU,EAAEF,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,CAACN,UAAU,CAACX,kBAAkB,CAACkB,WAAW,CAAC,CAAC;IAC9GE,MAAM,CAACH,gBAAgB,CAAC,mBAAmB,EAAE,MAAM,IAAI,CAACN,UAAU,CAACX,kBAAkB,CAACqB,WAAW,CAAC,CAAC;IACnGD,MAAM,CAACH,gBAAgB,CAAC,QAAQ,EAAE,MAAM,IAAI,CAACN,UAAU,CAACX,kBAAkB,CAACsB,UAAU,CAAC,CAAC;EAC3F,CAAC;EAEDC,YAAY,GAAGA,CAACC,YAAuC,EAAEV,QAAsB,KAAK;IAChFU,YAAY,CAACX,OAAO,CAACD,UAAU,IAAI,IAAI,CAACR,SAAS,CAACQ,UAAU,CAAC,EAAEa,GAAG,CAACX,QAAQ,CAAC,CAAC;IAE7E,OAAO,MAAM;MACTU,YAAY,CAACX,OAAO,CAACD,UAAU,IAAI,IAAI,CAACR,SAAS,CAACQ,UAAU,CAAC,EAAEc,MAAM,CAACZ,QAAQ,CAAC,CAAC;IACpF,CAAC;EACL,CAAC;AACL;AAEA,OAAO,MAAMa,iBAAiB,GAAG,IAAIzB,wBAAwB,CAAC,CAAC","ignoreList":[]}

package/lib/module/web/mq.js.map

@@ -1 +1 @@
-{"version":3,"names":["IS_UNISTYLES_REGEX","UNISTYLES_WIDTH_REGEX","UNISTYLES_HEIGHT_REGEX","parseMq","mq","width","fromW","toW","exec","height","fromH","toH","minWidth","undefined","Number","maxWidth","minHeight","maxHeight","isUnistylesMq","test"],"sourceRoot":"../../../src","sources":["web/mq.ts"],"mappings":";;AAEA,MAAMA,kBAAkB,GAAG,wCAAwC;AACnE,MAAMC,qBAAqB,GAAG,qCAAqC;AACnE,MAAMC,sBAAsB,GAAG,qCAAqC;AAEpE,OAAO,MAAMC,OAAO,GAAIC,EAAU,IAAiB;EAC/C,MAAM,GAAGC,KAAK,EAAEC,KAAK,EAAEC,GAAG,CAAC,GAAGN,qBAAqB,CAACO,IAAI,CAACJ,EAAE,CAAC,IAAI,EAAE;EAClE,MAAM,GAAGK,MAAM,EAAEC,KAAK,EAAEC,GAAG,CAAC,GAAGT,sBAAsB,CAACM,IAAI,CAACJ,EAAE,CAAC,IAAI,EAAE;EAEpE,OAAO;IACHQ,QAAQ,EAAE,CAACP,KAAK,IAAIC,KAAK,KAAK,UAAU,GAAGO,SAAS,GAAGC,MAAM,CAACR,KAAK,CAAC;IACpES,QAAQ,EAAE,CAACV,KAAK,IAAIE,GAAG,KAAK,UAAU,GAAGM,SAAS,GAAGC,MAAM,CAACP,GAAG,CAAC;IAChES,SAAS,EAAE,CAACP,MAAM,IAAIC,KAAK,KAAK,UAAU,GAAGG,SAAS,GAAGC,MAAM,CAACJ,KAAK,CAAC;IACtEO,SAAS,EAAE,CAACR,MAAM,IAAIE,GAAG,KAAK,UAAU,GAAGE,SAAS,GAAGC,MAAM,CAACH,GAAG;EACrE,CAAC;AACL,CAAC;AAED,OAAO,MAAMO,aAAa,GAAId,EAAU,IAAKJ,kBAAkB,CAACmB,IAAI,CAACf,EAAE,CAAC","ignoreList":[]}
+{"version":3,"names":["IS_UNISTYLES_REGEX","UNISTYLES_WIDTH_REGEX","UNISTYLES_HEIGHT_REGEX","parseMq","mq","width","fromW","toW","exec","height","fromH","toH","minWidth","undefined","Number","maxWidth","minHeight","maxHeight","isUnistylesMq","test"],"sourceRoot":"../../../src","sources":["web/mq.ts"],"mappings":";;AAAA,MAAMA,kBAAkB,GAAG,wCAAwC;AACnE,MAAMC,qBAAqB,GAAG,qCAAqC;AACnE,MAAMC,sBAAsB,GAAG,qCAAqC;AAEpE,OAAO,MAAMC,OAAO,GAAIC,EAAU,IAAK;EACnC,MAAM,GAAGC,KAAK,EAAEC,KAAK,EAAEC,GAAG,CAAC,GAAGN,qBAAqB,CAACO,IAAI,CAACJ,EAAE,CAAC,IAAI,EAAE;EAClE,MAAM,GAAGK,MAAM,EAAEC,KAAK,EAAEC,GAAG,CAAC,GAAGT,sBAAsB,CAACM,IAAI,CAACJ,EAAE,CAAC,IAAI,EAAE;EAEpE,OAAO;IACHQ,QAAQ,EAAE,CAACP,KAAK,IAAIC,KAAK,KAAK,UAAU,GAAGO,SAAS,GAAGC,MAAM,CAACR,KAAK,CAAC;IACpES,QAAQ,EAAE,CAACV,KAAK,IAAIE,GAAG,KAAK,UAAU,GAAGM,SAAS,GAAGC,MAAM,CAACP,GAAG,CAAC;IAChES,SAAS,EAAE,CAACP,MAAM,IAAIC,KAAK,KAAK,UAAU,GAAGG,SAAS,GAAGC,MAAM,CAACJ,KAAK,CAAC;IACtEO,SAAS,EAAE,CAACR,MAAM,IAAIE,GAAG,KAAK,UAAU,GAAGE,SAAS,GAAGC,MAAM,CAACH,GAAG;EACrE,CAAC;AACL,CAAC;AAED,OAAO,MAAMO,aAAa,GAAId,EAAU,IAAKJ,kBAAkB,CAACmB,IAAI,CAACf,EAAE,CAAC","ignoreList":[]}

package/lib/module/web/registry.js

@@ -1,12 +1,27 @@
 "use strict";
 
-import { createTypeStyle } from 'typestyle';
-import { convertToTypeStyle } from './convert';
 import { UnistylesRuntime } from './runtime';
-import { keyInObject } from './utils';
+import { extractMediaQueryValue, keyInObject, getMediaQuery, generateHash, extractUnistyleDependencies } from './utils';
 import { UnistylesListener } from './listener';
+import { convertUnistyles } from './convert';
+import { getVariants } from './variants';
 class UnistylesRegistryBuilder {
   stylesheets = new Map();
+  stylesCounter = new Map();
+  #styleTag = null;
+  disposeListenersMap = new Map();
+  dependenciesMap = new Map();
+  get styleTag() {
+    const tag = this.#styleTag;
+    if (!tag) {
+      const newTag = document.createElement('style');
+      newTag.id = 'unistyles-web';
+      this.#styleTag = newTag;
+      document.head.appendChild(newTag);
+      return newTag;
+    }
+    return tag;
+  }
   getComputedStylesheet = stylesheet => {
     if (typeof stylesheet !== 'function') {
       return stylesheet;
@@ -16,30 +31,153 @@ class UnistylesRegistryBuilder {
       return computedStylesheet;
     }
     const createdStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime);
-    // @ts-expect-error uni__dependencies is hidden
-    const dependencies = Object.values(createdStylesheet).flatMap(value => keyInObject(value, 'uni__dependencies') ? value.uni__dependencies : []);
-    UnistylesListener.addListeners(dependencies, () => {
+    const dependencies = Object.values(createdStylesheet).flatMap(value => extractUnistyleDependencies(value));
+    this.addDependenciesToStylesheet(stylesheet, dependencies);
+    this.stylesheets.set(stylesheet, createdStylesheet);
+    return createdStylesheet;
+  };
+  addDependenciesToStylesheet = (stylesheet, dependencies) => {
+    this.disposeListenersMap.get(stylesheet)?.();
+    const dependenciesMap = this.dependenciesMap.get(stylesheet) ?? new Set(dependencies);
+    dependencies.forEach(dependency => dependenciesMap.add(dependency));
+    const dispose = UnistylesListener.addListeners(Array.from(dependenciesMap), () => {
       const newComputedStylesheet = stylesheet(UnistylesRuntime.theme, UnistylesRuntime.miniRuntime);
       this.stylesheets.set(stylesheet, newComputedStylesheet);
     });
-    this.stylesheets.set(stylesheet, createdStylesheet);
-    return createdStylesheet;
+    this.dependenciesMap.set(stylesheet, dependenciesMap);
+    this.disposeListenersMap.set(stylesheet, dispose);
+  };
+  add = ({
+    key,
+    value,
+    stylesheet,
+    args,
+    variants
+  }) => {
+    const hash = generateHash(value);
+    const existingCounter = this.stylesCounter.get(hash);
+    if (!existingCounter || existingCounter.size === 0) {
+      const counter = new Set();
+      const dependencies = extractUnistyleDependencies(value);
+      counter.add(value);
+      this.stylesCounter.set(hash, counter);
+      this.applyStyles(hash, convertUnistyles(value));
+      UnistylesListener.addListeners(dependencies, async () => {
+        // Move this callback to the end of the event loop
+        await Promise.resolve();
+        const newComputedStyleSheet = this.getComputedStylesheet(stylesheet);
+        const newValue = newComputedStyleSheet[key];
+        const result = typeof newValue === 'function' ? newValue(...args) : newValue;
+        const {
+          variantsResult
+        } = Object.fromEntries(getVariants({
+          variantsResult: result
+        }, variants));
+        const resultWithVariants = {
+          ...result,
+          ...variantsResult
+        };
+        this.applyStyles(hash, convertUnistyles(resultWithVariants));
+      });
+      return hash;
+    }
+    existingCounter.add(value);
+    return hash;
   };
-  createStyles = (stylesheet, key) => {
-    const unistyles = createTypeStyle();
-    const typestyleStylesheet = convertToTypeStyle(stylesheet);
-    const className = unistyles.style({
-      $debugName: `${key}-${Math.random().toString(16).slice(10)}`
-    }, typestyleStylesheet);
-    return {
-      className,
-      unistyles
-    };
+  applyStyles = (hash, styles) => {
+    Object.entries(styles).forEach(([key, value]) => {
+      if (!this.styleTag.sheet) {
+        return;
+      }
+      if (typeof value === 'object' && !key.startsWith('_')) {
+        const mediaQuery = getMediaQuery(key);
+        const cssRules = Array.from(this.styleTag.sheet.cssRules);
+        let queryRule = cssRules.find(rule => {
+          if (!(rule instanceof CSSMediaRule)) {
+            return false;
+          }
+          return rule.media.item(0)?.includes(mediaQuery);
+        }) ?? null;
+        if (!queryRule) {
+          const mediaQueryValue = extractMediaQueryValue(mediaQuery);
+          const ruleIndex = mediaQueryValue ? cssRules.reduce((acc, rule, ruleIndex) => {
+            if (!(rule instanceof CSSMediaRule)) {
+              return acc;
+            }
+            const ruleMediaQueryValue = extractMediaQueryValue(rule.conditionText);
+            if (ruleMediaQueryValue === undefined) {
+              return;
+            }
+            return ruleMediaQueryValue > mediaQueryValue ? ruleIndex : acc;
+          }, cssRules.length) : undefined;
+          queryRule = this.styleTag.sheet.cssRules.item(this.styleTag.sheet.insertRule(`@media ${mediaQuery} {.${hash} {}}`, ruleIndex));
+        }
+        if (queryRule instanceof CSSMediaRule) {
+          Object.entries(value).forEach(([mqKey, mqValue]) => {
+            this.applyRule({
+              hash,
+              key: mqKey,
+              value: mqValue,
+              sheet: queryRule
+            });
+          });
+        }
+        return;
+      }
+
+      // Pseudo
+      if (typeof value === 'object') {
+        Object.entries(value).forEach(([pseudoKey, pseudoValue]) => {
+          this.applyRule({
+            hash: `${hash}${key.replace('_', ':')}`,
+            key: pseudoKey,
+            value: pseudoValue,
+            sheet: this.styleTag.sheet
+          });
+        });
+        return;
+      }
+      this.applyRule({
+        hash,
+        key,
+        value,
+        sheet: this.styleTag.sheet
+      });
+    });
+  };
+  applyRule = ({
+    hash,
+    key,
+    value,
+    sheet
+  }) => {
+    let rule = Array.from(sheet.cssRules).find(rule => {
+      if (!(rule instanceof CSSStyleRule)) {
+        return false;
+      }
+
+      // In unistyles pseudos are prefixed with ':' but in css some of them are prefixed with '::'
+      return rule.selectorText.replace('::', ':').includes(hash);
+    }) ?? null;
+    if (!rule) {
+      rule = sheet.cssRules.item(sheet.insertRule(`.${hash} {}`));
+    }
+    if (!(rule instanceof CSSStyleRule) || !keyInObject(rule.style, key)) {
+      return;
+    }
+    rule.style[key] = value;
   };
-  updateStyles = (unistyles, stylesheet, className) => {
-    const typestyleStylesheet = convertToTypeStyle(stylesheet);
-    unistyles.reinit();
-    unistyles.cssRule(`.${className}`, typestyleStylesheet);
+  remove = value => {
+    const hash = generateHash(value);
+    const existingStyles = this.stylesCounter.get(hash);
+    if (!existingStyles) {
+      return;
+    }
+    existingStyles.delete(value);
+    if (existingStyles.size === 0) {
+      const ruleIndex = Array.from(this.styleTag.sheet?.cssRules ?? []).findIndex(rule => rule.cssText.includes(`.${hash}`));
+      this.styleTag.sheet?.deleteRule(ruleIndex);
+    }
   };
 }
 export const UnistylesRegistry = new UnistylesRegistryBuilder();