react-native-unistyles 1.1.0 → 1.1.2

package/lib/commonjs/hooks/useDimensions.web.js

@@ -9,8 +9,8 @@ var _utils = require("../utils");
 const useDimensions = () => {
   const timerRef = (0, _react.useRef)();
   const [screenSize, setScreenSize] = (0, _react.useState)({
-    width: _utils.isServer ? 0 : window.innerWidth,
-    height: _utils.isServer ? 0 : window.innerHeight
+    width: _utils.isServer ? undefined : window.innerWidth,
+    height: _utils.isServer ? undefined : window.innerHeight
   });
   (0, _react.useEffect)(() => {
     const handleResize = () => {

package/lib/commonjs/hooks/useDimensions.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","require","_utils","useDimensions","timerRef","useRef","screenSize","setScreenSize","useState","width","isServer","window","innerWidth","height","innerHeight","useEffect","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener","exports"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAEO,MAAME,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAgC,CAAC;EACxD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAa;IACrDC,KAAK,EAAEC,eAAQ,GAAG,CAAC,GAAGC,MAAM,CAACC,UAAU;IACvCC,MAAM,EAAEH,eAAQ,GAAG,CAAC,GAAGC,MAAM,CAACG;EAClC,CAAC,CAAC;EAEF,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACb,QAAQ,CAACc,OAAO,CAAC;MAE9Bd,QAAQ,CAACc,OAAO,GAAGC,UAAU,CAAC,MAAMZ,aAAa,CAAC;QAC9CE,KAAK,EAAEE,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACS,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTL,MAAM,CAACU,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACb,QAAQ,CAACc,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOZ,UAAU;AACrB,CAAC;AAAAgB,OAAA,CAAAnB,aAAA,GAAAA,aAAA"}
+{"version":3,"names":["_react","require","_utils","useDimensions","timerRef","useRef","screenSize","setScreenSize","useState","width","isServer","undefined","window","innerWidth","height","innerHeight","useEffect","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener","exports"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAEA,IAAAC,MAAA,GAAAD,OAAA;AAEO,MAAME,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAG,IAAAC,aAAM,EAAgC,CAAC;EACxD,MAAM,CAACC,UAAU,EAAEC,aAAa,CAAC,GAAG,IAAAC,eAAQ,EAAa;IACrDC,KAAK,EAAEC,eAAQ,GACTC,SAAS,GACTC,MAAM,CAACC,UAAU;IACvBC,MAAM,EAAEJ,eAAQ,GACVC,SAAS,GACTC,MAAM,CAACG;EACjB,CAAe,CAAC;EAEhB,IAAAC,gBAAS,EAAC,MAAM;IACZ,MAAMC,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACd,QAAQ,CAACe,OAAO,CAAC;MAE9Bf,QAAQ,CAACe,OAAO,GAAGC,UAAU,CAAC,MAAMb,aAAa,CAAC;QAC9CE,KAAK,EAAEG,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACS,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTL,MAAM,CAACU,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACd,QAAQ,CAACe,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOb,UAAU;AACrB,CAAC;AAAAiB,OAAA,CAAApB,aAAA,GAAAA,aAAA"}

package/lib/commonjs/utils/module.d.js

@@ -0,0 +1,2 @@
+"use strict";
+//# sourceMappingURL=module.d.js.map

package/lib/commonjs/utils/module.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["utils/module.d.ts"],"mappings":""}

package/lib/commonjs/utils/normalizer.js

@@ -4,23 +4,29 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.preprocessor = exports.normalizeNumericValue = exports.normalizeColor = void 0;
+var _normalizeColors = _interopRequireDefault(require("@react-native/normalize-colors"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
 
-// for now supports
-// hex colors (3, 6, 8) chars
-// colors like orange red etc.
 const normalizeColor = function (color) {
   let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  if (!color.startsWith('#')) {
+  // If the opacity is 1 there's no need to normalize the color
+  if (opacity === 1) {
     return color;
   }
-  if (color.length === 9) {
-    const [r, g, b, a] = color.slice(1).split(/(?=(?:..)*$)/).map(x => parseInt(x, 16)).filter(num => !isNaN(num));
-    return `rgba(${r},${g},${b},${a / 255})`;
+  const integer = (0, _normalizeColors.default)(color);
+
+  // If the colour is an unknown format, the return value is null
+  if (integer === null) {
+    return color;
+  }
+  const hex = integer.toString(16).padStart(8, '0');
+  if (hex.length === 8) {
+    const [r = 0, g = 0, b = 0, a = 1] = hex.split(/(?=(?:..)*$)/).map(x => parseInt(x, 16)).filter(num => !isNaN(num));
+    return `rgba(${r},${g},${b},${a / 255 * opacity})`;
   }
-  const sanitizedHex = color.length === 4 ? color.slice(1).split('').map(char => `${char}${char}`).join('') : color.slice(1);
-  return sanitizedHex.split(/(?=(?:..)*$)/).map(x => parseInt(x, 16)).filter(num => !isNaN(num)).reduce((acc, color) => `${acc}${color},`, 'rgba(').concat(`${opacity})`);
+  return color;
 };
 exports.normalizeColor = normalizeColor;
 const normalizeNumericValue = value => value ? `${value}px` : value;

package/lib/commonjs/utils/normalizer.js.map

@@ -1 +1 @@
-{"version":3,"names":["normalizeColor","color","opacity","arguments","length","undefined","startsWith","r","g","b","a","slice","split","map","x","parseInt","filter","num","isNaN","sanitizedHex","char","join","reduce","acc","concat","exports","normalizeNumericValue","value","normalizeTransform","key","includes","createTextShadowValue","style","textShadowColor","textShadowOffset","textShadowRadius","offsetX","width","offsetY","height","radius","createBoxShadowValue","shadowColor","shadowOffset","shadowOpacity","shadowRadius","createTransformValue","transforms","transform","Object","keys","Boolean","preprocessor"],"sourceRoot":"../../../src","sources":["utils/normalizer.ts"],"mappings":"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"}
+{"version":3,"names":["_normalizeColors","_interopRequireDefault","require","obj","__esModule","default","normalizeColor","color","opacity","arguments","length","undefined","integer","normalizeColors","hex","toString","padStart","r","g","b","a","split","map","x","parseInt","filter","num","isNaN","exports","normalizeNumericValue","value","normalizeTransform","key","includes","createTextShadowValue","style","textShadowColor","textShadowOffset","textShadowRadius","offsetX","width","offsetY","height","radius","createBoxShadowValue","shadowColor","shadowOffset","shadowOpacity","shadowRadius","createTransformValue","transforms","transform","Object","keys","join","Boolean","preprocessor"],"sourceRoot":"../../../src","sources":["utils/normalizer.ts"],"mappings":";;;;;;AAEA,IAAAA,gBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAA4D,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAF5D;AACA;;AAUO,MAAMG,cAAc,GAAG,SAAAA,CAACC,KAAa,EAA0B;EAAA,IAAxBC,OAAe,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;EAC7D;EACA,IAAID,OAAO,KAAK,CAAC,EAAE;IACf,OAAOD,KAAK;EAChB;EAEA,MAAMK,OAAO,GAAG,IAAAC,wBAAe,EAACN,KAAK,CAAkB;;EAEvD;EACA,IAAIK,OAAO,KAAK,IAAI,EAAE;IAClB,OAAOL,KAAK;EAChB;EAEA,MAAMO,GAAG,GAAGF,OAAO,CAACG,QAAQ,CAAC,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAEjD,IAAIF,GAAG,CAACJ,MAAM,KAAK,CAAC,EAAE;IAClB,MAAM,CAACO,CAAC,GAAG,CAAC,EAAEC,CAAC,GAAG,CAAC,EAAEC,CAAC,GAAG,CAAC,EAAEC,CAAC,GAAG,CAAC,CAAC,GAAGN,GAAG,CACnCO,KAAK,CAAC,cAAc,CAAC,CACrBC,GAAG,CAACC,CAAC,IAAIC,QAAQ,CAACD,CAAC,EAAE,EAAE,CAAC,CAAC,CACzBE,MAAM,CAACC,GAAG,IAAI,CAACC,KAAK,CAACD,GAAG,CAAC,CAAC;IAE/B,OAAQ,QAAOT,CAAE,IAAGC,CAAE,IAAGC,CAAE,IAAKC,CAAC,GAAc,GAAG,GAAIZ,OAAQ,GAAE;EACpE;EAEA,OAAOD,KAAK;AAChB,CAAC;AAAAqB,OAAA,CAAAtB,cAAA,GAAAA,cAAA;AAEM,MAAMuB,qBAAqB,GAAIC,KAAa,IAAKA,KAAK,GAAI,GAAEA,KAAM,IAAG,GAAGA,KAAK;AAAAF,OAAA,CAAAC,qBAAA,GAAAA,qBAAA;AACpF,MAAME,kBAAkB,GAAGA,CAACC,GAAW,EAAEF,KAAsB,KAAK;EAChE,IAAIE,GAAG,CAACC,QAAQ,CAAC,OAAO,CAAC,EAAE;IACvB,OAAOH,KAAK;EAChB;EAEA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC3B,OAAOD,qBAAqB,CAACC,KAAK,CAAC;EACvC;EAEA,OAAOA,KAAK;AAChB,CAAC;AAED,MAAMI,qBAAqB,GAAIC,KAAiB,IAAK;EACjD;EACA,MAAM;IAAEC,eAAe;IAAEC,gBAAgB;IAAEC;EAAiB,CAAC,GAAGH,KAAK;EACrE,MAAMI,OAAO,GAAGV,qBAAqB,CAACQ,gBAAgB,CAACG,KAAK,CAAC;EAC7D,MAAMC,OAAO,GAAGZ,qBAAqB,CAACQ,gBAAgB,CAACK,MAAM,CAAC;EAC9D,MAAMC,MAAM,GAAGd,qBAAqB,CAACS,gBAAgB,CAAC;EACtD,MAAM/B,KAAK,GAAGD,cAAc,CAAC8B,eAAyB,CAAC;EAEvD,OAAQ,GAAEG,OAAQ,IAAGE,OAAQ,IAAGE,MAAO,IAAGpC,KAAM,EAAC;AACrD,CAAC;AAED,MAAMqC,oBAAoB,GAAIT,KAAgB,IAAK;EAC/C;EACA,MAAM;IAAEU,WAAW;IAAEC,YAAY;IAAEC,aAAa;IAAEC;EAAa,CAAC,GAAGb,KAAK;EACxE,MAAMI,OAAO,GAAGV,qBAAqB,CAACiB,YAAY,CAACN,KAAK,CAAC;EACzD,MAAMC,OAAO,GAAGZ,qBAAqB,CAACiB,YAAY,CAACJ,MAAM,CAAC;EAC1D,MAAMC,MAAM,GAAGd,qBAAqB,CAACmB,YAAY,CAAC;EAClD,MAAMzC,KAAK,GAAGD,cAAc,CAACuC,WAAW,EAAYE,aAAuB,CAAC;EAE5E,OAAQ,GAAER,OAAQ,IAAGE,OAAQ,IAAGE,MAAO,IAAGpC,KAAM,EAAC;AACrD,CAAC;AAED,MAAM0C,oBAAoB,GAAIC,UAAsB,IAAKA,UAAU,CAC9D5B,GAAG,CAAC6B,SAAS,IAAI;EACd,MAAM,CAACnB,GAAG,CAAC,GAAGoB,MAAM,CAACC,IAAI,CAACF,SAAS,CAAC;EAEpC,IAAI,CAACnB,GAAG,EAAE;IACN,OAAOrB,SAAS;EACpB;EAEA,MAAMmB,KAAK,GAAGqB,SAAS,CAACnB,GAAG,CAA2B;EAEtD,QAAOA,GAAG;IACN,KAAK,QAAQ;IACb,KAAK,UAAU;MACX,OAAQ,GAAEA,GAAI,IAAIF,KAAK,CAAmBwB,IAAI,CAAC,GAAG,CAAE,GAAE;IAC1D;MACI,OAAQ,GAAEtB,GAAI,IAAGD,kBAAkB,CAACC,GAAG,EAAEF,KAAK,CAAE,GAAE;EAC1D;AACJ,CAAC,CAAC,CACDL,MAAM,CAAC8B,OAAO,CAAC,CACfD,IAAI,CAAC,GAAG,CAAC;AAEP,MAAME,YAA0B,GAAA5B,OAAA,CAAA4B,YAAA,GAAG;EACtCtB,qBAAqB;EACrBU,oBAAoB;EACpBK;AACJ,CAAC"}

package/lib/module/hooks/useDimensions.web.js

@@ -3,8 +3,8 @@ import { isServer } from '../utils';
 export const useDimensions = () => {
   const timerRef = useRef();
   const [screenSize, setScreenSize] = useState({
-    width: isServer ? 0 : window.innerWidth,
-    height: isServer ? 0 : window.innerHeight
+    width: isServer ? undefined : window.innerWidth,
+    height: isServer ? undefined : window.innerHeight
   });
   useEffect(() => {
     const handleResize = () => {

package/lib/module/hooks/useDimensions.web.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useRef","useState","isServer","useDimensions","timerRef","screenSize","setScreenSize","width","window","innerWidth","height","innerHeight","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEnD,SAASC,QAAQ,QAAQ,UAAU;AAEnC,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAGJ,MAAM,CAAgC,CAAC;EACxD,MAAM,CAACK,UAAU,EAAEC,aAAa,CAAC,GAAGL,QAAQ,CAAa;IACrDM,KAAK,EAAEL,QAAQ,GAAG,CAAC,GAAGM,MAAM,CAACC,UAAU;IACvCC,MAAM,EAAER,QAAQ,GAAG,CAAC,GAAGM,MAAM,CAACG;EAClC,CAAC,CAAC;EAEFZ,SAAS,CAAC,MAAM;IACZ,MAAMa,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACT,QAAQ,CAACU,OAAO,CAAC;MAE9BV,QAAQ,CAACU,OAAO,GAAGC,UAAU,CAAC,MAAMT,aAAa,CAAC;QAC9CC,KAAK,EAAEC,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACQ,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTJ,MAAM,CAACS,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACT,QAAQ,CAACU,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOT,UAAU;AACrB,CAAC"}
+{"version":3,"names":["useEffect","useRef","useState","isServer","useDimensions","timerRef","screenSize","setScreenSize","width","undefined","window","innerWidth","height","innerHeight","handleResize","clearTimeout","current","setTimeout","addEventListener","removeEventListener"],"sourceRoot":"../../../src","sources":["hooks/useDimensions.web.ts"],"mappings":"AAAA,SAASA,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAEnD,SAASC,QAAQ,QAAQ,UAAU;AAEnC,OAAO,MAAMC,aAAa,GAAGA,CAAA,KAAkB;EAC3C,MAAMC,QAAQ,GAAGJ,MAAM,CAAgC,CAAC;EACxD,MAAM,CAACK,UAAU,EAAEC,aAAa,CAAC,GAAGL,QAAQ,CAAa;IACrDM,KAAK,EAAEL,QAAQ,GACTM,SAAS,GACTC,MAAM,CAACC,UAAU;IACvBC,MAAM,EAAET,QAAQ,GACVM,SAAS,GACTC,MAAM,CAACG;EACjB,CAAe,CAAC;EAEhBb,SAAS,CAAC,MAAM;IACZ,MAAMc,YAAY,GAAGA,CAAA,KAAM;MACvBC,YAAY,CAACV,QAAQ,CAACW,OAAO,CAAC;MAE9BX,QAAQ,CAACW,OAAO,GAAGC,UAAU,CAAC,MAAMV,aAAa,CAAC;QAC9CC,KAAK,EAAEE,MAAM,CAACC,UAAU;QACxBC,MAAM,EAAEF,MAAM,CAACG;MACnB,CAAC,CAAC,EAAE,GAAG,CAAC;IACZ,CAAC;IAEDH,MAAM,CAACQ,gBAAgB,CAAC,QAAQ,EAAEJ,YAAY,CAAC;IAE/C,OAAO,MAAM;MACTJ,MAAM,CAACS,mBAAmB,CAAC,QAAQ,EAAEL,YAAY,CAAC;MAClDC,YAAY,CAACV,QAAQ,CAACW,OAAO,CAAC;IAClC,CAAC;EACL,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOV,UAAU;AACrB,CAAC"}

package/lib/module/utils/module.d.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=module.d.js.map

package/lib/module/utils/module.d.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["utils/module.d.ts"],"mappings":""}

package/lib/module/utils/normalizer.js

@@ -1,20 +1,24 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
-
-// for now supports
-// hex colors (3, 6, 8) chars
-// colors like orange red etc.
+import normalizeColors from '@react-native/normalize-colors';
 export const normalizeColor = function (color) {
   let opacity = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1;
-  if (!color.startsWith('#')) {
+  // If the opacity is 1 there's no need to normalize the color
+  if (opacity === 1) {
+    return color;
+  }
+  const integer = normalizeColors(color);
+
+  // If the colour is an unknown format, the return value is null
+  if (integer === null) {
     return color;
   }
-  if (color.length === 9) {
-    const [r, g, b, a] = color.slice(1).split(/(?=(?:..)*$)/).map(x => parseInt(x, 16)).filter(num => !isNaN(num));
-    return `rgba(${r},${g},${b},${a / 255})`;
+  const hex = integer.toString(16).padStart(8, '0');
+  if (hex.length === 8) {
+    const [r = 0, g = 0, b = 0, a = 1] = hex.split(/(?=(?:..)*$)/).map(x => parseInt(x, 16)).filter(num => !isNaN(num));
+    return `rgba(${r},${g},${b},${a / 255 * opacity})`;
   }
-  const sanitizedHex = color.length === 4 ? color.slice(1).split('').map(char => `${char}${char}`).join('') : color.slice(1);
-  return sanitizedHex.split(/(?=(?:..)*$)/).map(x => parseInt(x, 16)).filter(num => !isNaN(num)).reduce((acc, color) => `${acc}${color},`, 'rgba(').concat(`${opacity})`);
+  return color;
 };
 export const normalizeNumericValue = value => value ? `${value}px` : value;
 const normalizeTransform = (key, value) => {

package/lib/module/utils/normalizer.js.map

@@ -1 +1 @@
-{"version":3,"names":["normalizeColor","color","opacity","arguments","length","undefined","startsWith","r","g","b","a","slice","split","map","x","parseInt","filter","num","isNaN","sanitizedHex","char","join","reduce","acc","concat","normalizeNumericValue","value","normalizeTransform","key","includes","createTextShadowValue","style","textShadowColor","textShadowOffset","textShadowRadius","offsetX","width","offsetY","height","radius","createBoxShadowValue","shadowColor","shadowOffset","shadowOpacity","shadowRadius","createTransformValue","transforms","transform","Object","keys","Boolean","preprocessor"],"sourceRoot":"../../../src","sources":["utils/normalizer.ts"],"mappings":"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"}
+{"version":3,"names":["normalizeColors","normalizeColor","color","opacity","arguments","length","undefined","integer","hex","toString","padStart","r","g","b","a","split","map","x","parseInt","filter","num","isNaN","normalizeNumericValue","value","normalizeTransform","key","includes","createTextShadowValue","style","textShadowColor","textShadowOffset","textShadowRadius","offsetX","width","offsetY","height","radius","createBoxShadowValue","shadowColor","shadowOffset","shadowOpacity","shadowRadius","createTransformValue","transforms","transform","Object","keys","join","Boolean","preprocessor"],"sourceRoot":"../../../src","sources":["utils/normalizer.ts"],"mappings":"AAAA;AACA;AACA,OAAOA,eAAe,MAAM,gCAAgC;AAS5D,OAAO,MAAMC,cAAc,GAAG,SAAAA,CAACC,KAAa,EAA0B;EAAA,IAAxBC,OAAe,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC;EAC7D;EACA,IAAID,OAAO,KAAK,CAAC,EAAE;IACf,OAAOD,KAAK;EAChB;EAEA,MAAMK,OAAO,GAAGP,eAAe,CAACE,KAAK,CAAkB;;EAEvD;EACA,IAAIK,OAAO,KAAK,IAAI,EAAE;IAClB,OAAOL,KAAK;EAChB;EAEA,MAAMM,GAAG,GAAGD,OAAO,CAACE,QAAQ,CAAC,EAAE,CAAC,CAACC,QAAQ,CAAC,CAAC,EAAE,GAAG,CAAC;EAEjD,IAAIF,GAAG,CAACH,MAAM,KAAK,CAAC,EAAE;IAClB,MAAM,CAACM,CAAC,GAAG,CAAC,EAAEC,CAAC,GAAG,CAAC,EAAEC,CAAC,GAAG,CAAC,EAAEC,CAAC,GAAG,CAAC,CAAC,GAAGN,GAAG,CACnCO,KAAK,CAAC,cAAc,CAAC,CACrBC,GAAG,CAACC,CAAC,IAAIC,QAAQ,CAACD,CAAC,EAAE,EAAE,CAAC,CAAC,CACzBE,MAAM,CAACC,GAAG,IAAI,CAACC,KAAK,CAACD,GAAG,CAAC,CAAC;IAE/B,OAAQ,QAAOT,CAAE,IAAGC,CAAE,IAAGC,CAAE,IAAKC,CAAC,GAAc,GAAG,GAAIX,OAAQ,GAAE;EACpE;EAEA,OAAOD,KAAK;AAChB,CAAC;AAED,OAAO,MAAMoB,qBAAqB,GAAIC,KAAa,IAAKA,KAAK,GAAI,GAAEA,KAAM,IAAG,GAAGA,KAAK;AACpF,MAAMC,kBAAkB,GAAGA,CAACC,GAAW,EAAEF,KAAsB,KAAK;EAChE,IAAIE,GAAG,CAACC,QAAQ,CAAC,OAAO,CAAC,EAAE;IACvB,OAAOH,KAAK;EAChB;EAEA,IAAI,OAAOA,KAAK,KAAK,QAAQ,EAAE;IAC3B,OAAOD,qBAAqB,CAACC,KAAK,CAAC;EACvC;EAEA,OAAOA,KAAK;AAChB,CAAC;AAED,MAAMI,qBAAqB,GAAIC,KAAiB,IAAK;EACjD;EACA,MAAM;IAAEC,eAAe;IAAEC,gBAAgB;IAAEC;EAAiB,CAAC,GAAGH,KAAK;EACrE,MAAMI,OAAO,GAAGV,qBAAqB,CAACQ,gBAAgB,CAACG,KAAK,CAAC;EAC7D,MAAMC,OAAO,GAAGZ,qBAAqB,CAACQ,gBAAgB,CAACK,MAAM,CAAC;EAC9D,MAAMC,MAAM,GAAGd,qBAAqB,CAACS,gBAAgB,CAAC;EACtD,MAAM7B,KAAK,GAAGD,cAAc,CAAC4B,eAAyB,CAAC;EAEvD,OAAQ,GAAEG,OAAQ,IAAGE,OAAQ,IAAGE,MAAO,IAAGlC,KAAM,EAAC;AACrD,CAAC;AAED,MAAMmC,oBAAoB,GAAIT,KAAgB,IAAK;EAC/C;EACA,MAAM;IAAEU,WAAW;IAAEC,YAAY;IAAEC,aAAa;IAAEC;EAAa,CAAC,GAAGb,KAAK;EACxE,MAAMI,OAAO,GAAGV,qBAAqB,CAACiB,YAAY,CAACN,KAAK,CAAC;EACzD,MAAMC,OAAO,GAAGZ,qBAAqB,CAACiB,YAAY,CAACJ,MAAM,CAAC;EAC1D,MAAMC,MAAM,GAAGd,qBAAqB,CAACmB,YAAY,CAAC;EAClD,MAAMvC,KAAK,GAAGD,cAAc,CAACqC,WAAW,EAAYE,aAAuB,CAAC;EAE5E,OAAQ,GAAER,OAAQ,IAAGE,OAAQ,IAAGE,MAAO,IAAGlC,KAAM,EAAC;AACrD,CAAC;AAED,MAAMwC,oBAAoB,GAAIC,UAAsB,IAAKA,UAAU,CAC9D3B,GAAG,CAAC4B,SAAS,IAAI;EACd,MAAM,CAACnB,GAAG,CAAC,GAAGoB,MAAM,CAACC,IAAI,CAACF,SAAS,CAAC;EAEpC,IAAI,CAACnB,GAAG,EAAE;IACN,OAAOnB,SAAS;EACpB;EAEA,MAAMiB,KAAK,GAAGqB,SAAS,CAACnB,GAAG,CAA2B;EAEtD,QAAOA,GAAG;IACN,KAAK,QAAQ;IACb,KAAK,UAAU;MACX,OAAQ,GAAEA,GAAI,IAAIF,KAAK,CAAmBwB,IAAI,CAAC,GAAG,CAAE,GAAE;IAC1D;MACI,OAAQ,GAAEtB,GAAI,IAAGD,kBAAkB,CAACC,GAAG,EAAEF,KAAK,CAAE,GAAE;EAC1D;AACJ,CAAC,CAAC,CACDJ,MAAM,CAAC6B,OAAO,CAAC,CACfD,IAAI,CAAC,GAAG,CAAC;AAEd,OAAO,MAAME,YAA0B,GAAG;EACtCtB,qBAAqB;EACrBU,oBAAoB;EACpBK;AACJ,CAAC"}

package/lib/typescript/src/hooks/useDimensions.web.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDimensions.web.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C,eAAO,MAAM,aAAa,QAAO,UA0BhC,CAAA"}
+{"version":3,"file":"useDimensions.web.d.ts","sourceRoot":"","sources":["../../../../src/hooks/useDimensions.web.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAA;AAG1C,eAAO,MAAM,aAAa,QAAO,UA8BhC,CAAA"}

package/lib/typescript/src/utils/normalizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"normalizer.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizer.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEjE,KAAK,YAAY,GAAG;IAChB,qBAAqB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IACjD,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IACzD,oBAAoB,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;CAClE,CAAA;AAKD,eAAO,MAAM,cAAc,UAAW,MAAM,YAAW,MAAM,WA6B5D,CAAA;AAED,eAAO,MAAM,qBAAqB,UAAW,MAAM,oBAAiC,CAAA;AAwDpF,eAAO,MAAM,YAAY,EAAE,YAI1B,CAAA"}
+{"version":3,"file":"normalizer.d.ts","sourceRoot":"","sources":["../../../../src/utils/normalizer.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAA;AAEjE,KAAK,YAAY,GAAG;IAChB,qBAAqB,CAAC,KAAK,EAAE,UAAU,GAAG,MAAM,CAAC;IACjD,oBAAoB,CAAC,KAAK,EAAE,QAAQ,CAAC,SAAS,CAAC,GAAG,MAAM,CAAC;IACzD,oBAAoB,CAAC,UAAU,EAAE,QAAQ,CAAC,UAAU,CAAC,GAAG,MAAM,CAAC;CAClE,CAAA;AAED,eAAO,MAAM,cAAc,UAAW,MAAM,YAAW,MAAM,WAyB5D,CAAA;AAED,eAAO,MAAM,qBAAqB,UAAW,MAAM,oBAAiC,CAAA;AAwDpF,eAAO,MAAM,YAAY,EAAE,YAI1B,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-unistyles",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Level up your React Native StyleSheet",
   "scripts": {
     "test": "jest",
@@ -41,6 +41,7 @@
   "devDependencies": {
     "@commitlint/config-conventional": "17.8.0",
     "@react-native/eslint-config": "0.74.0",
+    "@react-native/normalize-colors": "0.74.1",
     "@release-it/conventional-changelog": "5.1.1",
     "@testing-library/react-hooks": "8.0.1",
     "@types/jest": "29.5.5",
@@ -75,6 +76,7 @@
     "typescript": "5.2.2"
   },
   "peerDependencies": {
+    "@react-native/normalize-colors": "*",
     "react": "*",
     "react-native": "*",
     "react-native-web": "*"
@@ -122,7 +124,7 @@
     },
     "plugins": {
       "@release-it/conventional-changelog": {
-        "preset": "angular"
+        "preset": "conventionalcommits"
       }
     }
   },

package/src/hooks/useDimensions.web.ts

@@ -5,9 +5,13 @@ import { isServer } from '../utils'
 export const useDimensions = (): ScreenSize => {
     const timerRef = useRef<ReturnType<typeof setTimeout>>()
     const [screenSize, setScreenSize] = useState<ScreenSize>({
-        width: isServer ? 0 : window.innerWidth,
-        height: isServer ? 0 : window.innerHeight
-    })
+        width: isServer
+            ? undefined
+            : window.innerWidth,
+        height: isServer
+            ? undefined
+            : window.innerHeight
+    } as ScreenSize)
 
     useEffect(() => {
         const handleResize = () => {

package/src/utils/module.d.ts

@@ -0,0 +1,3 @@
+declare module '@react-native/normalize-colors' {
+    export default function normalizeColor(color: string): number | null
+}

package/src/utils/normalizer.ts

@@ -1,5 +1,6 @@
 // based on react-native-web normalizer
 // https://github.com/necolas/react-native-web
+import normalizeColors from '@react-native/normalize-colors'
 import type { TextShadow, Transforms, BoxShadow } from '../types'
 
 type Preprocessor = {
@@ -8,38 +9,31 @@ type Preprocessor = {
     createTransformValue(transforms: Required<Transforms>): string,
 }
 
-// for now supports
-// hex colors (3, 6, 8) chars
-// colors like orange red etc.
 export const normalizeColor = (color: string, opacity: number = 1) => {
-    if (!color.startsWith('#')) {
+    // If the opacity is 1 there's no need to normalize the color
+    if (opacity === 1) {
         return color
     }
 
-    if (color.length === 9) {
-        const [r, g, b, a] = color
-            .slice(1)
+    const integer = normalizeColors(color) as number | null
+
+    // If the colour is an unknown format, the return value is null
+    if (integer === null) {
+        return color
+    }
+
+    const hex = integer.toString(16).padStart(8, '0')
+
+    if (hex.length === 8) {
+        const [r = 0, g = 0, b = 0, a = 1] = hex
             .split(/(?=(?:..)*$)/)
             .map(x => parseInt(x, 16))
             .filter(num => !isNaN(num))
 
-        return `rgba(${r},${g},${b},${(a as number) / 255})`
+        return `rgba(${r},${g},${b},${((a as number) / 255) * opacity})`
     }
 
-    const sanitizedHex = color.length === 4
-        ? color
-            .slice(1)
-            .split('')
-            .map(char => `${char}${char}`)
-            .join('')
-        : color.slice(1)
-
-    return sanitizedHex
-        .split(/(?=(?:..)*$)/)
-        .map(x => parseInt(x, 16))
-        .filter(num => !isNaN(num))
-        .reduce((acc, color) => `${acc}${color},`, 'rgba(')
-        .concat(`${opacity})`)
+    return color
 }
 
 export const normalizeNumericValue = (value: number) => value ? `${value}px` : value