react-native-css 0.0.0-nightly.99fdf44 → 0.0.0-nightly.9e1cae4

package/README.md

@@ -117,7 +117,7 @@ export default function App() {
   return (
     <MyView className="container">
       <MyView className="box" />
-    </View>
+    </MyView>
   );
 }
 ```
@@ -176,15 +176,15 @@ export default function App() {
 > This hook may not support all features of the library.
 > This hooks does not support container queries or inheritance for children elements.
 
-#### `useNativeCssVariable`
+#### `useNativeVariable`
 
-If you just require a CSS variable value, you can use the `useNativeCssVariable` hook:
+If you just require a CSS variable value, you can use the `useNativeVariable` hook:
 
 ```ts
-import { useNativeCssVariable } from 'react-native-css';
+import { useNativeVariable } from 'react-native-css';
 
 export default function App() {
-  const myColor = useNativeCssVariable("--my-color");
+  const myColor = useNativeVariable("--my-color");
 
   return (
     <View style={{ backgroundColor: myColor }}>

package/dist/commonjs/compiler/atRules.js

@@ -20,11 +20,11 @@ function maybeMutateReactNativeOptions(rule, _builder) {
 }
 
 /***********************************************
- * @prop                                       *
+ * @nativeMapping                                       *
  ***********************************************/
 
-function isPropAtRule(rule) {
-  return rule.type === "unknown" && rule.value.name === "prop";
+function isNativeMappingAtRule(rule) {
+  return rule.type === "unknown" && rule.value.name === "nativeMapping";
 }
 function parsePropAtRule(rules) {
   // Include any default mapping here
@@ -41,12 +41,12 @@ function parsePropAtRule(rules) {
   };
   if (!rules) return mapping;
   for (const rule of rules) {
-    if (!isPropAtRule(rule)) continue;
+    if (!isNativeMappingAtRule(rule)) continue;
     if (rule.value.prelude.length > 0) {
       const prelude = rule.value.prelude.filter(item => {
         return item.value.type !== "white-space";
       });
-      propAtRuleBlock(prelude, mapping);
+      nativeMappingAtRuleBlock(prelude, mapping);
     } else if (rule.value.block) {
       // Remove all whitespace tokens
       const blocks = rule.value.block.filter(item => {
@@ -58,19 +58,19 @@ function parsePropAtRule(rules) {
         return item.value.type === "semicolon";
       });
       for (const block of blockRules) {
-        propAtRuleBlock(block, mapping);
+        nativeMappingAtRuleBlock(block, mapping);
       }
     }
   }
   return mapping;
 }
-function propAtRuleBlock(token, mapping = {}) {
+function nativeMappingAtRuleBlock(token, mapping = {}) {
   let [from, to] = (0, _splitByDelimiter.splitByDelimiter)(token, item => {
     return item.value.type === "colon";
   });
 
-  // @props <to>; (has no from value)
-  if (!to && from) {
+  // @nativeMapping <to>; (has no from value)
+  if (!to) {
     to = from;
     from = [{
       type: "token",
@@ -82,27 +82,27 @@ function propAtRuleBlock(token, mapping = {}) {
   }
 
   // We can only map from a single property
-  if (!from || from.length !== 1) {
+  if (!from || from.length !== 1 || !to) {
     return mapping;
   }
   const fromToken = from[0];
   if (!fromToken || fromToken.value.type !== "ident") {
     return mapping;
   }
-  if (!to) {
-    mapping["*"] = (0, _selectors.toRNProperty)(fromToken.value.value);
-    return mapping;
-  }
-  mapping[(0, _selectors.toRNProperty)(fromToken.value.value)] = to.flatMap((item, index) => {
+  let value = to.flatMap((item, index) => {
     switch (item.value.type) {
       case "delim":
-        return index === 0 && item.value.value === "*" ? ["*"] : [];
+        return index === 0 && item.value.value === "&" ? ["&"] : [];
       case "ident":
-        return [(0, _selectors.toRNProperty)(item.value.value)];
+        return item.value.value.split(".").map(part => (0, _selectors.toRNProperty)(part));
       default:
         return [];
     }
   });
+  if (value.length === 2 && value[0] === "&" && value[1]) {
+    value = value[1];
+  }
+  mapping[(0, _selectors.toRNProperty)(fromToken.value.value)] = value;
   return mapping;
 }
 //# sourceMappingURL=atRules.js.map

package/dist/commonjs/compiler/atRules.js.map

@@ -1 +1 @@
-{"version":3,"names":["_selectors","require","_splitByDelimiter","maybeMutateReactNativeOptions","rule","_builder","type","value","name","isPropAtRule","parsePropAtRule","rules","mapping","prelude","length","filter","item","propAtRuleBlock","block","blocks","blockRules","splitByDelimiter","token","from","to","fromToken","toRNProperty","flatMap","index"],"sourceRoot":"../../../src","sources":["compiler/atRules.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["_selectors","require","_splitByDelimiter","maybeMutateReactNativeOptions","rule","_builder","type","value","name","isNativeMappingAtRule","parsePropAtRule","rules","mapping","prelude","length","filter","item","nativeMappingAtRuleBlock","block","blocks","blockRules","splitByDelimiter","token","from","to","fromToken","flatMap","index","split","map","part","toRNProperty"],"sourceRoot":"../../../src","sources":["compiler/atRules.ts"],"mappings":";;;;;;;AAQA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAYA;AACA;AACA;;AAcO,SAASE,6BAA6BA,CAC3CC,IAA8B,EAC9BC,QAA2B,EAC3B;EACA,IAAID,IAAI,CAACE,IAAI,KAAK,QAAQ,IAAIF,IAAI,CAACG,KAAK,EAAEC,IAAI,KAAK,cAAc,EAAE;IACjE;EACF;;EAEA;AACF;;AAEA;AACA;AACA;;AAEA,SAASC,qBAAqBA,CAACL,IAAuB,EAAsB;EAC1E,OAAOA,IAAI,CAACE,IAAI,KAAK,SAAS,IAAIF,IAAI,CAACG,KAAK,CAACC,IAAI,KAAK,eAAe;AACvE;AAEO,SAASE,eAAeA,CAACC,KAA6B,EAAE;EAC7D;EACA,MAAMC,OAAyB,GAAG;IAChC,aAAa,EAAE,CAAC,aAAa,CAAC;IAC9B,MAAM,EAAE,CAAC,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,QAAQ,CAAC;IACpB,cAAc,EAAE,CAAC,aAAa,CAAC;IAC/B,oBAAoB,EAAE,CAAC,eAAe,CAAC;IACvC,kBAAkB,EAAE,CAAC,gBAAgB,EAAE,OAAO,CAAC;IAC/C,kBAAkB,EAAE,CAAC,gBAAgB,EAAE,YAAY,CAAC;IACpD,mBAAmB,EAAE,CAAC,gBAAgB,EAAE,QAAQ,CAAC;IACjD,kBAAkB,EAAE,CAAC,gBAAgB,EAAE,YAAY;EACrD,CAAC;EAED,IAAI,CAACD,KAAK,EAAE,OAAOC,OAAO;EAE1B,KAAK,MAAMR,IAAI,IAAIO,KAAK,EAAE;IACxB,IAAI,CAACF,qBAAqB,CAACL,IAAI,CAAC,EAAE;IAElC,IAAIA,IAAI,CAACG,KAAK,CAACM,OAAO,CAACC,MAAM,GAAG,CAAC,EAAE;MACjC,MAAMD,OAAO,GAAGT,IAAI,CAACG,KAAK,CAACM,OAAO,CAACE,MAAM,CAAEC,IAAI,IAAK;QAClD,OAAOA,IAAI,CAACT,KAAK,CAACD,IAAI,KAAK,aAAa;MAC1C,CAAC,CAAC;MAEFW,wBAAwB,CAACJ,OAAO,EAAED,OAAO,CAAC;IAC5C,CAAC,MAAM,IAAIR,IAAI,CAACG,KAAK,CAACW,KAAK,EAAE;MAC3B;MACA,MAAMC,MAAM,GAAGf,IAAI,CAACG,KAAK,CAACW,KAAK,CAACH,MAAM,CAAEC,IAAI,IAAK;QAC/C,OAAOA,IAAI,CAACT,KAAK,CAACD,IAAI,KAAK,aAAa;MAC1C,CAAC,CAAC;;MAEF;MACA,MAAMc,UAAU,GAAG,IAAAC,kCAAgB,EAACF,MAAM,EAAGH,IAAI,IAAK;QACpD,OAAOA,IAAI,CAACT,KAAK,CAACD,IAAI,KAAK,WAAW;MACxC,CAAC,CAAC;MAEF,KAAK,MAAMY,KAAK,IAAIE,UAAU,EAAE;QAC9BH,wBAAwB,CAACC,KAAK,EAAEN,OAAO,CAAC;MAC1C;IACF;EACF;EAEA,OAAOA,OAAO;AAChB;AAEA,SAASK,wBAAwBA,CAC/BK,KAAiD,EACjDV,OAAyB,GAAG,CAAC,CAAC,EACZ;EAClB,IAAI,CAACW,IAAI,EAAEC,EAAE,CAAC,GAAG,IAAAH,kCAAgB,EAACC,KAAK,EAAGN,IAAI,IAAK;IACjD,OAAOA,IAAI,CAACT,KAAK,CAACD,IAAI,KAAK,OAAO;EACpC,CAAC,CAAC;;EAEF;EACA,IAAI,CAACkB,EAAE,EAAE;IACPA,EAAE,GAAGD,IAAI;IACTA,IAAI,GAAG,CACL;MACEjB,IAAI,EAAE,OAAO;MACbC,KAAK,EAAE;QAAED,IAAI,EAAE,OAAO;QAAEC,KAAK,EAAE;MAAI;IACrC,CAAC,CACF;EACH;;EAEA;EACA,IAAI,CAACgB,IAAI,IAAIA,IAAI,CAACT,MAAM,KAAK,CAAC,IAAI,CAACU,EAAE,EAAE;IACrC,OAAOZ,OAAO;EAChB;EAEA,MAAMa,SAAS,GAAGF,IAAI,CAAC,CAAC,CAAC;EACzB,IAAI,CAACE,SAAS,IAAIA,SAAS,CAAClB,KAAK,CAACD,IAAI,KAAK,OAAO,EAAE;IAClD,OAAOM,OAAO;EAChB;EAEA,IAAIL,KAAwB,GAAGiB,EAAE,CAACE,OAAO,CAAC,CAACV,IAAI,EAAEW,KAAK,KAAK;IACzD,QAAQX,IAAI,CAACT,KAAK,CAACD,IAAI;MACrB,KAAK,OAAO;QACV,OAAOqB,KAAK,KAAK,CAAC,IAAIX,IAAI,CAACT,KAAK,CAACA,KAAK,KAAK,GAAG,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE;MAC7D,KAAK,OAAO;QACV,OAAOS,IAAI,CAACT,KAAK,CAACA,KAAK,CAACqB,KAAK,CAAC,GAAG,CAAC,CAACC,GAAG,CAAEC,IAAI,IAAK,IAAAC,uBAAY,EAACD,IAAI,CAAC,CAAC;MACtE;QACE,OAAO,EAAE;IACb;EACF,CAAC,CAAC;EAEF,IAAIvB,KAAK,CAACO,MAAM,KAAK,CAAC,IAAIP,KAAK,CAAC,CAAC,CAAC,KAAK,GAAG,IAAIA,KAAK,CAAC,CAAC,CAAC,EAAE;IACtDA,KAAK,GAAGA,KAAK,CAAC,CAAC,CAAC;EAClB;EAEAK,OAAO,CAAC,IAAAmB,uBAAY,EAACN,SAAS,CAAClB,KAAK,CAACA,KAAK,CAAC,CAAC,GAAGA,KAAK;EAEpD,OAAOK,OAAO;AAChB","ignoreList":[]}

package/dist/commonjs/compiler/declarations.js

@@ -27,6 +27,7 @@ exports.parseCalcArguments = parseCalcArguments;
 exports.parseCalcFn = parseCalcFn;
 exports.parseColor = parseColor;
 exports.parseColorDeclaration = parseColorDeclaration;
+exports.parseColorMix = parseColorMix;
 exports.parseColorOrAutoDeclaration = parseColorOrAutoDeclaration;
 exports.parseCustomDeclaration = parseCustomDeclaration;
 exports.parseDeclaration = parseDeclaration;
@@ -862,6 +863,8 @@ function parseUnparsed(tokenOrValue, builder, property, allowAuto = allowAutoPro
           case "min":
           case "clamp":
             return parseCalcFn(tokenOrValue.value.name, tokenOrValue.value.arguments, builder, property);
+          case "color-mix":
+            return parseColorMix(tokenOrValue.value.arguments, builder, property);
           default:
             {
               builder.addWarning("value", `${tokenOrValue.value.name}()`);
@@ -1472,8 +1475,8 @@ function parseTextShadow(declaration, builder) {
     return;
   }
   builder.addDescriptor("textShadowColor", parseColor(textShadow.color, builder));
-  builder.addDescriptor("*.textShadowOffset.width", parseLength(textShadow.xOffset, builder));
-  builder.addDescriptor("*.textShadowOffset.height", parseLength(textShadow.yOffset, builder));
+  builder.addDescriptor("&.textShadowOffset.width", parseLength(textShadow.xOffset, builder));
+  builder.addDescriptor("&.textShadowOffset.height", parseLength(textShadow.yOffset, builder));
   builder.addDescriptor("textShadowRadius", parseLength(textShadow.blur, builder));
 }
 function parseTextDecorationStyle(declaration, builder) {
@@ -1717,12 +1720,12 @@ function parseBoxShadow({
   value
 }, builder) {
   for (const [index, shadow] of value.entries()) {
-    builder.addDescriptor(`*.boxShadow.[${index}].color`, parseColor(shadow.color, builder));
-    builder.addDescriptor(`*.boxShadow.[${index}].offsetX`, parseLength(shadow.xOffset, builder));
-    builder.addDescriptor(`*.boxShadow.[${index}].offsetY`, parseLength(shadow.yOffset, builder));
-    builder.addDescriptor(`*.boxShadow.[${index}].blurRadius`, parseLength(shadow.blur, builder));
-    builder.addDescriptor(`*.boxShadow.[${index}].spreadDistance`, parseLength(shadow.spread, builder));
-    builder.addDescriptor(`*.boxShadow.[${index}].inset`, shadow.inset ? true : undefined);
+    builder.addDescriptor(`&.boxShadow.[${index}].color`, parseColor(shadow.color, builder));
+    builder.addDescriptor(`&.boxShadow.[${index}].offsetX`, parseLength(shadow.xOffset, builder));
+    builder.addDescriptor(`&.boxShadow.[${index}].offsetY`, parseLength(shadow.yOffset, builder));
+    builder.addDescriptor(`&.boxShadow.[${index}].blurRadius`, parseLength(shadow.blur, builder));
+    builder.addDescriptor(`&.boxShadow.[${index}].spreadDistance`, parseLength(shadow.spread, builder));
+    builder.addDescriptor(`&.boxShadow.[${index}].inset`, shadow.inset ? true : undefined);
   }
 }
 function parseBoxSizing(declaration, builder) {
@@ -1914,6 +1917,54 @@ function parseCalcFn(name, tokens, builder, property) {
   }
   return;
 }
+function parseColorMix(tokens, builder, property) {
+  const [inToken, whitespace, colorSpace, comma, ...rest] = tokens;
+  if (typeof inToken !== "object" || inToken.type !== "token" || inToken.value.type !== "ident" || inToken.value.value !== "in") {
+    return;
+  }
+  if (typeof whitespace !== "object" || whitespace.type !== "token" || whitespace.value.type !== "white-space") {
+    return;
+  }
+  if (typeof comma !== "object" || comma.type !== "token" || comma.value.type !== "comma") {
+    return;
+  }
+  const colorSpaceArg = parseUnparsed(colorSpace, builder, property);
+  if (typeof colorSpaceArg !== "string") {
+    return;
+  }
+  let nextToken = rest.shift();
+  const leftColorArg = parseUnparsed(nextToken, builder, property);
+  if (!leftColorArg) {
+    return;
+  }
+  nextToken = rest.shift();
+  let leftColorPercentage;
+  if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
+    leftColorPercentage = parseUnparsed(nextToken, builder, property);
+    nextToken = rest.shift();
+  }
+  if (typeof nextToken !== "object" || nextToken.type !== "token" || nextToken.value.type !== "comma") {
+    return;
+  }
+  nextToken = rest.shift();
+  const rightColorArg = parseUnparsed(nextToken, builder, property);
+  if (rightColorArg === "transparent") {
+    // Ignore the rest, treat as single color with alpha
+    return [{}, "colorMix", [colorSpaceArg, leftColorArg, leftColorPercentage]];
+  }
+  nextToken = rest.shift();
+  let rightColorPercentage;
+  if (nextToken?.type !== "token" || nextToken.value.type !== "comma") {
+    rightColorPercentage = parseUnparsed(nextToken, builder, property);
+    nextToken = rest.shift();
+  }
+
+  // We should have expired all tokens now
+  if (nextToken) {
+    return;
+  }
+  return [{}, "colorMix", [colorSpaceArg, leftColorArg, leftColorPercentage, rightColorArg, rightColorPercentage]];
+}
 function parseCalcArguments([...args], builder, property) {
   const parsed = [];
   for (const arg of args) {
@@ -2223,13 +2274,13 @@ function parseGradientItem(item, builder) {
 }
 function parseObjectFit(declaration, builder) {
   builder.addMapping({
-    "object-fit": "contentFit"
+    "object-fit": ["contentFit"]
   });
   builder.addDescriptor("object-fit", parseUnparsed(declaration.value, builder, "object-fit"));
 }
 function parseObjectPosition(declaration, builder) {
   builder.addMapping({
-    "object-position": "contentPosition"
+    "object-position": ["contentPosition"]
   });
   builder.addDescriptor("object-position", [{}, "join", [parseUnparsed(declaration.value, builder, "object-position"), " "]]);
 }