Skip to content

feat(css): add cssVars prop and resolveCssVars middleware#2966

Open
janpe wants to merge 1 commit into
software-mansion:mainfrom
janpe:feat/css-vars-prop
Open

feat(css): add cssVars prop and resolveCssVars middleware#2966
janpe wants to merge 1 commit into
software-mansion:mainfrom
janpe:feat/css-vars-prop

Conversation

@janpe

@janpe janpe commented May 25, 2026

Copy link
Copy Markdown

Summary

Closes #2853. Supplies CSS custom properties from JS for SVGs that reference var(--name) without defining the variables inline — useful for theming or when prepending values to an SVG string received from elsewhere.

<SvgCss xml={svg} cssVars={{ '--brand': theme.primary }} />

How

Adds two new exports from react-native-svg/css:

  • resolveCssVars(vars): Middleware — a new Middleware that resolves var() references on color-like props (color, fill, floodColor, lightingColor, stopColor, stroke) against a caller-supplied variable map. Reuses the existing cssSelect query and resolveElementVariables helpers from inlineStyles.
  • CssVars — the variable map type.

The intended composition is to run inlineStyles first and resolveCssVars second, so <style>-declared variables win over caller-supplied ones:

parse(xml, (ast) => resolveCssVars(vars)(inlineStyles(ast)))

For convenience, SvgCss, SvgCssUri, SvgWithCss, and SvgWithCssUri accept an optional cssVars prop that performs the composition internally.

Scope

  • Pure JS layer (src/css/css.tsx, src/css/index.tsx). No native code.
  • inlineStyles is unchanged. The Middleware type is unchanged.
  • Existing call sites (parse(xml, inlineStyles), <SvgCss xml={...} /> without cssVars) take exactly the same code path as before.

Test Plan

  1. yarn jest css.test — three new tests pass:
    • resolveCssVars resolves var() when no <style> is present
    • composing resolveCssVars over inlineStyles lets <style> win
    • SvgCss renders with cssVars prop

Compatibility

OS Implemented
iOS
MacOS
Android
Web

JS-only change — runs everywhere the existing SvgCss components run.

Checklist

  • I have tested this on a device and a simulator
  • I added documentation in USAGE.md (the project's user-facing docs; README.md links here)
  • I updated the typed files (typescript)
  • I added a test for the API in the __tests__ folder

@janpe janpe force-pushed the feat/css-vars-prop branch from c73896e to 925be9a Compare May 26, 2026 08:37
@janpe janpe changed the title feat: add cssVars prop to SvgCss components feat(css): add cssVars prop and resolveCssVars middleware May 26, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Css variable definitions outside svg

1 participant