rn-css 1.8.13 → 1.9.0

package/README.md

@@ -18,6 +18,9 @@ const MyComponent = styled.View`
   &:hover {
     background: red;
   }
+  &:active {
+    background: blue;
+  }
   @media (min-width: 600px) {
     border: 1px solid rgb(128, 128, 128);
   }
@@ -245,6 +248,19 @@ const Hoverable = styled.View`
 `
 ```
 
+### <ins>active:</ins>
+
+You can add active with `&:active { <instructions> }`. An element is considered `active` as long as it is focused.
+
+```javascript
+const Activable = styled.View`
+  background: red;
+  &:active {
+    background: blue;
+  }
+`
+```
+
 ### <ins>media queries:</ins>
 
 You can add media queries with `@media <constraints> { <instructions> }`

package/dist/app.json

@@ -0,0 +1,4 @@
+{
+    "name": "ReactNativeStyledComponents",
+    "displayName": "ReactNativeStyledComponents"
+}

package/dist/cssToRN/convert.js

@@ -1,12 +1,32 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.cornerValue = exports.sideValue = exports.font = exports.transform = exports.textDecoration = exports.background = exports.placeContent = exports.flexFlow = exports.flex = exports.shadow = exports.borderLike = exports.border = void 0;
-/** Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min( */
-function isNumber(value) {
+/**
+ * Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min(.
+ * Optionally accept "auto" value (for margins)
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns true if the value is a number
+ */
+function isNumber(value, acceptAuto) {
+    if (acceptAuto && value === 'auto')
+        return true;
     return value.match(/^[+-]?(\.\d|\d|calc\(|max\(|min\()/mg);
 }
-/** Split the value into numbers values and non numbers values */
-function findNumbers(value) {
+/**
+ * Check if the value is a number. Numbers start with a digit, a decimal point or calc(, max( ou min(.
+ * Optionally accept "auto" value (for margins)
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns true if the value is a number
+ */
+/**
+ * Split the value into numbers values and non numbers values
+ * @param value The value to check
+ * @param acceptAuto true if auto is an accepted value
+ * @returns An object containing the number and non number values as arrays.
+ */
+function findNumbers(value, acceptAuto) {
     const result = {
         nonNumbers: [],
         numbers: []
@@ -21,7 +41,7 @@ function findNumbers(value) {
         if (group)
             result.nonNumbers.push(val);
         else
-            result[isNumber(val) ? 'numbers' : 'nonNumbers'].push(val);
+            result[isNumber(val, acceptAuto) ? 'numbers' : 'nonNumbers'].push(val);
     });
     return result;
 }
@@ -219,7 +239,7 @@ exports.font = font;
 function sideValue(prefixKey, value, postFix = '') {
     if (value === 'none')
         return sideValue(prefixKey, '0', postFix);
-    const [top = value, right = top, bottom = top, left = right] = findNumbers(value).numbers;
+    const [top = value, right = top, bottom = top, left = right] = findNumbers(value, prefixKey === 'margin').numbers;
     return {
         [prefixKey + 'Top' + postFix]: top,
         [prefixKey + 'Left' + postFix]: left,