Adjust to atomics changes

brijeshb42 · Jun 17, 2024 · 9e07c7d · 9e07c7d
1 parent 9577e93
commit 9e07c7d
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 24 deletions.
diff --git a/packages/pigment-css-react/src/Stack.jsx b/packages/pigment-css-react/src/Stack.jsx
@@ -23,7 +23,9 @@ const stackAtomics = generateAtomics(({ theme }) => {
       direction: ['flexDirection'],
       spacing: ['gap'],
     },
-    multiplier: Array.isArray(theme.vars?.spacing) ? theme.vars.spacing[0] : theme.vars?.spacing,
+    multipliers: {
+      gap: Array.isArray(theme.vars?.spacing) ? theme.vars.spacing[0] : theme.vars?.spacing
+    },
   };
 });
 

diff --git a/packages/pigment-css-react/src/baseAtomics.js b/packages/pigment-css-react/src/baseAtomics.js
@@ -71,10 +71,10 @@ export const gridAtomics = generateAtomics(({ theme }) => ({
   },
   unitless: ['--Grid-parent-column-count', '--Grid-self-column-span', '--Grid-self-offset'],
   multipliers: {
-    '--Grid-parent-column-spacing': 8,
-    '--Grid-parent-row-spacing': 8,
-    '--Grid-self-column-spacing': 8,
-    '--Grid-self-row-spacing': 8,
+    '--Grid-parent-column-spacing': Array.isArray(theme.vars?.spacing) ? theme.vars.spacing[0] : theme.vars?.spacing,
+    '--Grid-parent-row-spacing': Array.isArray(theme.vars?.spacing) ? theme.vars.spacing[0] : theme.vars?.spacing,
+    '--Grid-self-column-spacing': Array.isArray(theme.vars?.spacing) ? theme.vars.spacing[0] : theme.vars?.spacing,
+    '--Grid-self-row-spacing': Array.isArray(theme.vars?.spacing) ? theme.vars.spacing[0] : theme.vars?.spacing,
   },
   inlineGetters: {
     '--Grid-self-width': (value) => {

diff --git a/packages/pigment-css-react/src/generateAtomics.js b/packages/pigment-css-react/src/generateAtomics.js
@@ -6,10 +6,6 @@ export function generateAtomics() {
   );
 }
 
-function defaultInlineGetter(styleValue, cssProperty, unitless) {
-  return unitless.includes(cssProperty) ? styleValue : `${styleValue}px`;
-}
-
 /**
  * @typedef {Object} RuntimeConfig
  * @property {Object.<string, Object.<string, Object.<string, string>>>} styles
@@ -31,7 +27,7 @@ export function atomics({
   shorthands,
   conditions,
   defaultCondition,
-  unitless,
+  unitless = [],
   multipliers = {},
   inlineGetters = {},
 }) {
@@ -43,8 +39,8 @@ export function atomics({
 
     function handlePrimitive(
       value,
-      multiplier = 1,
-      inlineGetter = defaultInlineGetter,
+      multiplier = undefined,
+      inlineGetter = undefined,
       breakpoint = defaultCondition,
     ) {
       if (!(value in styleClasses)) {
@@ -55,11 +51,14 @@ export function atomics({
         const key = keys[0];
         let styleValue = value;
         if (typeof value === 'number') {
-          styleValue = multiplier ? `calc(${value} * ${multiplier})` : `${value}px`;
+          if (multiplier) {
+            styleValue = `calc(${value} * ${multiplier})`;
+          } else if (!unitless.includes(cssProperty)) {
+            styleValue = `${value}px`;
+          }
         }
         classes.push(styleClasses[key][breakpoint]);
-        inlineStyle[`${key}${breakpoint === defaultCondition ? '' : `-${breakpoint}`}`] =
-          inlineGetter(styleValue, cssProperty, unitless);
+        inlineStyle[`${key}-${breakpoint}`] = inlineGetter ? inlineGetter(styleValue) : styleValue;
       } else {
         classes.push(styleClasses[value][breakpoint]);
       }
@@ -69,7 +68,7 @@ export function atomics({
       handlePrimitive(propertyValue, multipliers[cssProperty], inlineGetters[cssProperty]);
     } else if (Array.isArray(propertyValue)) {
       propertyValue.forEach((value, index) => {
-        if (value) {
+        if (value !== undefined && value !== null) {
           const breakpoint = conditions[index];
           if (!breakpoint) {
             return;
@@ -84,7 +83,7 @@ export function atomics({
       });
     } else if (propertyValue) {
       Object.keys(propertyValue).forEach((condition) => {
-        if (propertyValue[condition]) {
+        if (propertyValue[condition] !== undefined && propertyValue[condition] !== null) {
           const propertyClasses = styleClasses[propertyValue[condition]];
           if (!propertyClasses) {
             handlePrimitive(

diff --git a/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts b/packages/pigment-css-react/src/utils/convertAtomicsToCss.ts
@@ -66,9 +66,7 @@ export function convertAtomicsToCss(
     Object.entries(properties).forEach(([cssPropertyName, propertyValues]) => {
       propertyValues.forEach((propertyValue) => {
         const propValue = propertyValue.startsWith('--')
-          ? cssesc(
-              `var(${propertyValue}${conditionName === defaultCondition ? '' : `-${conditionName}`})`,
-            )
+          ? cssesc(`var(${propertyValue}-${conditionName})`)
           : propertyValue;
         const className =
           isGlobal || debug

diff --git a/packages/pigment-css-react/tests/generateAtomics.test.js b/packages/pigment-css-react/tests/generateAtomics.test.js
@@ -65,7 +65,7 @@ describe('generateAtomics', () => {
     ).to.deep.equal({
       className: 'gap--Stack-gap-lg gap--Stack-gap-xs',
       style: {
-        '--Stack-gap': 'calc(2 * 8px)',
+        '--Stack-gap-xs': 'calc(2 * 8px)',
         '--Stack-gap-lg': 'calc(1 * 8px)',
       },
     });
@@ -80,7 +80,7 @@ describe('generateAtomics', () => {
     ).to.deep.equal({
       className: 'flex-direction-row-xs gap--Stack-gap-xs',
       style: {
-        '--Stack-gap': 'calc(1 * 8px)',
+        '--Stack-gap-xs': 'calc(1 * 8px)',
       },
     });
   });
@@ -107,7 +107,7 @@ describe('generateAtomics', () => {
       className:
         'flex-direction-row-xs flex-direction-column-sm gap--Stack-gap-xs gap--Stack-gap-sm',
       style: {
-        '--Stack-gap': 'calc(1 * 8px)',
+        '--Stack-gap-xs': 'calc(1 * 8px)',
         '--Stack-gap-sm': 'calc(2 * 8px)',
       },
     });
@@ -135,7 +135,7 @@ describe('generateAtomics', () => {
       className:
         'flex-direction-row-xs flex-direction-column-sm gap--Stack-gap-xs gap--Stack-gap-sm',
       style: {
-        '--Stack-gap': 'calc(1 * 8px)',
+        '--Stack-gap-xs': 'calc(1 * 8px)',
         '--Stack-gap-sm': 'calc(2 * 8px)',
       },
     });