react-native-css 3.0.0-preview.2 → 3.0.0-preview.4

package/README.md

@@ -13,10 +13,12 @@ The goal of this library is to provide the most complete CSS support for React N
 ### Metro based projects
 
 > [!TIP]  
-> All Expo and React Native Community CLI projects use Metro as the bundler, so this guide applies to them.
+> Most React Native projects use Metro as the bundler.
 
 You will need to add `withReactNativeCSS` to your Metro configuration.
 
+#### Expo Projects
+
 ```ts
 import { getDefaultConfig } from "expo/metro-config";
 import { withReactNativeCSS } from "react-native-css/metro";
@@ -31,6 +33,17 @@ export default withReactNativeCSS(defaultConfig, {
 });
 ```
 
+#### Non-Expo Projects
+
+`react-native-css` relies on the bundler to process CSS files. Currently only Expo provides a CSS asset pipeline. Since the Expo SDK is modular, you can add this functionality by just using the `@expo/metro-config` package.
+
+Follow the Expo instructions, but replace the `expo` package with `@expo/metro-config`.
+
+```diff
+- import { getDefaultConfig } from "expo/metro-config";
++ import { getDefaultConfig } from "@expo/metro-config";
+```
+
 ### Other bundlers
 
 `react-native-css` officially only supports Metro as the bundler, but we welcome community contributions to support other bundlers like Webpack, Vite or Turbopack.
@@ -88,23 +101,42 @@ module.exports = withReactNativeCSS(
 );
 ```
 
-### Via hooks
+### Via `styled`
+
+You can also use the `styled` function to get styled components.
+
+```ts
+import { View } from 'react-native';
+import { styled } from 'react-native-css';
+
+import "./styles.css";
+
+const MyView = styled(View)
+
+export default function App() {
+  return (
+    <MyView className="container">
+      <MyView className="box" />
+    </View>
+  );
+}
+```
 
-#### `useCssElement`
+### Via hooks
 
 You can also use the `useCssElement` hook.
 
 ```ts
