diff --git a/src/__tests__/compiler/compiler.test.tsx b/src/__tests__/compiler/compiler.test.tsx index 88e439bd..0623c8d3 100644 --- a/src/__tests__/compiler/compiler.test.tsx +++ b/src/__tests__/compiler/compiler.test.tsx @@ -381,3 +381,27 @@ test("warnings", () => { }, }); }); + +test("simplifies rem", () => { + const compiled = compile(`.test { + border-width: calc(10rem + 2px); + }`); + + expect(compiled.stylesheet()).toStrictEqual({ + s: [ + [ + "test", + [ + { + d: [ + { + borderWidth: 142, + }, + ], + s: [1, 1], + }, + ], + ], + ], + }); +}); diff --git a/src/__tests__/native/calc.test.tsx b/src/__tests__/native/calc.test.tsx index 5734bf9c..30cd63b3 100644 --- a/src/__tests__/native/calc.test.tsx +++ b/src/__tests__/native/calc.test.tsx @@ -201,6 +201,6 @@ test("infinity", () => { expect(component.type).toBe("View"); expect(component.props.style).toStrictEqual({ - borderRadius: 9999, + borderRadius: 9007199254740990, }); }); diff --git a/src/__tests__/vendor/tailwind.test.tsx b/src/__tests__/vendor/tailwind.test.tsx index 4fa8482a..446fd662 100644 --- a/src/__tests__/vendor/tailwind.test.tsx +++ b/src/__tests__/vendor/tailwind.test.tsx @@ -330,10 +330,10 @@ test("line-clamp", () => { [ { d: [ + [1, ["numberOfLines"]], { overflow: "hidden", }, - [1, ["numberOfLines"]], ], s: [1, 1], }, diff --git a/src/__tests__/vendor/tailwind/_tailwind.tsx b/src/__tests__/vendor/tailwind/_tailwind.tsx index d1514fab..6f5cd5a6 100644 --- a/src/__tests__/vendor/tailwind/_tailwind.tsx +++ b/src/__tests__/vendor/tailwind/_tailwind.tsx @@ -86,7 +86,7 @@ export async function render( console.log(`Output CSS:\n---\n${output}\n---\n`); } - const compiled = registerCSS(output, { debug: false }); + const compiled = registerCSS(output, { debug: Boolean(debug) }); if (debug) { console.log( diff --git a/src/__tests__/vendor/tailwind/backgrounds.test.tsx b/src/__tests__/vendor/tailwind/backgrounds.test.tsx index 7f28fa1d..08e80e52 100644 --- a/src/__tests__/vendor/tailwind/backgrounds.test.tsx +++ b/src/__tests__/vendor/tailwind/backgrounds.test.tsx @@ -209,11 +209,6 @@ describe("Backgrounds - Background Image", () => { "linear-gradient(to top in oklab, #fb2c36 0%, #2b7fff 100%)", }, }, - warnings: { - values: { - "background-image": ["initial", "initial", "initial"], - }, - }, }); }); test("bg-gradient-to-tr", async () => { @@ -228,11 +223,6 @@ describe("Backgrounds - Background Image", () => { "linear-gradient(to top right in oklab, #fb2c36 0%, #2b7fff 100%)", }, }, - warnings: { - values: { - "background-image": ["initial", "initial", "initial"], - }, - }, }); }); test("bg-gradient-to-r", async () => { @@ -247,11 +237,6 @@ describe("Backgrounds - Background Image", () => { "linear-gradient(to right in oklab, #fb2c36 0%, #2b7fff 100%)", }, }, - warnings: { - values: { - "background-image": ["initial", "initial", "initial"], - }, - }, }); }); test("bg-gradient-to-br", async () => { @@ -266,11 +251,6 @@ describe("Backgrounds - Background Image", () => { "linear-gradient(to bottom right in oklab, #fb2c36 0%, #2b7fff 100%)", }, }, - warnings: { - values: { - "background-image": ["initial", "initial", "initial"], - }, - }, }); }); test("bg-gradient-to-b", async () => { @@ -285,11 +265,6 @@ describe("Backgrounds - Background Image", () => { "linear-gradient(to bottom in oklab, #fb2c36 0%, #2b7fff 100%)", }, }, - warnings: { - values: { - "background-image": ["initial", "initial", "initial"], - }, - }, }); }); test("bg-gradient-to-bl", async () => { @@ -304,11 +279,6 @@ describe("Backgrounds - Background Image", () => { "linear-gradient(to bottom left in oklab, #fb2c36 0%, #2b7fff 100%)", }, }, - warnings: { - values: { - "background-image": ["initial", "initial", "initial"], - }, - }, }); }); test("bg-gradient-to-l", async () => { @@ -323,11 +293,6 @@ describe("Backgrounds - Background Image", () => { "linear-gradient(to left in oklab, #fb2c36 0%, #2b7fff 100%)", }, }, - warnings: { - values: { - "background-image": ["initial", "initial", "initial"], - }, - }, }); }); test("bg-gradient-to-tl", async () => { @@ -342,11 +307,6 @@ describe("Backgrounds - Background Image", () => { "linear-gradient(to top left in oklab, #fb2c36 0%, #2b7fff 100%)", }, }, - warnings: { - values: { - "background-image": ["initial", "initial", "initial"], - }, - }, }); }); }); diff --git a/src/__tests__/vendor/tailwind/borders.test.tsx b/src/__tests__/vendor/tailwind/borders.test.tsx index 7435d2e4..48f065c7 100644 --- a/src/__tests__/vendor/tailwind/borders.test.tsx +++ b/src/__tests__/vendor/tailwind/borders.test.tsx @@ -20,7 +20,7 @@ describe("Border - Border Radius", () => { }); test("rounded-full", async () => { expect(await renderCurrentTest()).toStrictEqual({ - props: { style: { borderRadius: 9999 } }, + props: { style: { borderRadius: 9007199254740990 } }, }); }); }); diff --git a/src/__tests__/vendor/tailwind/effects.test.tsx b/src/__tests__/vendor/tailwind/effects.test.tsx index dadc8673..2ebb54d8 100644 --- a/src/__tests__/vendor/tailwind/effects.test.tsx +++ b/src/__tests__/vendor/tailwind/effects.test.tsx @@ -27,11 +27,6 @@ describe("Effects - Box Shadow", () => { ], }, }, - warnings: { - values: { - "box-shadow": ["initial", "initial", "initial", "initial", "initial"], - }, - }, }); }); @@ -57,11 +52,6 @@ describe("Effects - Box Shadow", () => { ], }, }, - warnings: { - values: { - "box-shadow": ["initial", "initial", "initial", "initial", "initial"], - }, - }, }); }); test("shadow-none", async () => { @@ -71,11 +61,6 @@ describe("Effects - Box Shadow", () => { boxShadow: [], }, }, - warnings: { - values: { - "box-shadow": ["initial", "initial", "initial", "initial", "initial"], - }, - }, }); }); }); diff --git a/src/__tests__/vendor/tailwind/filters.test.tsx b/src/__tests__/vendor/tailwind/filters.test.tsx index a651bc73..24833fed 100644 --- a/src/__tests__/vendor/tailwind/filters.test.tsx +++ b/src/__tests__/vendor/tailwind/filters.test.tsx @@ -8,24 +8,6 @@ describe("Filters - Blur", () => { filter: [{ blur: 4 }], }, }, - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); }); @@ -38,24 +20,6 @@ describe("Filters - Brightness", () => { filter: [{ brightness: "0%" }], }, }, - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); }); @@ -68,24 +32,6 @@ describe("Filters - Contrast", () => { filter: [{ contrast: "0%" }], }, }, - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); test("contrast-50", async () => { @@ -95,24 +41,6 @@ describe("Filters - Contrast", () => { filter: [{ contrast: "50%" }], }, }, - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); test("contrast-200", async () => { @@ -122,24 +50,6 @@ describe("Filters - Contrast", () => { filter: [{ contrast: "200%" }], }, }, - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); }); @@ -171,24 +81,6 @@ describe("Filters - Drop Shadow", () => { ], }, }, - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); }); @@ -201,24 +93,6 @@ describe("Filters - Grayscale", () => { filter: [{ grayscale: "100%" }], }, }, - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); test("grayscale-0", async () => { @@ -228,24 +102,6 @@ describe("Filters - Grayscale", () => { filter: [{ grayscale: "0%" }], }, }, - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); }); @@ -258,24 +114,6 @@ describe("Filters - Hue Rotate", () => { filter: [{ hueRotate: "0deg" }], }, }, - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); test("hue-rotate-180", async () => { @@ -285,24 +123,6 @@ describe("Filters - Hue Rotate", () => { filter: [{ hueRotate: "180deg" }], }, }, - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); }); @@ -315,25 +135,6 @@ describe("Filters - Invert", () => { filter: [{ invert: "0%" }], }, }, - - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); test("invert", async () => { @@ -343,25 +144,6 @@ describe("Filters - Invert", () => { filter: [{ invert: "100%" }], }, }, - - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); }); @@ -374,25 +156,6 @@ describe("Filters - Saturate", () => { filter: [{ saturate: "0%" }], }, }, - - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); test("saturate-100", async () => { @@ -402,25 +165,6 @@ describe("Filters - Saturate", () => { filter: [{ saturate: "100%" }], }, }, - - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); }); @@ -433,24 +177,6 @@ describe("Filters - Sepia", () => { filter: [{ sepia: "100%" }], }, }, - warnings: { - values: { - filter: [ - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - "initial", - ], - }, - }, }); }); }); @@ -459,7 +185,7 @@ describe("Filters - Backdrop Blur", () => { test("backdrop-blur-none", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: {}, - warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + warnings: { properties: ["backdrop-filter"] }, }); }); }); @@ -468,7 +194,7 @@ describe("Filters - Backdrop Brightness", () => { test("backdrop-brightness-0", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: {}, - warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + warnings: { properties: ["backdrop-filter"] }, }); }); }); @@ -477,7 +203,7 @@ describe("Filters - Backdrop Contrast", () => { test("backdrop-contrast-0", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: {}, - warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + warnings: { properties: ["backdrop-filter"] }, }); }); }); @@ -486,7 +212,7 @@ describe("Filters - Backdrop Grayscale", () => { test("backdrop-grayscale-0", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: {}, - warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + warnings: { properties: ["backdrop-filter"] }, }); }); }); @@ -495,7 +221,7 @@ describe("Filters - Backdrop Hue Rotate", () => { test("backdrop-hue-rotate-0", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: {}, - warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + warnings: { properties: ["backdrop-filter"] }, }); }); }); @@ -504,7 +230,7 @@ describe("Filters - Backdrop Invert", () => { test("backdrop-invert-0", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: {}, - warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + warnings: { properties: ["backdrop-filter"] }, }); }); }); @@ -513,7 +239,7 @@ describe("Filters - Backdrop Opacity", () => { test("backdrop-opacity-0", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: {}, - warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + warnings: { properties: ["backdrop-filter"] }, }); }); }); @@ -522,7 +248,7 @@ describe("Filters - Backdrop Saturate", () => { test("backdrop-saturate-0", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: {}, - warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + warnings: { properties: ["backdrop-filter"] }, }); }); }); @@ -531,7 +257,7 @@ describe("Filters - Backdrop Sepia", () => { test("backdrop-sepia-0", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: {}, - warnings: { properties: ["backdrop-filter", "backdrop-filter"] }, + warnings: { properties: ["backdrop-filter"] }, }); }); }); diff --git a/src/__tests__/vendor/tailwind/transform.test.ts b/src/__tests__/vendor/tailwind/transform.test.ts index 0cb0adcf..b2198afb 100644 --- a/src/__tests__/vendor/tailwind/transform.test.ts +++ b/src/__tests__/vendor/tailwind/transform.test.ts @@ -191,11 +191,6 @@ describe("Transforms - Skew", () => { transform: [{ skewX: "0deg" }], }, }, - warnings: { - values: { - transform: ["initial", "initial", "initial", "initial", "initial"], - }, - }, }); }); test("skew-y-0", async () => { @@ -205,11 +200,6 @@ describe("Transforms - Skew", () => { transform: [{ skewY: "0deg" }], }, }, - warnings: { - values: { - transform: ["initial", "initial", "initial", "initial", "initial"], - }, - }, }); }); test("skew-x-1", async () => { @@ -219,11 +209,6 @@ describe("Transforms - Skew", () => { transform: [{ skewX: "1deg" }], }, }, - warnings: { - values: { - transform: ["initial", "initial", "initial", "initial", "initial"], - }, - }, }); }); test("skew-y-1", async () => { @@ -233,11 +218,6 @@ describe("Transforms - Skew", () => { transform: [{ skewY: "1deg" }], }, }, - warnings: { - values: { - transform: ["initial", "initial", "initial", "initial", "initial"], - }, - }, }); }); }); @@ -258,11 +238,6 @@ describe("Transforms - Mixed", () => { ], }, }, - warnings: { - values: { - transform: ["initial", "initial", "initial", "initial", "initial"], - }, - }, }); }); diff --git a/src/__tests__/vendor/tailwind/typography.test.tsx b/src/__tests__/vendor/tailwind/typography.test.tsx index f4fe82e7..5986d5b4 100644 --- a/src/__tests__/vendor/tailwind/typography.test.tsx +++ b/src/__tests__/vendor/tailwind/typography.test.tsx @@ -49,31 +49,16 @@ describe("Typography - Font Weight", () => { test("font-thin", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: { style: { fontWeight: 100 } }, - warnings: { - values: { - "font-weight": "initial", - }, - }, }); }); test("font-normal", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: { style: { fontWeight: 400 } }, - warnings: { - values: { - "font-weight": "initial", - }, - }, }); }); test("font-black", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: { style: { fontWeight: 900 } }, - warnings: { - values: { - "font-weight": "initial", - }, - }, }); }); }); @@ -140,63 +125,33 @@ describe("Typography - Letter Spacing", () => { // 14 * -0.05 expect(await renderCurrentTest()).toStrictEqual({ props: { style: { letterSpacing: -0.7 } }, - warnings: { - values: { - "letter-spacing": "initial", - }, - }, }); }); test("tracking-tight", async () => { // 14 * -0.025 expect(await renderCurrentTest()).toStrictEqual({ props: { style: { letterSpacing: -0.35 } }, - warnings: { - values: { - "letter-spacing": "initial", - }, - }, }); }); test("tracking-normal", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: { style: { letterSpacing: 0 } }, - warnings: { - values: { - "letter-spacing": "initial", - }, - }, }); }); test("tracking-wide", async () => { expect(await renderCurrentTest()).toStrictEqual({ // 14 * 0.025 props: { style: { letterSpacing: 0.35 } }, - warnings: { - values: { - "letter-spacing": "initial", - }, - }, }); }); test("tracking-wider", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: { style: { letterSpacing: 0.7 } }, - warnings: { - values: { - "letter-spacing": "initial", - }, - }, }); }); test("tracking-widest", async () => { expect(await renderCurrentTest()).toStrictEqual({ props: { style: { letterSpacing: 1.4 } }, - warnings: { - values: { - "letter-spacing": "initial", - }, - }, }); }); }); @@ -246,11 +201,6 @@ describe("Typography - Line Height", () => { }), ).toStrictEqual({ props: { style: { lineHeight: 10.5 } }, - warnings: { - values: { - "line-height": "initial", - }, - }, }); }); test("leading-4", async () => { @@ -262,11 +212,6 @@ describe("Typography - Line Height", () => { }), ).toStrictEqual({ props: { style: { lineHeight: 14 } }, - warnings: { - values: { - "line-height": "initial", - }, - }, }); }); }); diff --git a/src/compiler/compiler.ts b/src/compiler/compiler.ts index 476a4703..b3561822 100644 --- a/src/compiler/compiler.ts +++ b/src/compiler/compiler.ts @@ -16,7 +16,7 @@ import { import { maybeMutateReactNativeOptions, parsePropAtRule } from "./atRules"; import type { CompilerOptions, ContainerQuery } from "./compiler.types"; import { parseContainerCondition } from "./container-query"; -import { parseDeclaration } from "./declarations"; +import { parseDeclaration, round } from "./declarations"; import { extractKeyFrames } from "./keyframes"; import { parseMediaQuery } from "./media-query"; import { StylesheetBuilder } from "./stylesheet"; @@ -33,6 +33,7 @@ const defaultLogger = debug("react-native-css:compiler"); */ export function compile(code: Buffer | string, options: CompilerOptions = {}) { const { logger = defaultLogger } = options; + const isLoggerEnabled = "enabled" in logger ? logger.enabled : Boolean(logger); @@ -52,7 +53,48 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) { const builder = new StylesheetBuilder(options); - logger(`Start lightningcss`); + 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 { code: firstPass } = lightningcss({ + code: typeof code === "string" ? new TextEncoder().encode(code) : code, + visitor: { + Length(length) { + if (length.unit !== "rem" || options.inlineRem === false) { + return length; + } + + return { + unit: "px", + value: round(length.value * (options.inlineRem ?? 14)), + }; + }, + }, + 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: CustomAtRules = { "react-native": { @@ -63,6 +105,7 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) { const visitor: Visitor = { Rule(rule) { maybeMutateReactNativeOptions(rule, builder); + return rule; }, StyleSheetExit(sheet) { if (isLoggerEnabled) { @@ -79,6 +122,7 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) { } logger(`Exiting lightningcss`); + return sheet; }, }; @@ -103,9 +147,8 @@ export function compile(code: Buffer | string, options: CompilerOptions = {}) { }; } - // 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(), diff --git a/src/compiler/declarations.ts b/src/compiler/declarations.ts index 2e882c7f..47540aac 100644 --- a/src/compiler/declarations.ts +++ b/src/compiler/declarations.ts @@ -1367,9 +1367,9 @@ export function parseLength( switch (length.unit) { case "px": { if (length.value === Infinity) { - return 9999; + return Number.MAX_SAFE_INTEGER; } else if (length.value === -Infinity) { - return -9999; + return Number.MIN_SAFE_INTEGER; } else { // Normalize large values to safe integers, e.g. `calc(infinity * 1px)` const value = Math.max( @@ -2824,7 +2824,7 @@ export function equal(a: unknown, b: unknown) { } export function parseTime(time: Time) { - return time.type === "milliseconds" ? time.value : time.value * 1000; + return round(time.type === "milliseconds" ? time.value : time.value * 1000); } export function parseSize2DDimensionPercentageDeclaration( diff --git a/src/compiler/selector-builder.ts b/src/compiler/selector-builder.ts index 40f021dd..d29573e7 100644 --- a/src/compiler/selector-builder.ts +++ b/src/compiler/selector-builder.ts @@ -44,11 +44,6 @@ type ContainerQueryWithSpecificity = ContainerQuery & { export function getClassNameSelectors( selectors: SelectorList, options: CompilerOptions = {}, - specificity: SpecificityArray = [0], - root: PartialSelector = { - type: "className", - specificity: [], - }, ) { if (!selectors.length) { return []; @@ -56,6 +51,13 @@ export function getClassNameSelectors( return selectors.flatMap( (selector): (ReactNativeGlobalSelector | PartialSelector)[] => { + const root: PartialSelector = { + type: "className", + specificity: [], + }; + + const specificity: SpecificityArray = [0]; + if (isRootVariableSelector(selector)) { return [{ type: "rootVariables" }]; } else if (isUniversalSelector(selector)) { diff --git a/src/runtime/native/styles/calculate-props.ts b/src/runtime/native/styles/calculate-props.ts index d5a8c326..c8f53a8f 100644 --- a/src/runtime/native/styles/calculate-props.ts +++ b/src/runtime/native/styles/calculate-props.ts @@ -103,7 +103,11 @@ export function applyDeclarations( target: Record = {}, topLevelTarget = target, ) { + const originalTarget = target; + for (const declaration of declarations) { + target = originalTarget; + if (!Array.isArray(declaration)) { // Static styles Object.assign(target, declaration);