react-native-css 0.0.0-nightly.61d67fe → 0.0.0-nightly.7da12fa

package/dist/commonjs/utilities/style-descriptor.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isStyleDescriptorArray = isStyleDescriptorArray;
+exports.isStyleFunction = isStyleFunction;
+function isStyleDescriptorArray(value) {
+  if (Array.isArray(value)) {
+    // If its an array and the first item is an object, the only allowed value is an array
+    return typeof value[0] === "object" ? Array.isArray(value[0]) : true;
+  }
+  return false;
+}
+function isStyleFunction(value) {
+  if (Array.isArray(value)) {
+    return typeof value[0] === "object" ? Object.keys(value[0]).length === 0 : false;
+  }
+  return false;
+}
+//# sourceMappingURL=style-descriptor.js.map

package/dist/commonjs/utilities/style-descriptor.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["isStyleDescriptorArray","value","Array","isArray","isStyleFunction","Object","keys","length"],"sourceRoot":"../../../src","sources":["utilities/style-descriptor.ts"],"mappings":";;;;;;;AAEO,SAASA,sBAAsBA,CACpCC,KAAc,EACc;EAC5B,IAAIC,KAAK,CAACC,OAAO,CAACF,KAAK,CAAC,EAAE;IACxB;IACA,OAAO,OAAOA,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ,GAAGC,KAAK,CAACC,OAAO,CAACF,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,IAAI;EACtE;EAEA,OAAO,KAAK;AACd;AAEO,SAASG,eAAeA,CAC7BH,KAAsB,EACE;EACxB,IAAIC,KAAK,CAACC,OAAO,CAACF,KAAK,CAAC,EAAE;IACxB,OAAO,OAAOA,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ,GAC/BI,MAAM,CAACC,IAAI,CAACL,KAAK,CAAC,CAAC,CAAC,CAAC,CAACM,MAAM,KAAK,CAAC,GAClC,KAAK;EACX;EAEA,OAAO,KAAK;AACd","ignoreList":[]}

package/dist/commonjs/web/api.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.VariableContextProvider = VariableContextProvider;
+exports.useUnstableNativeVariable = exports.useNativeVariable = exports.useCssElement = exports.styled = exports.colorScheme = void 0;
+exports.vars = vars;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _assignStyle = require("./assign-style.js");
+var _jsxRuntime = require("react/jsx-runtime");
+const defaultMapping = {
+  className: "style"
+};
+const styled = (baseComponent, mapping = defaultMapping, _options) => {
+  return props => {
+    return useCssElement(baseComponent, props, mapping);
+  };
+};
+exports.styled = styled;
+const useCssElement = (component, incomingProps, mapping) => {
+  let props = {
+    ...incomingProps
+  };
+  for (const [key, value] of Object.entries(mapping)) {
+    const source = props[key];
+    if (!source) {
+      continue;
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
+    delete props[key];
+    let target = typeof value === "object" ? value.target : value;
+    if (typeof target === "boolean") {
+      target = key;
+    }
+    props = (0, _assignStyle.assignStyle)({
+      $$css: true,
+      [key]: source
+    }, target.split("."), props);
+  }
+  return /*#__PURE__*/(0, _react.createElement)(component, props);
+};
+exports.useCssElement = useCssElement;
+const colorScheme = exports.colorScheme = {
+  get() {
+    return _reactNative.Appearance.getColorScheme();
+  },
+  set(name) {
+    _reactNative.Appearance.setColorScheme(name);
+  }
+};
+
+/**
+ * @deprecated Use `<VariableContextProvider />` instead.
+ */
+function vars(variables) {
+  const $variables = {};
+  for (const [key, value] of Object.entries(variables)) {
+    if (key.startsWith("--")) {
+      $variables[key] = value.toString();
+    } else {
+      $variables[`--${key}`] = value.toString();
+    }
+  }
+  return $variables;
+}
+function VariableContextProvider(props) {
+  const style = (0, _react.useMemo)(() => {
+    return {
+      display: "contents",
+      ...Object.fromEntries(Object.entries(props.value).map(([key, value]) => [key.startsWith("--") ? key : `--${key}`, value]))
+    };
+  }, [props.value]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    style: style,
+    children: props.children
+  });
+}
+const useNativeVariable = () => {
+  throw new Error("useNativeVariable is not supported in web");
+};
+exports.useNativeVariable = useNativeVariable;
+const useUnstableNativeVariable = () => {
+  throw new Error("useUnstableNativeVariable is not supported in web");
+};
+exports.useUnstableNativeVariable = useUnstableNativeVariable;
+//# sourceMappingURL=api.js.map

