Use preval to avoid shipping all of tailwind

gatsby/gatsby-config.js

@@ -47,7 +47,8 @@ module.exports = {
         extensions: ['js', 'jsx'],
         exclude: ['node_modules', '.cache', 'public'],
         // Any eslint-webpack-plugin options below
-      }
+      },
-    }
+    },
+    'gatsby-plugin-preval',
   ],
 };

gatsby/gatsby-node.js

@@ -41,7 +41,7 @@ function transformMetaToNodeData(exifData, iptcData) {
     exif: exifData?.exif,
     gps,
     dateTaken: exifData?.exif?.DateTimeOriginal,
-    iptc: iptcData || undefined
+    iptc: iptcData || undefined,
   };
 }
 
@@ -57,7 +57,7 @@ exports.onCreateNode = async function ({ node, getNode, actions }) {
     createNodeField({
       node,
       name: 'imageMeta',
-      value: transformMetaToNodeData(exifData, iptcData)
+      value: transformMetaToNodeData(exifData, iptcData),
     });
   }
 };

gatsby/package.json

@@ -19,6 +19,7 @@
     "@mdx-js/mdx": "^1.6.22",
     "@mdx-js/react": "^1.6.22",
     "autoprefixer": "^10.2.6",
+    "babel-plugin-preval": "^5.0.0",
     "babel-plugin-styled-components": "^1.12.0",
     "classnames": "^2.3.1",
     "fast-exif": "^1.0.1",
@@ -27,6 +28,7 @@
     "gatsby-plugin-manifest": "^3.6.0",
     "gatsby-plugin-mdx": "^2.7.1",
     "gatsby-plugin-postcss": "^4.6.0",
+    "gatsby-plugin-preval": "^1.0.0",
     "gatsby-plugin-react-helmet": "^4.6.0",
     "gatsby-plugin-sass": "^4.6.0",
     "gatsby-plugin-sharp": "^3.6.0",

gatsby/src/components/MasonryGallery.js

@@ -3,21 +3,23 @@ import { Link } from 'gatsby';
 import { GatsbyImage, getImage } from 'gatsby-plugin-image';
 import * as R from 'ramda';
 import { getAspectRatio, getName } from '../utils';
-// TODO: use resolveCOnfig to not need to define screens in theme file
-import resolveConfig from 'tailwindcss/resolveConfig';
-import tailwindConfig from '../../tailwind.config.js';
 import useBreakpoint from 'use-breakpoint';
 
+import preval from 'babel-plugin-preval/macro';
+const themeBreakpoints = preval`
+const R = require('ramda')
+const resolveConfig = require('tailwindcss/resolveConfig');
+const tailwindConfig = require('../../tailwind.config.js');
 const {theme} = resolveConfig(tailwindConfig);
-const themeBreakpoints = R.map(size => parseInt(size, 10), theme.screens);
+module.exports = R.map(size => parseInt(size, 10), theme.screens);
-console.log(theme);
+`;
 
 const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
   const breakpoints = React.useMemo(() => 
     R.pick(R.keys(itemsPerRowByBreakpoint), themeBreakpoints)
   , [itemsPerRowByBreakpoint]);
 
-  const { breakpoint, maxWidth, minWidth } = useBreakpoint(breakpoints, 'md');
+  const { breakpoint } = useBreakpoint(breakpoints, 'md');
 
   const aspectRatios = React.useMemo(() => R.map(getAspectRatio, images), [images]);
   const rowAspectRatioSumsByBreakpoint = React.useMemo(() => R.map(R.pipe(
@@ -42,7 +44,6 @@ const MasonryGallery = ({ images, itemsPerRow: itemsPerRowByBreakpoint }) => {
         // const width = ((getAspectRatio(image) / rowAspectRatioSum) * 100).toFixed(10);
         const ar = getAspectRatio(image);
         const widthNumber = ((ar / rowAspectRatioSum) * 100);
-        const gutterReserve = parseInt(theme.spacing['1'], 10) * (itemsPerRow - 1);
         const width = `${widthNumber}%`;
         // const width = `${widthNumber}%`;
         // console.log('ars', rowAspectRatioSum);

gatsby/yarn.lock

@@ -2864,6 +2864,15 @@ babel-plugin-polyfill-regenerator@^0.2.2:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.2"
 
+babel-plugin-preval@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-preval/-/babel-plugin-preval-5.0.0.tgz#6cabb947ecc241664966e1f99eb56a3b4bb63d1e"
+  integrity sha512-8DqJq6/LPUjSZ0Qq6bVIFpsj2flCEE0Cbnbut9TvGU6jP9g3dOWEXtQ/sdvsA9d6souza8eNGh04WRXpuH9ThA==
+  dependencies:
+    "@babel/runtime" "^7.9.2"
+    babel-plugin-macros "^2.8.0"
+    require-from-string "^2.0.2"
+
 babel-plugin-remove-graphql-queries@^3.7.1:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-remove-graphql-queries/-/babel-plugin-remove-graphql-queries-3.7.1.tgz#e041f933dd08556b7786cb4fd44ccb99c8dffaa6"
@@ -6224,6 +6233,11 @@ gatsby-plugin-postcss@^4.6.0:
     "@babel/runtime" "^7.14.0"
     postcss-loader "^4.3.0"
 
+gatsby-plugin-preval@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/gatsby-plugin-preval/-/gatsby-plugin-preval-1.0.0.tgz#b0e9dcc9ef568cb6ca998f7211b5365824b97201"
+  integrity sha512-HpPp2bdA4nZsuD3R++GRhM9BPlFp8+ilkXIo53hNr14OlHXxrgimh9lqVVvP3q4JriHh+bYcvmfqm6msIsxxLg==
+
 gatsby-plugin-react-helmet@^4.6.0:
   version "4.7.1"
   resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet/-/gatsby-plugin-react-helmet-4.7.1.tgz#0603b1fb9194b421162e2a92d56114dbbbb99946"