From 7fd15704b83e545206a762f9a5deae803926899d Mon Sep 17 00:00:00 2001 From: Chuck Dries Date: Mon, 14 Jun 2021 22:10:52 -0700 Subject: [PATCH] Use preval to avoid shipping all of tailwind --- gatsby/gatsby-config.js | 5 +++-- gatsby/gatsby-node.js | 4 ++-- gatsby/package.json | 2 ++ gatsby/src/components/MasonryGallery.js | 15 ++++++++------- gatsby/yarn.lock | 14 ++++++++++++++ 5 files changed, 29 insertions(+), 11 deletions(-) diff --git a/gatsby/gatsby-config.js b/gatsby/gatsby-config.js index 5595fe7..283b0e9 100644 --- a/gatsby/gatsby-config.js +++ b/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', ], }; diff --git a/gatsby/gatsby-node.js b/gatsby/gatsby-node.js index 62f46bb..1e4e0bd 100644 --- a/gatsby/gatsby-node.js +++ b/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), }); } }; diff --git a/gatsby/package.json b/gatsby/package.json index f6551b1..a28c38d 100644 --- a/gatsby/package.json +++ b/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", diff --git a/gatsby/src/components/MasonryGallery.js b/gatsby/src/components/MasonryGallery.js index 2010625..1f893c4 100644 --- a/gatsby/src/components/MasonryGallery.js +++ b/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); -console.log(theme); +module.exports = R.map(size => parseInt(size, 10), theme.screens); +`; 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); diff --git a/gatsby/yarn.lock b/gatsby/yarn.lock index fa510cd..fe6db90 100644 --- a/gatsby/yarn.lock +++ b/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"