From cb0ff7a576b6671f3ccbc75d4f316ee62109f8f7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Leszczyk?= Date: Wed, 23 Feb 2022 10:39:30 +0100 Subject: [PATCH] feat(dashboard-v2): add css media query helper --- packages/dashboard-v2/package.json | 2 + packages/dashboard-v2/src/lib/cssHelpers.js | 21 +++++++++ packages/dashboard-v2/src/lib/theme.js | 8 ++++ packages/dashboard-v2/yarn.lock | 52 ++++++++++++++++++++- 4 files changed, 81 insertions(+), 2 deletions(-) create mode 100644 packages/dashboard-v2/src/lib/cssHelpers.js create mode 100644 packages/dashboard-v2/src/lib/theme.js diff --git a/packages/dashboard-v2/package.json b/packages/dashboard-v2/package.json index c5bb6214..5711b22b 100644 --- a/packages/dashboard-v2/package.json +++ b/packages/dashboard-v2/package.json @@ -44,12 +44,14 @@ "autoprefixer": "^10.4.2", "babel-eslint": "^10.1.0", "babel-loader": "^8.2.3", + "babel-plugin-preval": "^5.1.0", "babel-plugin-styled-components": "^2.0.2", "eslint": "^8.9.0", "eslint-config-react-app": "^7.0.0", "eslint-plugin-storybook": "^0.5.6", "gatsby-plugin-alias-imports": "^1.0.5", "gatsby-plugin-image": "^2.6.0", + "gatsby-plugin-preval": "^1.0.0", "gatsby-plugin-provide-react": "^1.0.2", "gatsby-plugin-react-helmet": "^5.6.0", "gatsby-plugin-sharp": "^4.6.0", diff --git a/packages/dashboard-v2/src/lib/cssHelpers.js b/packages/dashboard-v2/src/lib/cssHelpers.js new file mode 100644 index 00000000..b47aac00 --- /dev/null +++ b/packages/dashboard-v2/src/lib/cssHelpers.js @@ -0,0 +1,21 @@ +import { css } from "styled-components"; +import theme from "./theme"; + +export const screen = (breakpoint, style) => { + const { screens } = theme; + const minWidth = screens[breakpoint]; + + if (typeof minWidth === "undefined") { + throw ReferenceError( + `Screen "${breakpoint}" is not defined in Tailwind config. Available values are: ${Object.keys(screens).join( + ", " + )}.` + ); + } + + return css` + @media (min-width: ${minWidth}) { + ${style} + } + `; +}; diff --git a/packages/dashboard-v2/src/lib/theme.js b/packages/dashboard-v2/src/lib/theme.js new file mode 100644 index 00000000..1df7f9f5 --- /dev/null +++ b/packages/dashboard-v2/src/lib/theme.js @@ -0,0 +1,8 @@ +// @preval +// This file is pre-evaluated on build-time, so the config is only resolved once +// and then included in the bundle for us to use in dynamic styles. +import resolveConfig from "tailwindcss/resolveConfig"; + +import tailwindConfig from "../../tailwind.config.js"; + +export default resolveConfig(tailwindConfig).theme; diff --git a/packages/dashboard-v2/yarn.lock b/packages/dashboard-v2/yarn.lock index 8ec21531..1de87766 100644 --- a/packages/dashboard-v2/yarn.lock +++ b/packages/dashboard-v2/yarn.lock @@ -338,7 +338,7 @@ chalk "^2.0.0" js-tokens "^4.0.0" -"@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.15.5", "@babel/parser@^7.16.7", "@babel/parser@^7.17.3", "@babel/parser@^7.7.0": +"@babel/parser@^7.1.0", "@babel/parser@^7.12.11", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.15.5", "@babel/parser@^7.16.7", "@babel/parser@^7.17.3", "@babel/parser@^7.7.0": version "7.17.3" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.17.3.tgz#b07702b982990bf6fdc1da5049a23fece4c5c3d0" integrity sha512-7yJPvPV+ESz2IUTPbOL+YkIGyCqOyNIzdguKQuJGnH7bg1WTIifuM21YqokFt/THWh1AkCRn9IgoykTRCBVpzA== @@ -1139,7 +1139,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/types@^7.0.0-beta.49", "@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.15.4", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.2.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0": +"@babel/types@^7.0.0", "@babel/types@^7.0.0-beta.49", "@babel/types@^7.12.11", "@babel/types@^7.12.7", "@babel/types@^7.15.4", "@babel/types@^7.16.0", "@babel/types@^7.16.7", "@babel/types@^7.16.8", "@babel/types@^7.17.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0": version "7.17.0" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.17.0.tgz#a826e368bccb6b3d84acd76acad5c0d87342390b" integrity sha512-TmKSNO4D5rzhL5bjWFcVHHLETzfQ/AmbKpKPOSjlP0WoHZ6L911fgoOKY4Alp/emzG4cHJdyN49zpgkbXFEHHw== @@ -3156,6 +3156,39 @@ resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-4.2.2.tgz#ed4e0ad92306a704f9fb132a0cfcf77486dbe2bc" integrity sha512-HnYpAE1Y6kRyKM/XkEuiRQhTHvkzMBurTHnpFLYLBGPIylZNPs9jJcuOOYWxPLJCSEtmZT0Y8rHDokKN7rRTig== +"@types/babel__core@^7.1.12": + version "7.1.18" + resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.18.tgz#1a29abcc411a9c05e2094c98f9a1b7da6cdf49f8" + integrity sha512-S7unDjm/C7z2A2R9NzfKCK1I+BAALDtxEmsJBwlB3EzNfb929ykjL++1CK9LO++EIp2fQrC8O+BwjKvz6UeDyQ== + dependencies: + "@babel/parser" "^7.1.0" + "@babel/types" "^7.0.0" + "@types/babel__generator" "*" + "@types/babel__template" "*" + "@types/babel__traverse" "*" + +"@types/babel__generator@*": + version "7.6.4" + resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.4.tgz#1f20ce4c5b1990b37900b63f050182d28c2439b7" + integrity sha512-tFkciB9j2K755yrTALxD44McOrk+gfpIpvC3sxHjRawj6PfnQxrse4Clq5y/Rq+G3mrBurMax/lG8Qn2t9mSsg== + dependencies: + "@babel/types" "^7.0.0" + +"@types/babel__template@*": + version "7.4.1" + resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.4.1.tgz#3d1a48fd9d6c0edfd56f2ff578daed48f36c8969" + integrity sha512-azBFKemX6kMg5Io+/rdGT0dkGreboUVR0Cdm3fz9QJWpaQGJRQXl7C+6hOTCZcMll7KFyEQpgbYI2lHdsS4U7g== + dependencies: + "@babel/parser" "^7.1.0" + "@babel/types" "^7.0.0" + +"@types/babel__traverse@*": + version "7.14.2" + resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.14.2.tgz#ffcd470bbb3f8bf30481678fb5502278ca833a43" + integrity sha512-K2waXdXBi2302XUdcHcR1jCeU0LL4TD9HRs/gk0N2Xvrht+G/BfJa4QObBQZfhMdxiCpV3COl5Nfq4uKTeTnJA== + dependencies: + "@babel/types" "^7.3.0" + "@types/cacheable-request@^6.0.1": version "6.0.2" resolved "https://registry.yarnpkg.com/@types/cacheable-request/-/cacheable-request-6.0.2.tgz#c324da0197de0a98a2312156536ae262429ff6b9" @@ -4679,6 +4712,16 @@ babel-plugin-polyfill-regenerator@^0.3.0: dependencies: "@babel/helper-define-polyfill-provider" "^0.3.1" +babel-plugin-preval@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/babel-plugin-preval/-/babel-plugin-preval-5.1.0.tgz#6efb89bf6b97af592cd1400c6df49c0e9e6ab027" + integrity sha512-G5R+xmo5LS41A4UyZjOjV0mp9AvkuCyUOAJ6TOv/jTZS+VKh7L7HUDRcCSOb0YCM/u0fFarh7Diz0wjY8rFNFg== + dependencies: + "@babel/runtime" "^7.12.5" + "@types/babel__core" "^7.1.12" + babel-plugin-macros "^3.0.1" + require-from-string "^2.0.2" + babel-plugin-react-docgen@^4.2.1: version "4.2.1" resolved "https://registry.yarnpkg.com/babel-plugin-react-docgen/-/babel-plugin-react-docgen-4.2.1.tgz#7cc8e2f94e8dc057a06e953162f0810e4e72257b" @@ -8159,6 +8202,11 @@ gatsby-plugin-postcss@^5.7.0: "@babel/runtime" "^7.15.4" 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-provide-react@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/gatsby-plugin-provide-react/-/gatsby-plugin-provide-react-1.0.2.tgz#e50bb311cd8ef5855c6d94f708266ab117c77a15"