Merge pull request #72 from RBilly/support-inset-shadow-css-transform…

…er-#71 fix: add support of inset in shadow-css transformer
lukasoppermann · Apr 25, 2024 · 4474ec5 · 4474ec5
2 parents ffa64bd + 687eebb
commit 4474ec5
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 3 deletions.
diff --git a/src/transformer/shadow-css.test.ts b/src/transformer/shadow-css.test.ts
@@ -52,7 +52,8 @@ describe('Transformer: shadowCss', () => {
           "offsetX": "0px",
           "offsetY": "0px",
           "blur": "0px",
-          "spread": "3px"
+          "spread": "3px",
+          "inset": true
         },
         {
           "color": "#ffffff",
@@ -68,7 +69,7 @@ describe('Transformer: shadowCss', () => {
     }] as StyleDictionary.TransformedToken[];
 
     expect(shadows.filter(shadowCss.matcher as Matcher).map(item => shadowCss.transformer(item, {}))).toStrictEqual([
-      "0px 0px 0px 3px #00000066, 2px 2px 4px 0px #ffffff"
+      "0px 0px 0px 3px #00000066 inset, 2px 2px 4px 0px #ffffff"
     ]);
   })
 })
diff --git a/src/transformer/shadow-css.ts b/src/transformer/shadow-css.ts
@@ -7,6 +7,7 @@ type TokenShadow = {
   offsetY: string
   blur: string
   spread: string
+  inset: boolean
 }
 
 const formatShadow = ({
@@ -15,7 +16,8 @@ const formatShadow = ({
   blur = '0',
   spread = '0',
   color,
-}: TokenShadow ): string => `${offsetX} ${offsetY} ${blur} ${spread} ${color}`;
+  inset = false
+}: TokenShadow ): string => `${offsetX} ${offsetY} ${blur} ${spread} ${color} ${inset ? 'inset' : ''}`.trim();
 
 export const shadowCss: StyleDictionary.Transform = {
   type: `value`,