@colorye/react-native-css 0.3.0

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@colorye/react-native-css",
+  "version": "0.3.0",
+  "author": "Rye Nguyen <ryenguyen7411@gmail.com>",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "packageManager": "yarn@4.18.0+sha512.fcb8716fe7cd0eece141ffc18b92193a9df9204c1ba83189c288835223fc0bbe64af473bab0d5e9927a7daeb5caf2bb07eb2787cc9338ca040ea125f2a1f2f7e",
+  "scripts": {
+    "prepare": "yarn build:js",
+    "build:native": "node scripts/build-native.js",
+    "build:js": "rm -rf ./dist && yarn run babel ./src -d ./dist --copy-files && cp src/index.d.ts dist/index.d.ts",
+    "build": "yarn build:native && yarn build:js"
+  },
+  "devDependencies": {
+    "@babel/cli": "^7.22.9",
+    "@babel/core": "^7.22.9",
+    "@babel/generator": "^7.25.0",
+    "@babel/preset-env": "^7.22.9"
+  },
+  "dependencies": {
+    "lightningcss": "^1.29.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-native": "*"
+  },
+  "files": [
+    "dist",
+    "src",
+    "crates/transformer/index.js",
+    "crates/transformer/*.node",
+    "crates/transformer/transformer.node",
+    "types.d.ts",
+    "package.json",
+    "README.md"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./types": "./types.d.ts",
+    "./transformer": "./dist/transformer.js",
+    "./native": "./crates/transformer/index.js",
+    "./babel": "./dist/babel.js",
+    "./exported-stylesheet.json": "./dist/exported-stylesheet.json",
+    "./dist/transformer-runtime": "./dist/transformer-runtime.js",
+    "./dist/transformer-runtime.js": "./dist/transformer-runtime.js"
+  }
+}

package/src/babel.js

