@barguide/style-guide - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

CHANGELOG.md

@@ -6,2 +6,10 @@ # Change Log
 
+## [2.0.4](https://github.com/barguide/taps/compare/@barguide/style-guide@2.0.3...@barguide/style-guide@2.0.4) (2021-03-24)
+
+**Note:** Version bump only for package @barguide/style-guide
+
+
+
+
+
 ## [2.0.3](https://github.com/barguide/taps/compare/@barguide/style-guide@2.0.2...@barguide/style-guide@2.0.3) (2021-03-24)
@@ -8,0 +16,0 @@

dist/tailwind.config.js

@@ -107,8 +107,19 @@ // Roygbiv
 
-const gridToPixels = Object.keys(grid).forEach((key) => {
-});
-console.log(`👀 👀  ~ gridToPixels`, gridToPixels);
 /**
- * RUN - npx tailwindcss init --full
+ * @description A helper to take the {number} type "values" and add the
+ * suffix of "px" for use in tailwinds config. Now we get to use the same
+ * variables in JS and CSS quickly
  */
+const gridToPixels = (data) => {
+    const gridInPixels = {};
+    Object.keys(data).forEach((key) => {
+        const val = data[key];
+        gridInPixels[key] = `${val}px`;
+    });
+    return gridInPixels;
+};
+/**
+ * @description Build up our custom tailwind config
+ * @external https://tailwindcss.com/docs/installation
+ */
 const config = {
@@ -127,3 +138,3 @@ plugins: [],
         fonts: font,
-        spacing: gridToPixels
+        spacing: gridToPixels(grid)
     },
@@ -130,0 +141,0 @@ /**

package.json

 {
   "name": "@barguide/style-guide",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "author": {
@@ -56,3 +56,3 @@ "name": "Matthew Scholta",
   "types": "./dist/index.d.ts",
-  "gitHead": "d2f19551fce56282a74a4079d5b09bbb30d1982d"
+  "gitHead": "c605b3a320f6755b12d03199cd20a0fe6ba4d3b3"
 }

src/tailwind.config.ts

@@ -5,16 +5,23 @@ import { color } from './variables/color';
 
-const gridInPixels: any = {};
+/**
+ * @description A helper to take the {number} type "values" and add the
+ * suffix of "px" for use in tailwinds config. Now we get to use the same
+ * variables in JS and CSS quickly
+ */
+const gridToPixels = (data: any) => {
+  const gridInPixels: any = {};
 
-const gridToPixels = Object.keys(grid).forEach((key) => {
-  const val = grid[key as '1x'];
+  Object.keys(data).forEach((key) => {
+    const val = data[key];
 
-  gridInPixels[key] = `${val}px`;
-});
+    gridInPixels[key] = `${val}px`;
+  });
 
-console.log(`👀 👀  ~ gridToPixels`, gridToPixels);
+  return gridInPixels;
+};
 
 /**
- * RUN - npx tailwindcss init --full
+ * @description Build up our custom tailwind config
+ * @external https://tailwindcss.com/docs/installation
  */
-
 const config = {
@@ -35,3 +42,3 @@ plugins: [],
     fonts: font,
-    spacing: gridToPixels
+    spacing: gridToPixels(grid)
   },
@@ -38,0 +45,0 @@

No alert changes

Improved metrics

Total package byte prevSize

96495

increased by0.85%

Lines of code

3060

increased by0.62%

No dependency changes