package/dist/commonjs/web/api.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["_react","require","_reactNative","_assignStyle","_jsxRuntime","defaultMapping","className","styled","baseComponent","mapping","_options","props","useCssElement","exports","component","incomingProps","key","value","Object","entries","source","target","assignStyle","$$css","split","createElement","colorScheme","get","Appearance","getColorScheme","set","name","setColorScheme","vars","variables","$variables","startsWith","toString","VariableContextProvider","style","useMemo","display","fromEntries","map","jsx","children","useNativeVariable","Error","useUnstableNativeVariable"],"sourceRoot":"../../../src","sources":["web/api.tsx"],"mappings":"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","ignoreList":[]}

package/dist/commonjs/web/assign-style.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["assignStyle","value","targets","props","target","shift","length","cb","args"],"sourceRoot":"../../../src","sources":["web/assign-style.ts"],"mappings":";;;;;;AAAA;AACO,SAASA,WAAWA,CACzBC,KAA0B,EAC1BC,OAAiB,EACjBC,KAA0B,EAC1B;EACA,MAAMC,MAAM,GAAGF,OAAO,CAACG,KAAK,CAAC,CAAC;EAE9B,IAAI,CAACD,MAAM,EAAE,OAAO,CAAC,CAAC;EAEtB,IAAIF,OAAO,CAACI,MAAM,KAAK,CAAC,EAAE;IACxB,IAAI,OAAOH,KAAK,CAACC,MAAM,CAAC,KAAK,UAAU,EAAE;MACvC,MAAMG,EAAE,GAAGJ,KAAK,CAACC,MAAM,CAAC;MACxBD,KAAK,CAACC,MAAM,CAAC,GAAG,CAAC,GAAGI,IAAW,KAAK;QAClC,OAAO,CAACD,EAAE,CAAC,GAAGC,IAAI,CAAC,EAAEP,KAAK,CAAC;MAC7B,CAAC;IACH,CAAC,MAAM;MACLE,KAAK,CAACC,MAAM,CAAC,GAAG,CAACD,KAAK,CAACC,MAAM,CAAC,EAAEH,KAAK,CAAC;IACxC;IACA,OAAOE,KAAK;EACd,CAAC,MAAM;IACLA,KAAK,CAACC,MAAM,CAAC,KAAK,CAAC,CAAC;IACpBJ,WAAW,CAACC,KAAK,EAAEC,OAAO,EAAEC,KAAK,CAACC,MAAM,CAAC,CAAC;IAC1C,OAAOD,KAAK;EACd;AACF","ignoreList":[]}

package/dist/commonjs/web/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["require","_api","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sourceRoot":"../../../src","sources":["web/index.ts"],"mappings":";;;;;AACAA,OAAA;AAGA,IAAAC,IAAA,GAAAD,OAAA;AAAAE,MAAA,CAAAC,IAAA,CAAAF,IAAA,EAAAG,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAJ,IAAA,CAAAI,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,CAAA;MAAA,OAAAR,IAAA,CAAAI,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}

package/dist/commonjs/web/metro.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../src","sources":["web/metro.ts"],"mappings":"","ignoreList":[]}

package/dist/module/babel/index.js

@@ -1,9 +1,9 @@
 "use strict";
 
 /* eslint-disable */
-module.exports = function () {
+export default function () {
   return {
     plugins: [require("./import-plugin").default, "react-native-worklets/plugin"]
   };
-};
+}
 //# sourceMappingURL=index.js.map

package/dist/module/babel/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["module","exports","plugins","require","default"],"sourceRoot":"../../../src","sources":["babel/index.ts"],"mappings":";;AAAA;AACAA,MAAM,CAACC,OAAO,GAAG,YAAY;EAC3B,OAAO;IACLC,OAAO,EAAE,CACPC,OAAO,CAAC,iBAAiB,CAAC,CAACC,OAAO,EAClC,8BAA8B;EAElC,CAAC;AACH,CAAC","ignoreList":[]}
+{"version":3,"names":["plugins","require","default"],"sourceRoot":"../../../src","sources":["babel/index.ts"],"mappings":";;AAAA;AACA,eAAe,YAAY;EACzB,OAAO;IACLA,OAAO,EAAE,CACPC,OAAO,CAAC,iBAAiB,CAAC,CAACC,OAAO,EAClC,8BAA8B;EAElC,CAAC;AACH","ignoreList":[]}

