fix joined cssVarPrefix

packages/pigment-css-react/src/utils/cssFunctionTransformerPlugin.ts

@@ -54,7 +54,9 @@ const cssFunctionTransformerPlugin = declare<BabelPluginOptions>((api, pluginOpt
         }
         const themeKeyArr = val.split('.').join('-');
         path.replaceWith(
-          t.stringLiteral(`var(--${finalPrefix}${propertyThemeKey}-${themeKeyArr})`),
+          t.stringLiteral(
+            `var(--${finalPrefix ? `${finalPrefix}-` : ''}${propertyThemeKey}-${themeKeyArr})`,
+          ),
         );
       },
     },

packages/pigment-css-react/tests/sx/fixtures/sx-shorthand.input.js

@@ -0,0 +1,12 @@
+function App(props) {
+  return (
+    <main>
+      <div
+        sx={{
+          color: props.tier.title === 'Professional' ? 'grey.50' : undefined,
+          mb: 1,
+        }}
+      />
+    </main>
+  );
+}

packages/pigment-css-react/tests/sx/fixtures/sx-shorthand.output.css

@@ -0,0 +1,4 @@
+.d1h14by3 {
+  color: var(--d1h14by3-0);
+  margin-bottom: 8px;
+}

packages/pigment-css-react/tests/sx/fixtures/sx-shorthand.output.js

@@ -0,0 +1,21 @@
+import { sx as _sx } from '@pigment-css/react';
+function App(props) {
+  return (
+    <main>
+      <div
+        {..._sx(
+          {
+            className: 'd1h14by3',
+            vars: {
+              'd1h14by3-0': [
+                props.tier.title === 'Professional' ? 'var(--mui-palette-grey-50)' : undefined,
+                false,
+              ],
+            },
+          },
+          {},
+        )}
+      />
+    </main>
+  );
+}

packages/pigment-css-react/tests/sx/sx.test.ts

@@ -87,4 +87,32 @@ describe('Pigment CSS - sx prop', () => {
     expect(output.js).to.equal(fixture.js);
     expect(output.css).to.equal(fixture.css);
   });
+
+  it('sx prop shorthand', async () => {
+    const { output, fixture } = await runTransformation(
+      path.join(__dirname, 'fixtures/sx-shorthand.input.js'),
+      {
+        themeArgs: {
+          theme: {
+            cssVarPrefix: 'mui',
+            palette: {
+              grey: {
+                50: '#FBFCFE',
+              },
+            },
+            vars: {
+              palette: {
+                grey: {
+                  50: 'var(--mui-palette-grey-50)',
+                },
+              },
+            },
+          },
+        },
+      },
+    );
+
+    expect(output.js).to.equal(fixture.js);
+    expect(output.css).to.equal(fixture.css);
+  });
 });