From 1c13a38ccbca2b30954c75246850e7b5ca728e14 Mon Sep 17 00:00:00 2001 From: Kurt Hutten Date: Fri, 3 Sep 2021 07:02:19 +1000 Subject: [PATCH] Fix font imports after tailwind upgrade --- app/web/config/postcss.config.js | 1 + app/web/config/tailwind.config.js | 8 ++++---- app/web/package.json | 1 + app/web/src/App.tsx | 1 + app/web/src/font-imports.css | 9 +++++++++ app/web/src/index.css | 5 ----- app/yarn.lock | 25 +++++++++++++++++++++++-- 7 files changed, 39 insertions(+), 11 deletions(-) create mode 100644 app/web/src/font-imports.css diff --git a/app/web/config/postcss.config.js b/app/web/config/postcss.config.js index ca420ca..4a28887 100644 --- a/app/web/config/postcss.config.js +++ b/app/web/config/postcss.config.js @@ -2,6 +2,7 @@ const path = require('path') module.exports = { plugins: [ + require('postcss-import'), require('tailwindcss')(path.resolve(__dirname, 'tailwind.config.js')), require('autoprefixer'), ], diff --git a/app/web/config/tailwind.config.js b/app/web/config/tailwind.config.js index a308f96..31d4d2b 100644 --- a/app/web/config/tailwind.config.js +++ b/app/web/config/tailwind.config.js @@ -1,5 +1,5 @@ module.exports = { - purge: ['./src/**/*.html', './src/**/*.js', './src/**/*.ts', './src/**/*.tsx'], + purge: ['src/**/*.{js,jsx,ts,tsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: { @@ -49,10 +49,10 @@ module.exports = { grab: 'grab' }, fontFamily: { - 'ropa-sans': ['Ropa Sans', 'Arial', 'sans-serif'], + 'ropa-sans': ['"Ropa Sans"', 'Arial', 'sans-serif'], roboto: ['Roboto', 'Arial', 'sans-serif'], - 'fira-code': ['Fira Code', 'monospace'], - 'fira-sans': ['Fira Sans', 'sans-seri'], + 'fira-code': ['"Fira Code"', 'monospace'], + 'fira-sans': ['"Fira Sans"', 'sans-serif'], }, gridAutoColumns: { 'preview-layout': 'minmax(30rem, 1fr) minmax(auto, 2fr)', diff --git a/app/web/package.json b/app/web/package.json index 9b1986a..dbeda4e 100644 --- a/app/web/package.json +++ b/app/web/package.json @@ -52,6 +52,7 @@ "autoprefixer": "^10.3.1", "html-webpack-plugin": "^4.5.0", "postcss": "^8.3.6", + "postcss-import": "^14.0.2", "postcss-loader": "^6.1.1", "tailwindcss": "^2.2.7" } diff --git a/app/web/src/App.tsx b/app/web/src/App.tsx index 999b619..714c2d8 100644 --- a/app/web/src/App.tsx +++ b/app/web/src/App.tsx @@ -10,6 +10,7 @@ ReactGA.initialize(process.env.GOOGLE_ANALYTICS_ID) import Routes from 'src/Routes' +import './font-imports.css' import './scaffold.css' import './index.css' diff --git a/app/web/src/font-imports.css b/app/web/src/font-imports.css new file mode 100644 index 0000000..76f3edf --- /dev/null +++ b/app/web/src/font-imports.css @@ -0,0 +1,9 @@ +@import 'https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap'; +@import 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,700&display=swap'; +@import 'https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap'; +@import 'https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap'; + +/* +Putting fonts in a separate css files is a robust way of making sure imports work with post-css +https://tailwindcss.com/docs/using-with-preprocessors#build-time-imports +*/ diff --git a/app/web/src/index.css b/app/web/src/index.css index dcffa2f..66e6794 100644 --- a/app/web/src/index.css +++ b/app/web/src/index.css @@ -9,11 +9,6 @@ @import "tailwindcss/components"; @import "tailwindcss/utilities"; -@import url('https://fonts.googleapis.com/css2?family=Ropa+Sans&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,500;1,700&display=swap'); - -@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap'); /** * END --- TAILWIND GENERATOR EDIT */ diff --git a/app/yarn.lock b/app/yarn.lock index c31eb2e..29e5998 100644 --- a/app/yarn.lock +++ b/app/yarn.lock @@ -14337,6 +14337,11 @@ picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3: resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.0.tgz#f1f061de8f6a4bf022892e2d128234fb98302972" integrity sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw== +pify@^2.3.0: + version "2.3.0" + resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c" + integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw= + pify@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/pify/-/pify-3.0.0.tgz#e5a4acd2c101fdf3d9a4d07f0dbc4db49dd28176" @@ -14521,6 +14526,15 @@ postcss-flexbugs-fixes@^4.2.1: dependencies: postcss "^7.0.26" +postcss-import@^14.0.2: + version "14.0.2" + resolved "https://registry.yarnpkg.com/postcss-import/-/postcss-import-14.0.2.tgz#60eff77e6be92e7b67fe469ec797d9424cae1aa1" + integrity sha512-BJ2pVK4KhUyMcqjuKs9RijV5tatNzNa73e/32aBVE/ejYPe37iH+6vAu9WvqUkB5OAYgLHzbSvzHnorybJCm9g== + dependencies: + postcss-value-parser "^4.0.0" + read-cache "^1.0.0" + resolve "^1.1.7" + postcss-js@^3.0.3: version "3.0.3" resolved "https://registry.yarnpkg.com/postcss-js/-/postcss-js-3.0.3.tgz#2f0bd370a2e8599d45439f6970403b5873abda33" @@ -14802,7 +14816,7 @@ postcss-value-parser@^3.3.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281" integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ== -postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0: +postcss-value-parser@^4.0.0, postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== @@ -15706,6 +15720,13 @@ react@^17.0.2: loose-envify "^1.1.0" object-assign "^4.1.1" +read-cache@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774" + integrity sha1-5mTvMRYRZsl1HNvo28+GtftY93Q= + dependencies: + pify "^2.3.0" + read-pkg-up@7.0.1, read-pkg-up@^7.0.1: version "7.0.1" resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507" @@ -16105,7 +16126,7 @@ resolve-url@^0.2.1: resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo= -resolve@1.20.0, resolve@^1.10.0, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.9.0: +resolve@1.20.0, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.3.2, resolve@^1.9.0: version "1.20.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975" integrity sha512-wENBPt4ySzg4ybFQW2TT1zMQucPK95HSh/nq2CFTZVOGut2+pQvSsgtda4d26YrYcr067wjbmzOG8byDPBX63A==