@@ -0,0 +1,271 @@
+import fs from "fs";
+import nodePath from "path";
+import {
+  getInheritStyleExpression,
+  getRootInheritStyleExpression,
+  getStaticMergeExpression,
+  getStyleExpression,
+  inlineStaticAttributes,
+  isFragmentElement,
+  isImportOrRequire,
+  isRootLevelJSXElement,
+  tryGetStaticStyleInfo,
+} from "./utils/babel.js";
+
+const libRoot = nodePath.dirname(__filename);
+
+// Cache for loaded stylesheets
+const stylesheetCache = new Map();
+
+/**
+ * Load pre-computed stylesheet JSON (generated by Metro transformer)
+ */
+function loadStylesheet(cssPath, fileDir) {
+  if (stylesheetCache.has(cssPath)) {
+    return stylesheetCache.get(cssPath);
+  }
+
+  try {
+    const cwd = process.cwd();
+    const cleanPath = cssPath.replace(/^@\//, "");
+
+    // 1. Try project root relative paths
+    const projectRootJson = nodePath.resolve(cwd, cleanPath.endsWith(".json") ? cleanPath : `${cleanPath}.json`);
+    if (fs.existsSync(projectRootJson)) {
+      const content = fs.readFileSync(projectRootJson, "utf-8");
+      const stylesheet = JSON.parse(content);
+      stylesheetCache.set(cssPath, stylesheet);
+      return stylesheet;
+    }
+
+    const defaultIndexJson = nodePath.resolve(cwd, "index.css.json");
+    if (fs.existsSync(defaultIndexJson)) {
+      const content = fs.readFileSync(defaultIndexJson, "utf-8");
+      const stylesheet = JSON.parse(content);
+      stylesheetCache.set(cssPath, stylesheet);
+      return stylesheet;
+    }
+
+    // 2. Try fileDir if provided
+    if (fileDir) {
+      const localJson = nodePath.resolve(fileDir, cssPath);
+      if (fs.existsSync(localJson)) {
+        const content = fs.readFileSync(localJson, "utf-8");
+        const stylesheet = JSON.parse(content);
+        stylesheetCache.set(cssPath, stylesheet);
+        return stylesheet;
+      }
+    }
+
+    // 3. Try resolving the module if it's a module specifier like @colorye/react-native-css/exported-stylesheet.json
+    try {
+      const resolvedModule = require.resolve(cssPath, { paths: [cwd, libRoot] });
+      if (fs.existsSync(resolvedModule)) {
+        const content = fs.readFileSync(resolvedModule, "utf-8");
+        const stylesheet = JSON.parse(content);
+        stylesheetCache.set(cssPath, stylesheet);
+        return stylesheet;
+      }
+    } catch {}
+
+    // 4. Try the exported-stylesheet.json from lib directory
+    const exportedPath = nodePath.join(libRoot, "exported-stylesheet.json");
+    if (fs.existsSync(exportedPath)) {
+      const content = fs.readFileSync(exportedPath, "utf-8");
+      const stylesheet = JSON.parse(content);
+      stylesheetCache.set(cssPath, stylesheet);
+      return stylesheet;
+    }
+
+    // 5. Try .json next to the CSS file
+    const cssJsonPath = `${cssPath}.json`;
+    if (fs.existsSync(cssJsonPath)) {
+      const content = fs.readFileSync(cssJsonPath, "utf-8");
+      const stylesheet = JSON.parse(content);
+      stylesheetCache.set(cssPath, stylesheet);
+      return stylesheet;
+    }
+
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export default function ({ types: t }) {
+  return {
+    name: "@colorye/react-native-css",
+    visitor: {
+      Program: {
+        enter(path, state) {
+          if (!this.opts.css) {
+            console.warn("No css file provided");
+            return;
+          }
+
+          const { filename } = state.file.opts;
+          const options = {
+            paths: this.opts.paths || [],
+            excludes: this.opts.excludes || [],
+            css: this.opts.css,
+          };
+
+          // Normalize filename for cross-platform regex matching
+          const normalizedFilename = filename.replace(/\\/g, "/");
+          const regex = options.paths.map((p) => new RegExp(p));
+          const excludesRegex = options.excludes.map((p) => new RegExp(p));
+          if (
+            !regex.some((re) => normalizedFilename.match(re) || filename.match(re)) ||
+            excludesRegex.some((re) => normalizedFilename.match(re) || filename.match(re))
+          ) {
+            return;
+          }
+
+          state.enabled = true;
+
+          // Load pre-computed stylesheet for static inlining
+          state.stylesheetData = loadStylesheet(
+            options.css,
+            filename ? nodePath.dirname(filename) : null,
+          );
+
+          // Track which runtime helpers we need
+          state.needsGetStyle = false;
+          state.needsGetInheritStyle = false;
+          state.needsMergeStyles = false;
+
+          // Prepare runtime helper declarations
+          state.stylesheetId = path.scope.generateUidIdentifier();
+          state.stylesheet = t.variableDeclaration("var", [
+            t.variableDeclarator(
+              state.stylesheetId,
+              t.callExpression(t.identifier("require"), [t.stringLiteral(options.css)]),
+            ),
+          ]);
+
+          state.getStyleId = path.scope.generateUidIdentifier();
+          state.getStyle = t.variableDeclaration("var", [
+            t.variableDeclarator(
+              state.getStyleId,
+              t.memberExpression(
+                t.memberExpression(
+                  t.callExpression(t.identifier("require"), [
+                    t.stringLiteral("@colorye/react-native-css/dist/transformer-runtime"),
+                  ]),
+                  t.identifier("default"),
+                ),
+                t.identifier("getStyle"),
+              ),
+            ),
+          ]);
+
+          state.getInheritStyleId = path.scope.generateUidIdentifier();
+          state.getInheritStyle = t.variableDeclaration("var", [
+            t.variableDeclarator(
+              state.getInheritStyleId,
+              t.memberExpression(
+                t.memberExpression(
+                  t.callExpression(t.identifier("require"), [
+                    t.stringLiteral("@colorye/react-native-css/dist/transformer-runtime"),
+                  ]),
+                  t.identifier("default"),
+                ),
+                t.identifier("getInheritStyle"),
+              ),
+            ),
+          ]);
+
+          state.mergeStylesId = path.scope.generateUidIdentifier();
+          state.mergeStyles = t.variableDeclaration("var", [
+            t.variableDeclarator(
+              state.mergeStylesId,
+              t.memberExpression(
+                t.memberExpression(
+                  t.callExpression(t.identifier("require"), [
+                    t.stringLiteral("@colorye/react-native-css/dist/transformer-runtime"),
+                  ]),
+                  t.identifier("default"),
+                ),
+                t.identifier("mergeStyles"),
+              ),
+            ),
+          ]);
+        },
+        exit(path, state) {
+          if (!state.enabled) return;
+
+          const helpers = [];
+
+          // Only inject helpers that are actually used
+          if (state.needsGetStyle) {
+            helpers.push(state.stylesheet);
+            helpers.push(state.getStyle);
+          }
+          if (state.needsGetInheritStyle) {
+            helpers.push(state.getInheritStyle);
+          }
+          if (state.needsMergeStyles) {
+            helpers.push(state.mergeStyles);
+          }
+
+          if (helpers.length === 0) return;
+
+          const lastImport = path
+            .get("body")
+            .filter((p) => isImportOrRequire(p))
+            .pop();
+
+          helpers
+            .reverse()
+            .forEach((node) =>
+              lastImport ? lastImport.insertAfter(node) : path.unshiftContainer("body", node),
+            );
+        },
+      },
+      JSXElement(path, state) {
+        if (!state.enabled) return;
+        if (isFragmentElement(t, path.node.openingElement.name)) return;
+
+        // Perform zero-runtime static style inlining for static classes
+        inlineStaticAttributes(path, state, t);
+
+        const openingElement = path.node.openingElement;
+        const isRootLevel = isRootLevelJSXElement(path);
+
+        const shouldCombineStyles = openingElement.attributes.some(
+          (attr) => attr.name?.name === "__combinedStyles",
+        );
+
+        if (shouldCombineStyles) {
+          let styleExpressions;
+
+          // Try static inlining first (if stylesheet loaded and class is static)
+          if (state.stylesheetData) {
+            const staticInfo = tryGetStaticStyleInfo(path, state, t);
+
+            if (staticInfo) {
+              // Static class! Use lightweight mergeStyles
+              styleExpressions = getStaticMergeExpression(path, state, t, staticInfo);
+              state.needsMergeStyles = true;
+            }
+          }
+
+          if (!styleExpressions) {
+            // Fall back to full runtime getStyle
+            state.needsGetStyle = true;
+            styleExpressions = getStyleExpression(path, state, t);
+          }
+
+          const style = openingElement.attributes.find((attr) => attr.name?.name === "style");
+          if (style) {
+            style.value = t.jsxExpressionContainer(styleExpressions);
+          } else {
+            openingElement.attributes.push(
+              t.jsxAttribute(t.jsxIdentifier("style"), t.jsxExpressionContainer(styleExpressions)),
+            );
+          }
+        }
+      },
+    },
+  };
+}

package/src/exported-stylesheet.json

@@ -0,0 +1 @@
+{":root":{"--font-sans":"-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\",\n      \"Noto Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\",\n      \"Segoe UI Symbol\", \"Noto Color Emoji\"","--font-mono":"ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace","--spacing":".25rem","--font-weight-semibold":"600","--font-weight-bold":"700","--tracking-wider":".05em","--default-transition-duration":".15s","--default-transition-timing-function":"cubic-bezier(.4, 0, .2, 1)","--default-font-family":"var(--font-sans)","--default-mono-font-family":"var(--font-mono)","--color-yellow-500":"lab(77.1036% 13.6926 83.561)","--color-green-200":"lab(95.239% -10.8266 9.24107)","--color-green-500":"lab(57.4893% -40.5347 37.516)","--color-orange-500":"lab(66.2947% 49.6344 117.647)","--color-red-500":"lab(45.0394% 75.4726 71.4577)","--color-blue-200":"lab(88.4823% -12.6735 -16.6484)","--color-blue-500":"lab(43.2001% 15.8505 -66.7688)","--color-magenta-500":"lab(34.1384% 59.3948 -45.5364)","--color-black":"lab(0% 0 0)","--color-white":"lab(100% 0 0)","--color-navy-100":"lab(95.2175% -1.96895 -3.05733)","--color-navy-200":"lab(88.3954% -1.94326 -3.07581)","--color-navy-300":"lab(76.7078% -5.64724 -9.13405)","--color-navy-400":"lab(58.179% -8.91814 -15.0204)","--color-navy-500":"lab(39.6076% -11.2321 -20.6616)","--color-navy-600":"lab(20.9196% -10.7469 -25.9701)","--color-navy-700":"lab(3.17211% 1.80869 -28.6588)","--color-primary":"var(--color-blue-500)","--color-success":"var(--color-green-500)","--text-2xs":"10px","--text-2xs--line-height":"12px","--text-xs":"12px","--text-xs--line-height":"16px","--text-sm":"14px","--text-sm--line-height":"20px","--text-md":"18px","--text-md--line-height":"24px","--text-2xl":"32px","--text-2xl--line-height":"36px","--radius-lg":"16px","--radius-xl":"20px","--radius-full":"50%"},"static":{"position":"static"},"container":{"_static":{"width":"100%"},"_dynamic":{"@media (min-width: 580px)":{"_static":{"maxWidth":580},"_dynamic":{}},"@media (min-width: 768px)":{"_static":{"maxWidth":768},"_dynamic":{}},"@media (min-width: 980px)":{"_static":{"maxWidth":980},"_dynamic":{}},"@media (min-width: 1200px)":{"_static":{"maxWidth":1200},"_dynamic":{}}}},"mt-0.5":{"_static":{},"_dynamic":{"marginTop":"calc(var(--spacing) * .5)"}},"mt-1":{"_static":{},"_dynamic":{"marginTop":"var(--spacing)"}},"mt-4":{"_static":{},"_dynamic":{"marginTop":"calc(var(--spacing) * 4)"}},"mb-1":{"_static":{},"_dynamic":{"marginBottom":"var(--spacing)"}},"mb-2":{"_static":{},"_dynamic":{"marginBottom":"calc(var(--spacing) * 2)"}},"mb-3":{"_static":{},"_dynamic":{"marginBottom":"calc(var(--spacing) * 3)"}},"mb-4":{"_static":{},"_dynamic":{"marginBottom":"calc(var(--spacing) * 4)"}},"mb-5":{"_static":{},"_dynamic":{"marginBottom":"calc(var(--spacing) * 5)"}},"h-20":{"_static":{},"_dynamic":{"height":"calc(var(--spacing) * 20)"}},"w-20":{"_static":{},"_dynamic":{"width":"calc(var(--spacing) * 20)"}},"w-[48%]":{"width":"48%"},"flex-1":{"flex":1},"transform":{"_static":{},"_dynamic":{"transform":"var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, )"}},"flex-row":{"flexDirection":"row"},"flex-wrap":{"flexWrap":"wrap"},"items-center":{"alignItems":"center"},"justify-between":{"justifyContent":"space-between"},"justify-center":{"justifyContent":"center"},"gap-1":{"_static":{},"_dynamic":{"gap":"var(--spacing)"}},"gap-2":{"_static":{},"_dynamic":{"gap":"calc(var(--spacing) * 2)"}},"gap-y-2.5":{"_static":{},"_dynamic":{"rowGap":"calc(var(--spacing) * 2.5)"}},"rounded-full":{"_static":{},"_dynamic":{"borderRadius":"var(--radius-full)"}},"rounded-lg":{"_static":{},"_dynamic":{"borderRadius":"var(--radius-lg)"}},"rounded-xl":{"_static":{},"_dynamic":{"borderRadius":"var(--radius-xl)"}},"border":{"_static":{"borderWidth":1},"_dynamic":{"borderStyle":"var(--tw-border-style)"}},"border-s-4":{"_static":{"borderInlineStartWidth":4},"_dynamic":{"borderInlineStartStyle":"var(--tw-border-style)"}},"border-blue-500":{"_static":{},"_dynamic":{"borderColor":"var(--color-blue-500)"}},"border-blue-500/30":{"_static":{},"_dynamic":{"borderColor":"color-mix(in oklab, var(--color-blue-500) 30%, transparent)"}},"border-green-500":{"_static":{},"_dynamic":{"borderColor":"var(--color-green-500)"}},"border-green-500/30":{"_static":{},"_dynamic":{"borderColor":"color-mix(in oklab, var(--color-green-500) 30%, transparent)"}},"border-navy-300":{"_static":{},"_dynamic":{"borderColor":"var(--color-navy-300)"}},"border-navy-500":{"_static":{},"_dynamic":{"borderColor":"var(--color-navy-500)"}},"border-orange-500":{"_static":{},"_dynamic":{"borderColor":"var(--color-orange-500)"}},"border-primary":{"_static":{},"_dynamic":{"borderColor":"var(--color-primary)"}},"bg-blue-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-blue-500)"}},"bg-blue-500/10":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-blue-500) 10%, transparent)"}},"bg-blue-500/20":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-blue-500) 20%, transparent)"}},"bg-green-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-green-500)"}},"bg-green-500/10":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-green-500) 10%, transparent)"}},"bg-green-500/20":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-green-500) 20%, transparent)"}},"bg-magenta-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-magenta-500)"}},"bg-navy-100":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-100)"}},"bg-navy-600":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-600)"}},"bg-navy-700":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-700)"}},"bg-orange-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-orange-500)"}},"bg-orange-500/10":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-orange-500) 10%, transparent)"}},"bg-primary":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-primary)"}},"bg-primary/20":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-primary) 20%, transparent)"}},"bg-primary/40":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-primary) 40%, transparent)"}},"bg-primary/60":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-primary) 60%, transparent)"}},"bg-primary/80":{"_static":{},"_dynamic":{"backgroundColor":"color-mix(in oklab, var(--color-primary) 80%, transparent)"}},"bg-red-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-red-500)"}},"bg-success":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-success)"}},"bg-transparent":{"backgroundColor":"#0000"},"bg-yellow-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-yellow-500)"}},"bg-gradient-to-tr":{"_static":{"--tw-gradient-position":"to top right in oklab"},"_dynamic":{"backgroundImage":"linear-gradient(var(--tw-gradient-stops))"}},"p-1":{"_static":{},"_dynamic":{"paddingTop":"var(--spacing)","paddingRight":"var(--spacing)","paddingBottom":"var(--spacing)","paddingLeft":"var(--spacing)"}},"p-3":{"_static":{},"_dynamic":{"paddingTop":"calc(var(--spacing) * 3)","paddingRight":"calc(var(--spacing) * 3)","paddingBottom":"calc(var(--spacing) * 3)","paddingLeft":"calc(var(--spacing) * 3)"}},"p-3.5":{"_static":{},"_dynamic":{"paddingTop":"calc(var(--spacing) * 3.5)","paddingRight":"calc(var(--spacing) * 3.5)","paddingBottom":"calc(var(--spacing) * 3.5)","paddingLeft":"calc(var(--spacing) * 3.5)"}},"p-4":{"_static":{},"_dynamic":{"paddingTop":"calc(var(--spacing) * 4)","paddingRight":"calc(var(--spacing) * 4)","paddingBottom":"calc(var(--spacing) * 4)","paddingLeft":"calc(var(--spacing) * 4)"}},"p-5":{"_static":{},"_dynamic":{"paddingTop":"calc(var(--spacing) * 5)","paddingRight":"calc(var(--spacing) * 5)","paddingBottom":"calc(var(--spacing) * 5)","paddingLeft":"calc(var(--spacing) * 5)"}},"p-6":{"_static":{},"_dynamic":{"paddingTop":"calc(var(--spacing) * 6)","paddingRight":"calc(var(--spacing) * 6)","paddingBottom":"calc(var(--spacing) * 6)","paddingLeft":"calc(var(--spacing) * 6)"}},"px-3":{"_static":{},"_dynamic":{"paddingHorizontal":"calc(var(--spacing) * 3)"}},"px-3.5":{"_static":{},"_dynamic":{"paddingHorizontal":"calc(var(--spacing) * 3.5)"}},"px-4":{"_static":{},"_dynamic":{"paddingHorizontal":"calc(var(--spacing) * 4)"}},"px-5":{"_static":{},"_dynamic":{"paddingHorizontal":"calc(var(--spacing) * 5)"}},"py-1":{"_static":{},"_dynamic":{"paddingVertical":"var(--spacing)"}},"py-2":{"_static":{},"_dynamic":{"paddingVertical":"calc(var(--spacing) * 2)"}},"py-2.5":{"_static":{},"_dynamic":{"paddingVertical":"calc(var(--spacing) * 2.5)"}},"py-3.5":{"_static":{},"_dynamic":{"paddingVertical":"calc(var(--spacing) * 3.5)"}},"py-4":{"_static":{},"_dynamic":{"paddingVertical":"calc(var(--spacing) * 4)"}},"pr-3":{"_static":{},"_dynamic":{"paddingRight":"calc(var(--spacing) * 3)"}},"pb-20":{"_static":{},"_dynamic":{"paddingBottom":"calc(var(--spacing) * 20)"}},"text-2xl":{"_static":{},"_dynamic":{"fontSize":"var(--text-2xl)","lineHeight":"var(--tw-leading, var(--text-2xl--line-height))"}},"text-2xs":{"_static":{},"_dynamic":{"fontSize":"var(--text-2xs)","lineHeight":"var(--tw-leading, var(--text-2xs--line-height))"}},"text-md":{"_static":{},"_dynamic":{"fontSize":"var(--text-md)","lineHeight":"var(--tw-leading, var(--text-md--line-height))"}},"text-sm":{"_static":{},"_dynamic":{"fontSize":"var(--text-sm)","lineHeight":"var(--tw-leading, var(--text-sm--line-height))"}},"text-xs":{"_static":{},"_dynamic":{"fontSize":"var(--text-xs)","lineHeight":"var(--tw-leading, var(--text-xs--line-height))"}},"font-bold":{"_static":{"--tw-font-weight":"var(--font-weight-bold)"},"_dynamic":{"fontWeight":"var(--font-weight-bold)"}},"font-semibold":{"_static":{"--tw-font-weight":"var(--font-weight-semibold)"},"_dynamic":{"fontWeight":"var(--font-weight-semibold)"}},"tracking-wider":{"_static":{"--tw-tracking":"var(--tracking-wider)"},"_dynamic":{"letterSpacing":"var(--tracking-wider)"}},"text-blue-200":{"_static":{},"_dynamic":{"color":"var(--color-blue-200)"}},"text-green-200":{"_static":{},"_dynamic":{"color":"var(--color-green-200)"}},"text-green-500":{"_static":{},"_dynamic":{"color":"var(--color-green-500)"}},"text-navy-200":{"_static":{},"_dynamic":{"color":"var(--color-navy-200)"}},"text-navy-300":{"_static":{},"_dynamic":{"color":"var(--color-navy-300)"}},"text-navy-600":{"_static":{},"_dynamic":{"color":"var(--color-navy-600)"}},"text-navy-700":{"_static":{},"_dynamic":{"color":"var(--color-navy-700)"}},"text-white":{"_static":{},"_dynamic":{"color":"var(--color-white)"}},"text-yellow-500":{"_static":{},"_dynamic":{"color":"var(--color-yellow-500)"}},"capitalize":{"textTransform":"capitalize"},"uppercase":{"textTransform":"uppercase"},"shadow-base":{"_static":{"--tw-shadow":"0px 0px 4px var(--tw-shadow-color, lab(0% 0 0 / .1))"},"_dynamic":{"boxShadow":"var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)"}},"transition":{"_static":{"transitionProperty":"color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events"},"_dynamic":{"transitionTimingFunction":"var(--tw-ease, var(--default-transition-timing-function))","transitionDuration":"var(--tw-duration, var(--default-transition-duration))"}},"transition-all":{"_static":{"transitionProperty":"all"},"_dynamic":{"transitionTimingFunction":"var(--tw-ease, var(--default-transition-timing-function))","transitionDuration":"var(--tw-duration, var(--default-transition-duration))"}},"group-active:scale-105":{"_static":{"--tw-scale-x":"105%","--tw-scale-y":"105%","--tw-scale-z":"105%"},"_dynamic":{"scale":"var(--tw-scale-x) var(--tw-scale-y)"}},"group-active:bg-yellow-500":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-yellow-500)"}},"group-active:text-black":{"_static":{},"_dynamic":{"color":"var(--color-black)"}},"group-active:text-yellow-500":{"_static":{},"_dynamic":{"color":"var(--color-yellow-500)"}},"active:scale-95":{"_static":{"--tw-scale-x":"95%","--tw-scale-y":"95%","--tw-scale-z":"95%"},"_dynamic":{"scale":"var(--tw-scale-x) var(--tw-scale-y)"}},"scale-95":{"_static":{"--tw-scale-x":"95%","--tw-scale-y":"95%","--tw-scale-z":"95%"},"_dynamic":{"scale":"var(--tw-scale-x) var(--tw-scale-y)"}},"active:border-primary":{"_static":{},"_dynamic":{"borderColor":"var(--color-primary)"}},"active:bg-navy-600":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-600)"}},"active:opacity-75":{"opacity":0.75},"opacity-75":{"opacity":0.75},"active:opacity-80":{"opacity":0.8},"opacity-80":{"opacity":0.8},"disabled:bg-navy-400":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-400)"}},"bg-navy-400":{"_static":{},"_dynamic":{"backgroundColor":"var(--color-navy-400)"}},"disabled:opacity-40":{"opacity":0.4},"opacity-40":{"opacity":0.4}}