instructure-ui icon indicating copy to clipboard operation
instructure-ui copied to clipboard
verified publisher icon instructure

[v12] fix(emotion): calcMarginFromShorthand direct CSS value handling

Open git-nandor opened this issue 1 month ago • 1 comments

Summary

Fixed console warnings when using direct CSS values (like 0, auto, 12px) in the margin prop of components. The calcMarginFromShorthand utility now properly recognizes valid CSS values before attempting theme token lookup, eliminating unnecessary warnings while maintaining full backward compatibility.

Changes

Added CSS value recognition logic to calcMarginFromShorthand before theme token lookup: New helper functions: isCSSValue(): Detects valid CSS margin values using pattern matching normalizeCSSValue(): Normalizes values (e.g., 'none' → '0') Execution order (unchanged, just added CSS check first):

  1. CSS value check (NEW) → if valid, return immediately
  2. Flat token lookup → spacingMap[token]
  3. Nested path lookup → spacingMap.gap.sm
  4. Warning + fallback

Recognized CSS values: Keywords: '0', 'auto', 'none' (converted to '0') Units: '12px', '0.5rem', '2em', '100%', etc.

Test plan

Apply different margin values to the Avatar (e.g., margin="0 small"), then verify the console warnings.

Co-Authored-By: 🤖 Claude

git-nandor avatar Dec 04 '25 15:12 git-nandor

PR Preview Action v1.6.3 :---: |

:rocket: View preview at
https://instructure.design/pr-preview/pr-2290/

|
Built to branch gh-pages at 2025-12-04 15:18 UTC.
Preview will be ready when the GitHub Pages deployment is complete.

github-actions[bot] avatar Dec 04 '25 15:12 github-actions[bot]