From 924e401df85d26d58e3820c10faf35dab2bd39ad Mon Sep 17 00:00:00 2001 From: Lluis Agusti Date: Wed, 15 Jan 2020 17:54:04 +0100 Subject: [PATCH 1/2] fix(tooltip): get CSS from CDN --- package.json | 1 + src/components/molecules/Tooltip/Tooltip.tsx | 2 -- src/components/styles/GlobalStyles.tsx | 7 +++++++ src/components/styles/__snapshots__/Styles.test.tsx.snap | 4 ++-- yarn.lock | 2 +- 5 files changed, 11 insertions(+), 5 deletions(-) diff --git a/package.json b/package.json index 6ce635b7d..a69fe9f1f 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "rollup-plugin-url": "^3.0.0", "semantic-release": "^15.13.12", "styled-components": "^4.4.0", + "tippy.js": "^5.1.4", "typescript": "^3.2.2" }, "browserslist": [ diff --git a/src/components/molecules/Tooltip/Tooltip.tsx b/src/components/molecules/Tooltip/Tooltip.tsx index b953f4836..5ff10ccea 100644 --- a/src/components/molecules/Tooltip/Tooltip.tsx +++ b/src/components/molecules/Tooltip/Tooltip.tsx @@ -1,7 +1,5 @@ import React from 'react'; import Tippy, { TippyProps } from '@tippy.js/react'; -import 'tippy.js/dist/tippy.css'; -import 'tippy.js/animations/shift-toward.css'; export default function Tooltip({ children, ...config }: Omit) { return ( diff --git a/src/components/styles/GlobalStyles.tsx b/src/components/styles/GlobalStyles.tsx index d08189ff1..16aaec41d 100644 --- a/src/components/styles/GlobalStyles.tsx +++ b/src/components/styles/GlobalStyles.tsx @@ -1,6 +1,7 @@ import { createGlobalStyle, css } from 'styled-components'; import { normalize } from 'styled-normalize'; import { typography } from '../../constants/typography'; +import { version as tippyVersion } from 'tippy.js/package.json'; // Universal box sizing with Inheritance. More info: https://css-tricks.com/box-sizing/#article-header-id-6 const boxSizing = css` @@ -28,11 +29,17 @@ const imagery = css` } `; +const tooltipGlobalStyles = css` + @import url('https://unpkg.com/tippy.js@${tippyVersion}/dist/tippy.css'); + @import url('https://unpkg.com/tippy.js@${tippyVersion}/animations/shift-toward.css'); +`; + const GlobalStyles = createGlobalStyle` ${normalize} ${defaultFont} ${boxSizing} ${imagery} + ${tooltipGlobalStyles} `; export default GlobalStyles; diff --git a/src/components/styles/__snapshots__/Styles.test.tsx.snap b/src/components/styles/__snapshots__/Styles.test.tsx.snap index ccf40c015..1700a8cb1 100644 --- a/src/components/styles/__snapshots__/Styles.test.tsx.snap +++ b/src/components/styles/__snapshots__/Styles.test.tsx.snap @@ -1,5 +1,5 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`allows to set global font styles 1`] = `"/* sc-component-id: sc-global-2771653525-import */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');"`; +exports[`allows to set global font styles 1`] = `"/* sc-component-id: sc-global-3277831321-import */ /* sc-component-id: sc-global-2771653525-import */ @import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700&display=swap');"`; -exports[`allows to set global generic styles 1`] = `"/* sc-component-id: sc-global-2771653525 */ /* sc-component-id: sc-global-3786679869 */ /* sc-component-id: sc-global-4069480412 */ html{line-height:1.15;-webkit-text-size-adjust:100%;} body{margin:0;} main{display:block;} h1{font-size:2em;margin:0.67em 0;} hr{box-sizing:content-box;height:0;overflow:visible;} pre{font-family:monospace,monospace;font-size:1em;} a{background-color:transparent;} abbr[title]{border-bottom:none;-webkit-text-decoration:underline;text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;} b,strong{font-weight:bolder;} code,kbd,samp{font-family:monospace,monospace;font-size:1em;} small{font-size:80%;} sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} sub{bottom:-0.25em;} sup{top:-0.5em;} img{border-style:none;} button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0;} button,input{overflow:visible;} button,select{text-transform:none;} button,[type=\\"button\\"],[type=\\"reset\\"],[type=\\"submit\\"]{-webkit-appearance:button;} button::-moz-focus-inner,[type=\\"button\\"]::-moz-focus-inner,[type=\\"reset\\"]::-moz-focus-inner,[type=\\"submit\\"]::-moz-focus-inner{border-style:none;padding:0;} button:-moz-focusring,[type=\\"button\\"]:-moz-focusring,[type=\\"reset\\"]:-moz-focusring,[type=\\"submit\\"]:-moz-focusring{outline:1px dotted ButtonText;} fieldset{padding:0.35em 0.75em 0.625em;} legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal;} progress{vertical-align:baseline;} textarea{overflow:auto;} [type=\\"checkbox\\"],[type=\\"radio\\"]{box-sizing:border-box;padding:0;} [type=\\"number\\"]::-webkit-inner-spin-button,[type=\\"number\\"]::-webkit-outer-spin-button{height:auto;} [type=\\"search\\"]{-webkit-appearance:textfield;outline-offset:-2px;} [type=\\"search\\"]::-webkit-search-decoration{-webkit-appearance:none;} ::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;} details{display:block;} summary{display:list-item;} template{display:none;} [hidden]{display:none;} html,body{font-family:\\"Open Sans\\",-apple-system,BlinkMacSystemFont,\\"Segoe UI\\",Roboto,Helvetica,Arial,sans-serif,\\"Apple Color Emoji\\",\\"Segoe UI Emoji\\",\\"Segoe UI Symbol\\";font-size:16px;} html{box-sizing:border-box;} *,*:before,*:after{box-sizing:inherit;} img{max-width:100%;}"`; +exports[`allows to set global generic styles 1`] = `"/* sc-component-id: sc-global-3277831321-import */ @import url('https://unpkg.com/tippy.js@5.1.4/dist/tippy.css'); @import url('https://unpkg.com/tippy.js@5.1.4/animations/shift-toward.css');"`; diff --git a/yarn.lock b/yarn.lock index 93c1c836b..c1a7c4d39 100644 --- a/yarn.lock +++ b/yarn.lock @@ -14335,7 +14335,7 @@ tiny-warning@^1.0.2: resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== -tippy.js@^5.1.1: +tippy.js@^5.1.1, tippy.js@^5.1.4: version "5.1.4" resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-5.1.4.tgz#decbef134d35e6ef0c6936e6bd99754cbbd5fb78" integrity sha512-M7AqmLFbo3Cp7SMqdsbfuTpTUlbpK+e6XfCWOWdEy/Qfx7R4CrAAJYaUGEcKRF8IHRZ/9dSm2YAp/fJAdI06ZQ== From 0caff36932ae2d4e38a367e733f630a22dda412f Mon Sep 17 00:00:00 2001 From: Lluis Agusti Date: Fri, 17 Jan 2020 15:37:05 +0100 Subject: [PATCH 2/2] chore(rollup): add json plugin So that Rollup knows how to handle JSON file imports --- etc/rollup/config.js | 2 ++ package.json | 2 +- yarn.lock | 11 +++++++++-- 3 files changed, 12 insertions(+), 3 deletions(-) diff --git a/etc/rollup/config.js b/etc/rollup/config.js index 5b06918b5..a398b7d88 100644 --- a/etc/rollup/config.js +++ b/etc/rollup/config.js @@ -6,6 +6,7 @@ import url from 'rollup-plugin-url'; import babel from 'rollup-plugin-babel'; import commonjs from 'rollup-plugin-commonjs'; import { terser } from 'rollup-plugin-terser'; +import json from '@rollup/plugin-json'; const pkg = require(path.resolve(process.cwd(), 'package.json')); @@ -30,6 +31,7 @@ export default { preserveModules: true, external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.peerDependencies || {})], plugins: [ + json(), customResolveOptions({ extensions }), babel({ presets: [['react-app', { flow: false, typescript: true }]], diff --git a/package.json b/package.json index a69fe9f1f..0ebb030f9 100644 --- a/package.json +++ b/package.json @@ -48,6 +48,7 @@ "devDependencies": { "@commitlint/cli": "^8.2.0", "@commitlint/config-conventional": "^8.2.0", + "@rollup/plugin-json": "^4.0.1", "@semantic-release/changelog": "^3.0.1", "@semantic-release/git": "^7.0.5", "@testing-library/jest-dom": "^4.2.0", @@ -89,7 +90,6 @@ "rollup-plugin-url": "^3.0.0", "semantic-release": "^15.13.12", "styled-components": "^4.4.0", - "tippy.js": "^5.1.4", "typescript": "^3.2.2" }, "browserslist": [ diff --git a/yarn.lock b/yarn.lock index c1a7c4d39..20c6148b0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1169,6 +1169,13 @@ universal-user-agent "^2.0.0" url-template "^2.0.8" +"@rollup/plugin-json@^4.0.1": + version "4.0.1" + resolved "https://registry.yarnpkg.com/@rollup/plugin-json/-/plugin-json-4.0.1.tgz#223898c6c37993886da06989b0e93ceef52aa3ce" + integrity sha512-soxllkhOGgchswBAAaTe7X9G80U2tjjHvXv0sBrriLJcC/89PkP59iTrKPOfbz3SjX088mKDmMhAscuyLz8ZSg== + dependencies: + rollup-pluginutils "^2.5.0" + "@samverschueren/stream-to-observable@^0.3.0": version "0.3.0" resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f" @@ -12983,7 +12990,7 @@ rollup-plugin-url@^3.0.0: mime "^2.4.4" rollup-pluginutils "^2.8.2" -rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2: +rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.8.1, rollup-pluginutils@^2.8.2: version "2.8.2" resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e" integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ== @@ -14335,7 +14342,7 @@ tiny-warning@^1.0.2: resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== -tippy.js@^5.1.1, tippy.js@^5.1.4: +tippy.js@^5.1.1: version "5.1.4" resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-5.1.4.tgz#decbef134d35e6ef0c6936e6bd99754cbbd5fb78" integrity sha512-M7AqmLFbo3Cp7SMqdsbfuTpTUlbpK+e6XfCWOWdEy/Qfx7R4CrAAJYaUGEcKRF8IHRZ/9dSm2YAp/fJAdI06ZQ==