[ONL-7628] fix tw grid plugin (#1578)

* [ONL-7221] fix: Fixed TW classes generated by flexboxGridPlugin.

* increased version

---------

Co-authored-by: Milos Cibulka <mcibique@users.noreply.github.com>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.2.30",
+  "version": "2.2.31",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

tailwind.config.js

@@ -1266,12 +1266,11 @@ function flexboxGridPlugin({ addUtilities, theme }) {
     throw new Error('Number of columns must be a positive number');
   }
 
-  const colClasses = [];
-  for (let i = 1; i <= numberOfColumns; i++) {
-    colClasses.push(`.col-${i}`);
-  }
+  const config = {
+    variants: ['responsive'],
+  };
 
-  const grid = {
+  addUtilities({
     '.grid-container': {
       width: '100%',
       paddingRight: theme(`padding.${gutter / 2}`),
@@ -1283,37 +1282,53 @@ function flexboxGridPlugin({ addUtilities, theme }) {
       marginRight: theme(`margin.${gutter / -2}`),
       marginLeft: theme(`margin.${gutter / -2}`),
     },
-    [`.col-full, .col, .col-auto, ${colClasses.join(', ')}`]: {
-      width: '100%',
-      padding: theme(`padding.${gutter / 2}`),
-      minHeight: theme('minHeight.1'),
-    },
-    [`.col, ${colClasses.join(', ')}`]: {
-      maxWidth: '100%',
-      flexGrow: 1,
-      flexBasis: 0,
-    },
-  };
+  }, config);
 
+  const colClasses = [];
   for (let i = 1; i <= numberOfColumns; i++) {
-    const percentage = theme(`width.${i}/${numberOfColumns}`);
-    grid[`.col-${i}`] = {
-      flex: `0 0 ${percentage}`,
-      maxWidth: `${percentage}`,
-    };
+    colClasses.push(`.col-${i}`);
+  }
 
-    grid[`.offset-${i}`] = {
-      marginLeft: `${percentage}`,
-    };
+  for (const colClass of ['.col-full', '.col', '.col-auto', ...colClasses]) {
+    addUtilities({
+      [colClass]: {
+        width: '100%',
+        padding: theme(`padding.${gutter / 2}`),
+        minHeight: theme('minHeight.1'),
+      },
+    }, config);
   }
 
-  grid['.col-auto'] = {
-    flex: '0 0 auto',
-    maxWidth: 'none',
-    width: 'auto',
-  };
+  for (const colClass of ['.col', ...colClasses]) {
+    addUtilities({
+      [colClass]: {
+        maxWidth: '100%',
+        flexGrow: 1,
+        flexBasis: 0,
+      },
+    }, config);
+  }
+
+  for (let i = 1; i <= numberOfColumns; i++) {
+    const percentage = theme(`width.${i}/${numberOfColumns}`);
+    addUtilities({
+      [`.col-${i}`]: {
+        flex: `0 0 ${percentage}`,
+        maxWidth: `${percentage}`,
+      },
+      [`.offset-${i}`]: {
+        marginLeft: `${percentage}`,
+      },
+    }, config);
+  }
 
-  addUtilities(grid, ['responsive']);
+  addUtilities({
+    '.col-auto': {
+      flex: '0 0 auto',
+      maxWidth: 'none',
+      width: 'auto',
+    },
+  }, config);
 }
 
 function stopColorPlugin({ matchUtilities, theme }) {