-import { View as RNView } from 'react-native';
+import { View } from 'react-native';
 import { useCssElement } from 'react-native-css';
 
 export default function App() {
-  const Container = useCssElement(RNView, {
+  const Container = useCssElement(View, {
     className: "container",
   });
 
-  const Box = useCssElement(RNView, {
-    className: "container",
+  const Box = useCssElement(View, {
+    className: "box",
   });
 
   return (
@@ -116,11 +148,11 @@ export default function App() {
 ```
 
 > [!IMPORTANT]  
-> The hook returns a React Element, not a style object. The element will work on all platforms and will correctly apply the React context needed to support all features of the library
+> The hook returns a React Element, not a style object.
 
 #### `useNativeCssStyle`
 
-If you just require the style object, you can use the `useNativeCssStyle` hook:
+If you just require the style object, you can use the `useNativeCssStyle` hook
 
 ```ts
 import { View as RNView } from 'react-native';
@@ -152,7 +184,7 @@ If you just require a CSS variable value, you can use the `useNativeCssVariable`
 import { useNativeCssVariable } from 'react-native-css';
 
 export default function App() {
-  const myColor = useNativeCssVariable("my-color");
+  const myColor = useNativeCssVariable("--my-color");
 
   return (
     <View style={{ backgroundColor: myColor }}>
@@ -168,6 +200,102 @@ export default function App() {
 > This hook may will only work on native platforms. It will return `undefined` on web.
 > This hook may not support all features of the library.
 
+## CSS variables
+
+It is preferable that all CSS variables are set via CSS. If you need values to change dynamically, we recommend using a class to change the values.
+
+```css
+.theme-red {
+  --brand-color: red;
+}
+
+.theme-blue {
+  --brand-color: blue;
+}
+```
+
+As a last resort, you can use `VariableContext` to dynamically set CSS variables in JavaScript
+
+```ts
+import { VariableContext } from 'react-native-css';
+
+export default function App() {
+  return (
+    <VariableContext values={{ "--my-color": "red" }}>
+      <Text className="my-color-text">
+        Hello, world!
+      </Text>
+    </VariableContext>
+  )
+}
+```
+
+This API only allows for setting CSS variables as primitive values. For more complex styles, you will need to use a helper CSS class.
+
+> [!IMPORTANT]  
+> By using `VariableContext` you may need to disable the `inlineVariable` optimization
+
+## Optimizations
+
+CSS is a dynamic styling language that use highly optimized engines that are not available in React Native. Instead, we optimize the styles to improve performance
+
+These optimizations are only applied in native environments and are enabled by default.
+
+### Inline REM units
+
+All `rem` units are converted to `dp` units at build time. On native, the default dp is 14. You can change the default `rem` by passing a `inlineRem` option to the `withReactNativeCSS` function.
+
+```tsx
+export default withReactNativeCSS(defaultConfig, {
+  inlineRem: 16, // change to 16dp,
+});
+```
+
+### Inline CSS Custom Properties (variables)
+
+Custom properties (sometimes referred to as CSS variables or cascading variables) are a way to store values that can be reused throughout a CSS document. They are defined using a property name that starts with `--`, and their values can be accessed using the `var()` function.
+
+To improve performance, Custom properties that are only set **once** in the CSS file are inlined at build time.
+
+For example
+
+```css
+:root {
+  --my-var: red;
+  --var-with-two-possible-values: blue;
+}
+
+.my-class {
+  --var-with-two-possible-values: green;
+  color: var(--my-var);
+  background-color: var(--var-with-two-possible-values);
+}
+```
+
+Is converted to:
+
+```css
+:root {
+  --var-with-two-possible-values: blue;
+}
+
+.my-class {
+  color: red; /* This was inlined and the variable was removed */
+
+  /* These are preserved as there are multiple possible values */
+  --var-with-two-possible-values: green;
+  background-color: var(--var-with-two-possible-values);
+}
+```
+
+Using `VariableContext` with `inlineVariables` may have unexpected results, as rules may have been rewritten not to use a variable. You can disable this behavior by setting `inlineVariables: false`
+
+```tsx
+export default withReactNativeCSS(defaultConfig, {
+  inlineVariables: false,
+});
+```
+
 ## Contributing
 
 See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

package/dist/commonjs/compiler/atRules.js

@@ -11,42 +11,20 @@ var _splitByDelimiter = require("./split-by-delimiter.js");
  * @react-native                               *
  ***********************************************/
 
-function maybeMutateReactNativeOptions(rule, builder) {
+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";
 }
 function parsePropAtRule(rules) {
   // Include any default mapping here
@@ -63,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 => {
@@ -80,37 +58,51 @@ 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] = (0, _splitByDelimiter.splitByDelimiter)(token, item => {
+function nativeMappingAtRuleBlock(token, mapping = {}) {
+  let [from, to] = (0, _splitByDelimiter.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["*"] = (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","declarations","body","declaration","property","forEach","token","setOptions","isPropAtRule","parsePropAtRule","rules","mapping","prelude","length","filter","item","propAtRuleBlock","block","blocks","blockRules","splitByDelimiter","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":"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","ignoreList":[]}

package/dist/commonjs/compiler/compiler.js

@@ -6,11 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.compile = compile;
 var _nodeUtil = require("node:util");
 var _debug = require("debug");
-var _lightningcss = require("lightningcss");
 var _atRules = require("./atRules.js");
 var _containerQuery = require("./container-query.js");
 var _declarations = require("./declarations.js");
+var _inlineVariables = require("./inline-variables.js");
 var _keyframes = require("./keyframes.js");
+var _lightningcssLoader = require("./lightningcss-loader.js");
 var _mediaQuery = require("./media-query.js");
 var _stylesheet = require("./stylesheet.js");
 var _supports = require("./supports.js");
@@ -41,7 +42,76 @@ function compile(code, options = {}) {
     }
   }
   const builder = new _stylesheet.StylesheetBuilder(options);
-  logger(`Start lightningcss`);
+  const {
+    lightningcss,
+    Features
+  } = (0, _lightningcssLoader.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: (0, _declarations.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 (0, _inlineVariables.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"
@@ -50,6 +120,7 @@ function compile(code, options = {}) {
   const visitor = {
     Rule(rule) {
       (0, _atRules.maybeMutateReactNativeOptions)(rule, builder);
+      return rule;
     },
     StyleSheetExit(sheet) {
       if (isLoggerEnabled) {
@@ -66,31 +137,11 @@ 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
-  (0, _lightningcss.transform)({
-    code: typeof code === "string" ? new TextEncoder().encode(code) : code,
+  lightningcss({
+    code: firstPass,
     visitor,
     filename: options.filename ?? "style.css",
     projectRoot: options.projectRoot ?? process.cwd()
@@ -104,7 +155,7 @@ 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":
@@ -116,13 +167,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":
@@ -131,7 +182,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) {
               (0, _declarations.parseDeclaration)(declaration, builder);
             }
@@ -139,6 +192,7 @@ function extractRule(rule, builder) {
           }
           if (declarationBlock.importantDeclarations?.length) {
             builder.newNestedRule({
+              mapping,
               important: true
             });
             for (const declaration of declarationBlock.importantDeclarations) {
@@ -153,19 +207,22 @@ function extractRule(rule, builder) {
       {
         const value = rule.value;
         const declarationBlock = value.declarations;
-        const mapping = (0, _atRules.parsePropAtRule)(value.rules);
+        mapping = {
+          ...mapping,
+          ...(0, _atRules.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) {
               (0, _declarations.parseDeclaration)(declaration, builder);
             }
             builder.applyRuleToSelectors();
           }
-          if (declarationBlock.importantDeclarations) {
+          if (declarationBlock.importantDeclarations?.length) {
             builder.newRule(mapping, {
               important: true
             });
@@ -177,20 +234,20 @@ 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 ((0, _supports.supportsConditionValid)(rule.value.condition)) {
         for (const layerRule of rule.value.rules) {
-          extractRule(layerRule, builder);
+          extractRule(layerRule, builder, mapping);
         }
       }
       break;
@@ -227,7 +284,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
@@ -254,7 +311,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);
   }
 }
 
@@ -263,7 +320,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
@@ -275,7 +332,7 @@ function extractContainer(containerRule, builder) {
   }
   builder.addContainerQuery(query);
   for (const rule of containerRule.rules) {
-    extractRule(rule, builder);
+    extractRule(rule, builder, mapping);
   }
 }
 //# sourceMappingURL=compiler.js.map