rn-css 1.4.3 → 1.5.2

package/README.md

@@ -2,6 +2,8 @@
 
 This is basically [styled-components](https://github.com/styled-components/styled-components) with a much better support for React-Native, and some awesome additional features. You can check the docs of [styled-components](https://github.com/styled-components/styled-components) for more details about the basic API. I'll focus here on the differences.
 
+**Current version: 1.5** [See the Changelog](./CHANGELOG.md)
+
 ---
 
 ## Purpose
@@ -331,6 +333,14 @@ const View = styled.View`
 
 ---
 
+## Theming:
+
+To match the API of styled-components, we offer the same abilities for theming [See the documentation](https://styled-components.com/docs/advanced).
+
+This relies on the [SharedValue](#shared-value) context. This means that you cannot use the Shared Value system **and** this theming système. Pick the one that best suits your needs.
+
+---
+
 ## Coming later:
 
 linear-gradient, background-repeat, transitions, animations

package/dist/convertStyle.js

@@ -9,7 +9,7 @@ const convertStyle = (rnStyle, units) => {
     ['width', 'height'].forEach(key => {
         if (!units[key] && rnStyle[key]) {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            const converted = convertUnits_1.convertValue(key, rnStyle[key], units);
+            const converted = (0, convertUnits_1.convertValue)(key, rnStyle[key], units);
             if (!Number.isNaN(converted))
                 units[key] = converted;
         }
@@ -21,24 +21,24 @@ const convertStyle = (rnStyle, units) => {
             // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
             convertedStyle.transform = rnStyle.transform.map(transformation => {
                 const result = {};
-                Object.keys(transformation).forEach(k => (result[k] = convertUnits_1.convertValue(k, transformation[k], units)));
+                Object.keys(transformation).forEach(k => (result[k] = (0, convertUnits_1.convertValue)(k, transformation[k], units)));
                 return result;
             });
         }
         else if (key === 'shadowOffset' && rnStyle.shadowOffset) {
             convertedStyle.shadowOffset = {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                width: convertUnits_1.convertValue(key, rnStyle.shadowOffset.width || '0', units),
+                width: (0, convertUnits_1.convertValue)(key, rnStyle.shadowOffset.width || '0', units),
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                height: convertUnits_1.convertValue(key, rnStyle.shadowOffset.height || '0', units)
+                height: (0, convertUnits_1.convertValue)(key, rnStyle.shadowOffset.height || '0', units)
             };
         }
         else if (key === 'textShadowOffset' && rnStyle.textShadowOffset) {
             convertedStyle.textShadowOffset = {
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                width: convertUnits_1.convertValue(key, rnStyle.textShadowOffset.width || '0', units),
+                width: (0, convertUnits_1.convertValue)(key, rnStyle.textShadowOffset.width || '0', units),
                 // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-                height: convertUnits_1.convertValue(key, rnStyle.textShadowOffset.height || '0', units)
+                height: (0, convertUnits_1.convertValue)(key, rnStyle.textShadowOffset.height || '0', units)
             };
         }
         // Font family should not be transformed (same as cursor for web in case of base64 value)
@@ -48,7 +48,7 @@ const convertStyle = (rnStyle, units) => {
         else {
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment
             // @ts-ignore
-            convertedStyle[key] = convertUnits_1.convertValue(key, value, units);
+            convertedStyle[key] = (0, convertUnits_1.convertValue)(key, value, units);
         }
     });
     return convertedStyle;

package/dist/convertUnits.js

@@ -53,11 +53,13 @@ function convertValue(key, value, units) {
     });
     // We handle extra calculations (calc, min, max, parsing...)
     if (convertedValue.startsWith('calc('))
-        return maths_1.calculate(convertedValue.substring(4)); // remove calc. We can keep the parenthesis
+        return (0, maths_1.calculate)(convertedValue.substring(4)); // remove calc. We can keep the parenthesis
     else if (convertedValue.startsWith('max('))
-        return maths_1.max(convertedValue.substring(4, convertedValue.length - 1)); // Remove max()
+        return (0, maths_1.max)(convertedValue.substring(4, convertedValue.length - 1)); // Remove max()
     else if (convertedValue.startsWith('min('))
-        return maths_1.min(convertedValue.substring(4, convertedValue.length - 1)); // remove min()
+        return (0, maths_1.min)(convertedValue.substring(4, convertedValue.length - 1)); // remove min()
+    else if (key === 'fontWeight')
+        return convertedValue; // fontWeight must be a string even when it is an integer value.
     else if (parseFloat(convertedValue) + '' === convertedValue)
         return parseFloat(convertedValue);
     else

package/dist/cssToRN/index.js

@@ -18,7 +18,7 @@ function cssToStyle(css) {
     const result = {};
     // Find media queries
     const cssWithoutMediaQueries = css.replace(/@media(.*?){[^{}]*}/gmis, res => {
-        const { css, isValid } = mediaQueries_1.createMedia(res);
+        const { css, isValid } = (0, mediaQueries_1.createMedia)(res);
         const style = cssChunkToStyle(css);
         const mediaQuery = (context) => isValid(context) && style;
         if (!result.media)
@@ -56,7 +56,7 @@ function cssToRNStyle(css, units = {}) {
         ...units
     };
     const rnStyle = cssChunkToStyle(css);
-    return convertStyle_1.default(rnStyle, finalUnits);
+    return (0, convertStyle_1.default)(rnStyle, finalUnits);
 }
 exports.cssToRNStyle = cssToRNStyle;
 function cssChunkToStyle(css) {
@@ -74,43 +74,43 @@ function cssChunkToStyle(css) {
             case 'borderLeft':
             case 'borderRight':
             case 'borderBottom':
-                Object.assign(result, convert_1.border(key, value));
+                Object.assign(result, (0, convert_1.border)(key, value));
                 break;
             case 'borderWidth':
-                Object.assign(result, convert_1.sideValue('border', value, 'Width'));
+                Object.assign(result, (0, convert_1.sideValue)('border', value, 'Width'));
                 break;
             case 'background':
                 Object.assign(result, { backgroundColor: value });
                 break;
             case 'padding':
             case 'margin':
-                Object.assign(result, convert_1.sideValue(key, value));
+                Object.assign(result, (0, convert_1.sideValue)(key, value));
                 break;
             case 'borderRadius':
-                Object.assign(result, convert_1.cornerValue('border', value, 'Radius'));
+                Object.assign(result, (0, convert_1.cornerValue)('border', value, 'Radius'));
                 break;
             case 'font':
-                Object.assign(result, convert_1.font(value));
+                Object.assign(result, (0, convert_1.font)(value));
                 break;
             case 'textDecoration':
-                Object.assign(result, convert_1.textDecoration(value));
+                Object.assign(result, (0, convert_1.textDecoration)(value));
                 break;
             case 'placeContent':
-                Object.assign(result, convert_1.placeContent(value));
+                Object.assign(result, (0, convert_1.placeContent)(value));
                 break;
             case 'flex':
-                Object.assign(result, convert_1.flex(value));
+                Object.assign(result, (0, convert_1.flex)(value));
                 break;
             case 'flexFlow':
-                Object.assign(result, convert_1.flexFlow(value));
+                Object.assign(result, (0, convert_1.flexFlow)(value));
                 break;
             case 'transform':
-                Object.assign(result, convert_1.transform(value));
+                Object.assign(result, (0, convert_1.transform)(value));
                 break;
             case 'boxShadow':
             case 'textShadow':
                 // We need to replace boxShadow by shadow
-                Object.assign(result, convert_1.shadow(key === 'boxShadow' ? 'shadow' : key, value));
+                Object.assign(result, (0, convert_1.shadow)(key === 'boxShadow' ? 'shadow' : key, value));
                 break;
             // Other keys don't require any special treatment
             // eslint-disable-next-line @typescript-eslint/ban-ts-comment

package/dist/cssToRN/mediaQueries.js

@@ -54,7 +54,7 @@ function convertAnyValue(key, value, units) {
             dppx: 'px',
             x: 'px'
         };
-        const [num, unit] = convertUnits_1.parseValue(value);
+        const [num, unit] = (0, convertUnits_1.parseValue)(value);
         return num + densityUnitsEquivalence[unit];
     }
     else if (key === 'deviceAspectRatio' || key === 'aspectRatio') {
@@ -62,7 +62,7 @@ function convertAnyValue(key, value, units) {
         const [w, h] = value.split('/').map(v => parseInt(v, 10));
         return w / h;
     }
-    return convertUnits_1.convertValue(key, value, units);
+    return (0, convertUnits_1.convertValue)(key, value, units);
 }
 /** Check if a constraint is respected by the provided context */
 function evaluateConstraint(constraint, context) {

package/dist/features.js

@@ -14,7 +14,7 @@ exports.FontSizeContext = react_1.default.createContext(16);
 exports.zIndexContext = react_1.default.createContext((_zIndex) => { });
 /** HOC that will apply the screen size to the styles defined with vmin, vmax, vw, vh units, and handle media queries constraints */
 const useScreenSize = () => {
-    const { width, height } = react_native_1.useWindowDimensions();
+    const { width, height } = (0, react_native_1.useWindowDimensions)();
     return { vw: width / 100, vh: height / 100, vmin: Math.min(width, height) / 100, vmax: Math.max(width, height) / 100 };
 };
 exports.useScreenSize = useScreenSize;
@@ -37,7 +37,7 @@ exports.useHover = useHover;
 /** HOC that will apply the style provided in the media queries */
 const useMediaQuery = (media, units) => {
     if (media) {
-        const context = mediaQueries_1.createContext(units);
+        const context = (0, mediaQueries_1.createContext)(units);
         const mediaStyles = media.map(m => m(context)).filter(m => m);
         if (!mediaStyles.length)
             return;
@@ -59,9 +59,8 @@ const useLayout = (onLayout) => {
         if (unmounted.current)
             return;
         const { width, height } = event.nativeEvent.layout;
-        if (width !== layout.width || height !== layout.height)
-            setLayout({ width, height });
-    }, [onLayout, layout.width, layout.height]);
+        setLayout(layout => layout.width === width && layout.height === height ? layout : { width, height });
+    }, [onLayout]);
     return { onLayout: updateLayout, ...layout };
 };
 exports.useLayout = useLayout;
@@ -70,7 +69,7 @@ const useFontSize = (setFontSize, rem = 16) => {
     const em = react_1.default.useContext(exports.FontSizeContext);
     if (!setFontSize)
         return { em };
-    const [fontSize, fontUnit] = convertUnits_1.parseValue(setFontSize);
+    const [fontSize, fontUnit] = (0, convertUnits_1.parseValue)(setFontSize);
     const isRelative = ['rem', 'em', '%'].includes(fontUnit || '');
     if (isRelative) {
         const newSize = fontUnit === 'em' ? em * fontSize