package/dist/module/compiler/atRules.js

@@ -7,42 +7,20 @@ import { splitByDelimiter } from "./split-by-delimiter.js";
  * @react-native                               *
  ***********************************************/
 
-export function maybeMutateReactNativeOptions(rule, builder) {
+export function maybeMutateReactNativeOptions(rule, _builder) {
   if (rule.type !== "custom" || rule.value?.name !== "react-native") {
     return;
   }
-  const {
-    declarations
-  } = rule.value.body.value;
-  if (!declarations) return;
-  for (const declaration of declarations) {
-    if (declaration.property !== "custom") continue;
-    switch (declaration.value.name) {
-      case "preserve-variables":
-        {
-          declaration.value.value.forEach(token => {
-            if (token.type !== "dashed-ident") {
-              return;
-            }
-            if (token.value !== "true" && token.value !== "false") {
-              return;
-            }
-            builder.setOptions("preserveVariables", token.value === "true");
-          });
-          break;
-        }
-      default:
-        break;
-    }
-  }
+
+  // TODO: Add inline options
 }
 
 /***********************************************
- * @prop                                       *
+ * @nativeMapping                                       *
  ***********************************************/
 
-function isPropAtRule(rule) {
-  return rule.type === "unknown" && rule.value.name === "prop";
+function isNativeMappingAtRule(rule) {
+  return rule.type === "unknown" && rule.value.name === "nativeMapping";
 }
 export function parsePropAtRule(rules) {
   // Include any default mapping here
@@ -53,16 +31,18 @@ export function parsePropAtRule(rules) {
     "stroke-width": ["strokeWidth"],
     "-webkit-line-clamp": ["numberOfLines"],
     "-rn-ripple-color": ["android_ripple", "color"],
-    "-rn-ripple-style": ["android_ripple", "borderless"]
+    "-rn-ripple-style": ["android_ripple", "borderless"],
+    "-rn-ripple-radius": ["android_ripple", "radius"],
+    "-rn-ripple-layer": ["android_ripple", "foreground"]
   };
   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 => {
@@ -74,37 +54,51 @@ export 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 = {}) {
-  const [from, to] = splitByDelimiter(token, item => {
+function nativeMappingAtRuleBlock(token, mapping = {}) {
+  let [from, to] = splitByDelimiter(token, item => {
     return item.value.type === "colon";
   });
-  if (!from || from.length !== 1) {
+
+  // @nativeMapping <to>; (has no from value)
+  if (!to) {
+    to = from;
+    from = [{
+      type: "token",
+      value: {
+        type: "ident",
+        value: "*"
+      }
+    }];
+  }
+
+  // We can only map from a single property
+  if (!from || from.length !== 1 || !to) {
     return mapping;
   }
   const fromToken = from[0];
   if (!fromToken || fromToken.value.type !== "ident") {
     return mapping;
   }
-  if (!to) {
-    mapping["*"] = toRNProperty(fromToken.value.value);
-    return mapping;
-  }
-  mapping[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 [toRNProperty(item.value.value)];
+        return item.value.value.split(".").map(part => toRNProperty(part));
       default:
         return [];
     }
   });
+  if (value.length === 2 && value[0] === "&" && value[1]) {
+    value = value[1];
+  }
+  mapping[toRNProperty(fromToken.value.value)] = value;
   return mapping;
 }
 //# sourceMappingURL=atRules.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["toRNProperty","splitByDelimiter","maybeMutateReactNativeOptions","rule","builder","type","value","name","declarations","body","declaration","property","forEach","token","setOptions","isPropAtRule","parsePropAtRule","rules","mapping","prelude","length","filter","item","propAtRuleBlock","block","blocks","blockRules","from","to","fromToken","flatMap","index"],"sourceRoot":"../../../src","sources":["compiler/atRules.ts"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["toRNProperty","splitByDelimiter","maybeMutateReactNativeOptions","rule","_builder","type","value","name","isNativeMappingAtRule","parsePropAtRule","rules","mapping","prelude","length","filter","item","nativeMappingAtRuleBlock","block","blocks","blockRules","token","from","to","fromToken","flatMap","index","split","map","part"],"sourceRoot":"../../../src","sources":["compiler/atRules.ts"],"mappings":"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","ignoreList":[]}

package/dist/module/compiler/compiler.js

@@ -3,11 +3,12 @@
 /* eslint-disable */
 import { inspect } from "node:util";
 import { debug } from "debug";
-import { transform as lightningcss } from "lightningcss";
 import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules.js";
 import { parseContainerCondition } from "./container-query.js";
-import { parseDeclaration } from "./declarations.js";
+import { parseAngle, parseColor, parseDeclaration, parseLength, reduceParseUnparsed, round } from "./declarations.js";
+import { inlineVariables } from "./inline-variables.js";
 import { extractKeyFrames } from "./keyframes.js";
+import { lightningcssLoader } from "./lightningcss-loader.js";
 import { parseMediaQuery } from "./media-query.js";
 import { StylesheetBuilder } from "./stylesheet.js";
 import { supportsConditionValid } from "./supports.js";
@@ -36,7 +37,76 @@ export function compile(code, options = {}) {
     }
   }
   const builder = new StylesheetBuilder(options);
-  logger(`Start lightningcss`);
+  const {
+    lightningcss,
+    Features
+  } = lightningcssLoader();
+  logger(`Lightningcss first pass`);
+
+  /**
+   * Use the lightningcss library to traverse the CSS AST and extract style declarations and animations
+   *
+   * devongovett on Aug 20, 2023
+   * > calc simplification happens during the initial parse phase, which is before custom visitors run. Currently there is not an additional simplification pass done after transforms, resulting in the output you see here.
+   * https://github.com/parcel-bundler/lightningcss/issues/554#issuecomment-1685143494
+   *
+   * Due to the above issue, we run lightningcss twice
+   */
+
+  const vars = new Map();
+  const firstPassVisitor = {};
+  if (options.inlineRem !== false) {
+    firstPassVisitor.Length = length => {
+      if (length.unit !== "rem" || options.inlineRem === false) {
+        return length;
+      }
+      return {
+        unit: "px",
+        value: round(length.value * (options.inlineRem ?? 14))
+      };
+    };
+  }
+  if (options.inlineVariables !== false) {
+    const exclusionList = options.inlineVariables?.exclude ?? [];
+    firstPassVisitor.Declaration = decl => {
+      if (decl.property === "custom" && decl.value.name.startsWith("--") && !exclusionList.includes(decl.value.name)) {
+        const entry = vars.get(decl.value.name) ?? {
+          count: 0,
+          value: [...decl.value.value, {
+            type: "token",
+            value: {
+              type: "white-space",
+              value: " "
+            }
+          }]
+        };
+        entry.count++;
+        vars.set(decl.value.name, entry);
+      }
+    };
+    firstPassVisitor.StyleSheetExit = sheet => {
+      return inlineVariables(sheet, vars);
+    };
+  }
+  const {
+    code: firstPass
+  } = lightningcss({
+    code: typeof code === "string" ? new TextEncoder().encode(code) : code,
+    include: Features.DoublePositionGradients | Features.ColorFunction,
+    exclude: Features.VendorPrefixes,
+    visitor: firstPassVisitor,
+    filename: options.filename ?? "style.css",
+    projectRoot: options.projectRoot ?? process.cwd()
+  });
+  if (isLoggerEnabled) {
+    const MAX_LOG_SIZE = 100 * 1024; // 100KB
+    if (firstPass.length <= MAX_LOG_SIZE) {
+      logger(firstPass.toString());
+    } else {
+      logger(`firstPass buffer too large to log in full (${firstPass.length} bytes). Preview: ` + firstPass.subarray(0, 1024).toString() + "...");
+    }
+  }
+  logger(`Lightningcss second pass`);
   const customAtRules = {
     "react-native": {
       body: "declaration-list"
@@ -45,6 +115,7 @@ export function compile(code, options = {}) {
   const visitor = {
     Rule(rule) {
       maybeMutateReactNativeOptions(rule, builder);
+      return rule;
     },
     StyleSheetExit(sheet) {
       if (isLoggerEnabled) {
@@ -61,31 +132,11 @@ export function compile(code, options = {}) {
         // We have processed this rule, so now delete it from the AST
       }
       logger(`Exiting lightningcss`);
+      return sheet;
     }
   };
-  if (options.stripUnusedVariables) {
-    const onVarUsage = token => {
-      if (token.type === "function") {
-        token.value.arguments.forEach(token => onVarUsage(token));
-      } else if (token.type === "var") {
-        builder.varUsage.add(token.value.name.ident);
-        if (token.value.fallback) {
-          const fallbackValues = token.value.fallback;
-          fallbackValues.forEach(varObj => onVarUsage(varObj));
-        }
-      }
-    };
-    visitor.Declaration = decl => {
-      if (decl.property === "unparsed" || decl.property === "custom") {
-        decl.value.value.forEach(token => onVarUsage(token));
-      }
-      return decl;
-    };
-  }
-
-  // Use the lightningcss library to traverse the CSS AST and extract style declarations and animations
   lightningcss({
-    code: typeof code === "string" ? new TextEncoder().encode(code) : code,
+    code: firstPass,
     visitor,
     filename: options.filename ?? "style.css",
     projectRoot: options.projectRoot ?? process.cwd()
@@ -99,7 +150,7 @@ export function compile(code, options = {}) {
 /**
  * Extracts style declarations and animations from a given CSS rule, based on its type.
  */
-function extractRule(rule, builder) {
+function extractRule(rule, builder, mapping = {}) {
   // Check the rule's type to determine which extraction function to call
   switch (rule.type) {
     case "keyframes":
@@ -111,13 +162,13 @@ function extractRule(rule, builder) {
     case "container":
       {
         // If the rule is a container, extract it with the `extractedContainer` function
-        extractContainer(rule.value, builder);
+        extractContainer(rule.value, builder, mapping);
         break;
       }
     case "media":
       {
         // If the rule is a media query, extract it with the `extractMedia` function
-        extractMedia(rule.value, builder);
+        extractMedia(rule.value, builder, mapping);
         break;
       }
     case "nested-declarations":
@@ -126,7 +177,9 @@ function extractRule(rule, builder) {
         const declarationBlock = value.declarations;
         if (declarationBlock) {
           if (declarationBlock.declarations?.length) {
-            builder.newNestedRule();
+            builder.newNestedRule({
+              mapping
+            });
             for (const declaration of declarationBlock.declarations) {
               parseDeclaration(declaration, builder);
             }
@@ -134,6 +187,7 @@ function extractRule(rule, builder) {
           }
           if (declarationBlock.importantDeclarations?.length) {
             builder.newNestedRule({
+              mapping,
               important: true
             });
             for (const declaration of declarationBlock.importantDeclarations) {
@@ -148,19 +202,22 @@ function extractRule(rule, builder) {
       {
         const value = rule.value;
         const declarationBlock = value.declarations;
-        const mapping = parsePropAtRule(value.rules);
+        mapping = {
+          ...mapping,
+          ...parsePropAtRule(value.rules)
+        };
 
         // If the rule is a style declaration, extract it with the `getExtractedStyle` function and store it in the `declarations` map
         builder = builder.fork("style", value.selectors);
         if (declarationBlock) {
-          if (declarationBlock.declarations) {
+          if (declarationBlock.declarations?.length) {
             builder.newRule(mapping);
             for (const declaration of declarationBlock.declarations) {
               parseDeclaration(declaration, builder);
             }
             builder.applyRuleToSelectors();
           }
-          if (declarationBlock.importantDeclarations) {
+          if (declarationBlock.importantDeclarations?.length) {
             builder.newRule(mapping, {
               important: true
             });
@@ -172,30 +229,32 @@ function extractRule(rule, builder) {
         }
         if (value.rules) {
           for (const nestedRule of value.rules) {
-            extractRule(nestedRule, builder);
+            extractRule(nestedRule, builder, mapping);
           }
         }
         break;
       }
     case "layer-block":
       for (const layerRule of rule.value.rules) {
-        extractRule(layerRule, builder);
+        extractRule(layerRule, builder, mapping);
       }
       break;
     case "supports":
       if (supportsConditionValid(rule.value.condition)) {
         for (const layerRule of rule.value.rules) {
-          extractRule(layerRule, builder);
+          extractRule(layerRule, builder, mapping);
         }
       }
       break;
+    case "property":
+      extractPropertyRule(rule.value, builder);
+      break;
     case "custom":
     case "font-face":
     case "font-palette-values":
     case "font-feature-values":
     case "namespace":
     case "layer-statement":
-    case "property":
     case "view-transition":
     case "ignored":
     case "unknown":
@@ -222,7 +281,7 @@ function extractRule(rule, builder) {
  *
  * @returns undefined if no screen media queries are found in the mediaRule, else it returns the extracted styles.
  */
-function extractMedia(mediaRule, builder) {
+function extractMedia(mediaRule, builder, mapping) {
   builder = builder.fork("media");
 
   // Initialize an empty array to store screen media queries
@@ -249,7 +308,7 @@ function extractMedia(mediaRule, builder) {
 
   // Iterate over all rules in the mediaRule and extract their styles using the updated CompilerCollection
   for (const rule of mediaRule.rules) {
-    extractRule(rule, builder);
+    extractRule(rule, builder, mapping);
   }
 }
 
@@ -258,7 +317,7 @@ function extractMedia(mediaRule, builder) {
  * @param collection - The CompilerCollection object to use when extracting styles.
  * @param parseOptions - The CssToReactNativeRuntimeOptions object to use when parsing styles.
  */
-function extractContainer(containerRule, builder) {
+function extractContainer(containerRule, builder, mapping) {
   builder = builder.fork("container");
 
   // Iterate over all rules inside the containerRule and extract their styles using the updated CompilerCollection
@@ -270,7 +329,53 @@ function extractContainer(containerRule, builder) {
   }
   builder.addContainerQuery(query);
   for (const rule of containerRule.rules) {
-    extractRule(rule, builder);
+    extractRule(rule, builder, mapping);
+  }
+}
+function extractPropertyRule(propertyRule, builder) {
+  const {
+    initialValue,
+    name
+  } = propertyRule;
+  if (initialValue == null) {
+    return;
+  }
+  const varName = name.startsWith("--") ? name.slice(2) : name;
+  const value = parsePropertyInitialValue(initialValue, builder);
+  if (value !== undefined) {
+    builder.addRootVariable(varName, value);
+  }
+}
+function parsePropertyInitialValue(component, builder) {
+  switch (component.type) {
+    case "length":
+      return parseLength(component.value, builder);
+    case "number":
+    case "integer":
+      return round(component.value);
+    case "percentage":
+      return `${round(component.value * 100)}%`;
+    case "color":
+      return parseColor(component.value, builder);
+    case "angle":
+      return parseAngle(component.value, builder);
+    case "length-percentage":
+      return parseLength(component.value, builder);
+    case "token-list":
+      return reduceParseUnparsed(component.value, builder, "@property", false);
+    case "custom-ident":
+    case "literal":
+      return component.value;
+    case "repeated":
+      {
+        const results = component.value.components.map(c => parsePropertyInitialValue(c, builder)).filter(v => v !== undefined);
+        // Unwrap single-child repeated values so downstream consumers get a
+        // scalar instead of a 1-element array. For example, `<length>+` with
+        // initial-value `10px` should produce the same shape as `<length>`.
+        return results.length === 1 ? results[0] : results;
+      }
+    default:
+      return undefined;
   }
 }
 //# sourceMappingURL=compiler.js.map