From b3af22dae47a2ad6432cac46f7dfcd8876ed4539 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 12 Mar 2020 22:56:31 +0100 Subject: [PATCH 01/13] perf: try stylis for prefixing --- packages/fluentui/react-bindings/package.json | 2 +- packages/fluentui/react/package.json | 18 +- .../fluentui/react/src/utils/felaRenderer.tsx | 74 +++++- yarn.lock | 243 ++++++++++++++---- 4 files changed, 267 insertions(+), 70 deletions(-) diff --git a/packages/fluentui/react-bindings/package.json b/packages/fluentui/react-bindings/package.json index 6e72c515d8be4..78804e8403836 100644 --- a/packages/fluentui/react-bindings/package.json +++ b/packages/fluentui/react-bindings/package.json @@ -10,7 +10,7 @@ "@fluentui/state": "^0.46.0", "@fluentui/styles": "^0.46.0", "classnames": "^2.2.6", - "fela": "^10.6.1", + "fela": "^11.2.0", "lodash": "^4.17.15" }, "devDependencies": { diff --git a/packages/fluentui/react/package.json b/packages/fluentui/react/package.json index 2aad6b7ca0261..9a79e0d157816 100644 --- a/packages/fluentui/react/package.json +++ b/packages/fluentui/react/package.json @@ -16,19 +16,20 @@ "@fluentui/styles": "^0.46.0", "classnames": "^2.2.6", "downshift": "3.2.14", - "fela": "^10.6.1", - "fela-plugin-embedded": "^10.6.1", - "fela-plugin-fallback-value": "^10.6.1", - "fela-plugin-placeholder-prefixer": "^10.6.1", - "fela-plugin-prefixer": "^10.6.1", - "fela-plugin-rtl": "^10.6.1", + "fela": "^11.2.0", + "fela-plugin-embedded": "^11.2.0", + "fela-plugin-fallback-value": "^11.2.0", + "fela-plugin-placeholder-prefixer": "^11.2.0", + "fela-plugin-prefixer": "^11.2.0", + "fela-plugin-rtl": "^11.2.0", "inline-style-expand-shorthand": "^1.2.0", "keyboard-key": "1.0.1", "lodash": "^4.17.15", "popper.js": "^1.15.0", "prop-types": "^15.7.2", - "react-fela": "^10.6.1", - "react-transition-group": "^4.3.0" + "react-fela": "^11.2.0", + "react-transition-group": "^4.3.0", + "stylis": "^3.5.4" }, "devDependencies": { "@testing-library/jest-dom": "^5.1.1", @@ -36,6 +37,7 @@ "@types/faker": "^4.1.3", "@types/react": "16.8.11", "@types/simulant": "^0.2.0", + "@types/stylus": "^0.48.32", "@uifabric/build": "^7.0.0", "faker": "^4.1.0", "lerna-alias": "^3.0.3-0", diff --git a/packages/fluentui/react/src/utils/felaRenderer.tsx b/packages/fluentui/react/src/utils/felaRenderer.tsx index 44824fea2ec87..4c11e47464946 100644 --- a/packages/fluentui/react/src/utils/felaRenderer.tsx +++ b/packages/fluentui/react/src/utils/felaRenderer.tsx @@ -1,9 +1,8 @@ -import { Renderer } from '@fluentui/react-bindings'; -import { createRenderer as createFelaRenderer } from 'fela'; +// import { Renderer } from '@fluentui/react-bindings'; +import { createRenderer as createFelaRenderer, IRenderer } from 'fela'; import felaPluginEmbedded from 'fela-plugin-embedded'; import felaPluginFallbackValue from 'fela-plugin-fallback-value'; import felaPluginPlaceholderPrefixer from 'fela-plugin-placeholder-prefixer'; -import felaPluginPrefixer from 'fela-plugin-prefixer'; import felaPluginRtl from 'fela-plugin-rtl'; import felaDisableAnimationsPlugin from './felaDisableAnimationsPlugin'; @@ -11,6 +10,8 @@ import felaExpandCssShorthandsPlugin from './felaExpandCssShorthandsPlugin'; import felaFocusVisibleEnhancer from './felaFocusVisibleEnhancer'; import felaInvokeKeyframesPlugin from './felaInvokeKeyframesPlugin'; import felaSanitizeCss from './felaSanitizeCssPlugin'; +import { RULE_TYPE } from 'fela-utils'; +import * as Stylis from 'stylis'; let felaDevMode = false; @@ -48,10 +49,73 @@ const blacklistedClassNames = ['fa', 'fas', 'far', 'fal', 'fab']; const filterClassName = (className: string): boolean => className.indexOf('ad') === -1 && blacklistedClassNames.indexOf(className) === -1; +type Renderer = IRenderer & { + cache: Record; + _emitChange?: (change: RendererChange) => void; +}; + +type RendererChange = { + type: 'RULE' | 'KEYFRAME' | 'FONT' | 'STATIC' | 'CLEAR'; + className: string; + selector: string; + declaration: string; + pseudo: string; + media: string; + support: string; +}; + +const stylis = new Stylis({ + cascade: false, + compress: false, + global: false, + keyframe: false, + preserve: false, + semicolon: false +}); + +const felaStylis = (renderer: Renderer) => ({ + ...renderer, + _emitChange: (change: RendererChange) => { + if (change.type === RULE_TYPE) { + // const pseudo = change.pseudo ? change.pseudo.replace(':focus-visible', ':focus') : undefined; + // const selector = `html[data-whatinput="keyboard"] ${change.selector.replace(':focus-visible', ':focus')}`; + + // const declarationReference = _.findKey(renderer.cache, change); + // const enhancedChange = { + // ...change, + // pseudo, + // selector + // }; + + // if (change.declaration === 'display:grid') { + // console.log(change); + const prefixed = stylis('', change.declaration); + const enhancedChange = { + ...change, + declaration: prefixed.slice(1, -1) + }; + // console.log(prefixed, change.declaration); + // } + + // Fela has two types for rendering: + // - DOM via subscriptions that's why `_emitChange()` is replaced, it will notify all + // subscriptions + // - static rendering, it directly accesses `.cache` via `clusterCache()` and generates + // stylesheets from changes + // renderer.cache[declarationReference] = enhancedChange; + renderer._emitChange(enhancedChange); + + return; + } + + renderer._emitChange(change); + } +}); + const rendererConfig = { devMode: felaDevMode, filterClassName, - enhancers: [felaFocusVisibleEnhancer], + enhancers: [felaFocusVisibleEnhancer, felaStylis], plugins: [ felaDisableAnimationsPlugin(), @@ -64,7 +128,7 @@ const rendererConfig = { felaPluginPlaceholderPrefixer(), felaInvokeKeyframesPlugin(), felaPluginEmbedded(), - felaPluginPrefixer(), + // felaPluginPrefixer(), felaExpandCssShorthandsPlugin(), diff --git a/yarn.lock b/yarn.lock index ed415439e8071..6353419b73bbd 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4085,6 +4085,13 @@ "@storybook/react" "^5.2.0" "@types/react" "*" +"@types/stylus@^0.48.32": + version "0.48.32" + resolved "https://registry.yarnpkg.com/@types/stylus/-/stylus-0.48.32.tgz#b2a510c781828708a1f9c02dcf65afbfb483aca4" + integrity sha512-wSvryQmUN/gicHkFMSFRkCV/x3wPBAA9PNLnZJA4hg/ep0YyYfENa74St8FHUzobZua1//Pl3/ars1YQb34LNQ== + dependencies: + "@types/node" "*" + "@types/tapable@*": version "1.0.4" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370" @@ -4502,6 +4509,11 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7: mime-types "~2.1.24" negotiator "0.6.2" +acorn-dynamic-import@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948" + integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw== + acorn-globals@^4.1.0: version "4.3.2" resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.2.tgz#4e2c2313a597fd589720395f6354b41cd5ec8006" @@ -4530,6 +4542,11 @@ acorn@^6.0.1, acorn@^6.0.7: resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f" integrity sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA== +acorn@^6.0.5: + version "6.4.1" + resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474" + integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA== + acorn@^6.2.1: version "6.4.0" resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.0.tgz#b659d2ffbafa24baf5db1cdbb2c94a983ecd2784" @@ -5198,7 +5215,19 @@ atob@^2.1.1, atob@^2.1.2: resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== -autoprefixer@7.2.6, autoprefixer@^6.3.1, autoprefixer@^7.1.5, autoprefixer@^9.7.2: +autoprefixer@^6.3.1: + version "6.7.7" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014" + integrity sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ= + dependencies: + browserslist "^1.7.6" + caniuse-db "^1.0.30000634" + normalize-range "^0.1.2" + num2fraction "^1.2.2" + postcss "^5.2.16" + postcss-value-parser "^3.2.3" + +autoprefixer@^7.1.5: version "7.2.6" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.6.tgz#256672f86f7c735da849c4f07d008abb056067dc" integrity sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ== @@ -5210,6 +5239,19 @@ autoprefixer@7.2.6, autoprefixer@^6.3.1, autoprefixer@^7.1.5, autoprefixer@^9.7. postcss "^6.0.17" postcss-value-parser "^3.2.3" +autoprefixer@^9.7.2: + version "9.7.4" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.4.tgz#f8bf3e06707d047f0641d87aee8cfb174b2a5378" + integrity sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g== + dependencies: + browserslist "^4.8.3" + caniuse-lite "^1.0.30001020" + chalk "^2.4.2" + normalize-range "^0.1.2" + num2fraction "^1.2.2" + postcss "^7.0.26" + postcss-value-parser "^4.0.2" + awesome-typescript-loader@^3.2.3: version "3.5.0" resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-3.5.0.tgz#4d4d10cba7a04ed433dfa0334250846fb11a1a5a" @@ -6035,7 +6077,7 @@ browserslist@4.7.0: electron-to-chromium "^1.3.247" node-releases "^1.1.29" -browserslist@^1.3.6, browserslist@^1.5.2: +browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6: version "1.7.7" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9" integrity sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk= @@ -6361,6 +6403,11 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000639: resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000978.tgz#6c71237ff5e2b759bc52496f560e2f6287e90a28" integrity sha512-UTzb0WomXxeqhAn3HgygItnkQeiLujN/O4D6hhB4ccSgktBysAbO/duUBJiNsPyxn/DsV8OnIn45jNeuvmUcPQ== +caniuse-db@^1.0.30000634: + version "1.0.30001035" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001035.tgz#3a182cab9d556a4a02d945f1f739e81c18e73bfa" + integrity sha512-kLUON4XN3tq5Nwl7ZICDw+7/vMynSpRMVYDRkzLL31lgnpa6M2YXYdjst3h+xbzjMgdcveRTnRGE1h/1IcKK6A== + caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805: version "1.0.30000978" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000978.tgz#1e3346c27fc46bce9ac1ccd77863153a263dde56" @@ -6371,6 +6418,11 @@ caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001022: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001022.tgz#9eeffe580c3a8f110b7b1742dcf06a395885e4c6" integrity sha512-FjwPPtt/I07KyLPkBQ0g7/XuZg6oUkYBVnPHNj3VHJbOjmmJ/GdSo/GUY6MwINEQvjhP6WZVbX8Tvms8xh0D5A== +caniuse-lite@^1.0.30001020: + version "1.0.30001035" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001035.tgz#2bb53b8aa4716b2ed08e088d4dc816a5fe089a1e" + integrity sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ== + capture-exit@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4" @@ -6526,7 +6578,7 @@ chownr@^1.1.1: resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494" integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g== -chrome-trace-event@^1.0.2: +chrome-trace-event@^1.0.0, chrome-trace-event@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4" integrity sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ== @@ -7244,7 +7296,7 @@ copy-props@^2.0.1: each-props "^1.3.0" is-plain-object "^2.0.1" -copy-to-clipboard@3.2.0, copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.2.0: +copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.2.0.tgz#d2724a3ccbfed89706fac8a894872c979ac74467" integrity sha512-eOZERzvCmxS8HWzugj4Uxl8OJxa7T2k1Gi0X5qavwydHIfuSHq2dTD09LOg/XyGq4Zpb5IsR/2OJ5lbOegz78w== @@ -9702,73 +9754,74 @@ fd-slicer@~1.0.1: dependencies: pend "~1.2.0" -fela-bindings@^10.6.1: - version "10.6.1" - resolved "https://registry.yarnpkg.com/fela-bindings/-/fela-bindings-10.6.1.tgz#7658915178ec903f8e86d608ffd22f1ca3fca232" - integrity sha512-VY6PzkVHDpVHSvefa4AnfRYuzw1jgAheU+ePof4m8je3JgkoezKDiadI7uHD0teyzJhajDZ25nr2dOt2yCuMtA== +fela-bindings@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fela-bindings/-/fela-bindings-11.2.0.tgz#8ddc3c6710e903fa110dd09fe542b84c99a9b029" + integrity sha512-2DJDsq+7zBaRAWZ65DmnnEBYjwdDffn9NQs8tjsKuWtkVFgTLi28H/vYls11+nKHef6tDeo7L3JH/QzN/Ovj4w== dependencies: fast-loops "^1.0.0" - fela-dom "^10.6.1" - fela-tools "^10.6.1" + fela-dom "^11.2.0" + fela-tools "^11.2.0" react-addons-shallow-compare "^15.6.2" shallow-equal "^1.0.0" -fela-dom@^10.6.1: - version "10.6.1" - resolved "https://registry.yarnpkg.com/fela-dom/-/fela-dom-10.6.1.tgz#d249a4380ab1565e73e250fe624a36329fd256a7" - integrity sha512-J/EbPv7w7GGEBwhwwohTNdBThS1CrVaO5t8eapuKg0GDUCulbpBHuL5fw1+TbpJKEL54h7GwaCV9RZKZPUOXGA== +fela-dom@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fela-dom/-/fela-dom-11.2.0.tgz#0a1bc022f1f5cc457f4cf3a90fd077c29e256612" + integrity sha512-VJXgwtHANzSE7KsxquyEFdaJl3YGCM6HvvNvsdIahY/0vR7BCizbye1INpq4cNgmmnTSnA6UmqrOBL6haoaHcQ== dependencies: css-in-js-utils "^3.0.0" fast-loops "^1.0.1" - fela-utils "^10.6.1" + fela-utils "^11.2.0" + sort-css-media-queries "^1.4.3" -fela-plugin-custom-property@^10.6.1: - version "10.8.2" - resolved "https://registry.yarnpkg.com/fela-plugin-custom-property/-/fela-plugin-custom-property-10.8.2.tgz#41847826be4bf4495eee5072df16228f5f8827a8" - integrity sha512-SFbuMRQpetEUYwMsG0ngZrdEB7N7ytH+jsXeWt54GKhdz68XcvbAEIoc5vWSPiNVBKH47jV3+dwXjhejd5AdaQ== +fela-plugin-custom-property@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fela-plugin-custom-property/-/fela-plugin-custom-property-11.2.0.tgz#130c74883073e736f4af67cdcb23a5a8c982b2f2" + integrity sha512-kJqoUfg4TPmPRLMJL8wCNT//uJrhLm0ksT/KDCCFSkXHr2BbD9/blJkxM1056y9y/bqCFAa9c/l3IT3wIWFtPQ== dependencies: css-in-js-utils "^3.0.0" isobject "^3.0.1" -fela-plugin-embedded@^10.6.1: - version "10.8.2" - resolved "https://registry.yarnpkg.com/fela-plugin-embedded/-/fela-plugin-embedded-10.8.2.tgz#3369b0bd67864c696cb0b8ccb142a1de78d1eb48" - integrity sha512-HeLyDJHQgpBEMbWjsCES1Jtptawtaqnp0Ml3zKebPMrryCQj4j0k4VdyzcS+QzE4M0JD1r0FYhKla+mpuMP5Qw== +fela-plugin-embedded@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fela-plugin-embedded/-/fela-plugin-embedded-11.2.0.tgz#97ce62a21d2a7089d6f4d32a6b8da271a5c35ddf" + integrity sha512-xVjz3CBR4vsbZEajao+30QVgAS0MpJ51tN/bVX8ne3VN0clrBW92oPrwOVuI9GWSbkma0afBwseQHMn468Hl3g== dependencies: fast-loops "^1.0.0" isobject "^3.0.1" -fela-plugin-fallback-value@^10.6.1: - version "10.8.2" - resolved "https://registry.yarnpkg.com/fela-plugin-fallback-value/-/fela-plugin-fallback-value-10.8.2.tgz#c34ba7e369478f03bf24e798f64789d7306485e2" - integrity sha512-pjNQ4TJVJz8rDS8kEB7afRDHelQFzi0kIOhLSR0/LWLLFC7CfaQ3Vop9/w5Ot7iJtH8oR1dAxSQEyk497QcyPw== +fela-plugin-fallback-value@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fela-plugin-fallback-value/-/fela-plugin-fallback-value-11.2.0.tgz#576d902e2b2c3518b6843d54b15304f9538bc545" + integrity sha512-sgz3c69WEksDR6Y/AO7DoL871AZA2Yndn6mhH7hb3DM3BaYqhIgECSL8tJ0+RN3LkQkHbetEtfJKhT0r0PCQVQ== dependencies: css-in-js-utils "^3.0.0" isobject "^3.0.1" -fela-plugin-placeholder-prefixer@^10.6.1: - version "10.6.1" - resolved "https://registry.yarnpkg.com/fela-plugin-placeholder-prefixer/-/fela-plugin-placeholder-prefixer-10.6.1.tgz#c55b27cb32c61eefeee660ebcac39c64c0de1d6b" - integrity sha512-yZcTYsjRXjNrDFeDvML5QalgeO9hHN6sqC3geAwC44GTpaw9BG22BKiuCInvzhkSYWuT+q8XSgPrW7wDwL1TRQ== +fela-plugin-placeholder-prefixer@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fela-plugin-placeholder-prefixer/-/fela-plugin-placeholder-prefixer-11.2.0.tgz#b53d2e804acd1c202270cd82acae62d9ec98e90f" + integrity sha512-/KaiI6IXD4A7i//vgbz8Mg4LQ795IhRnE5AXTxSKHJ8mVlT3vml+SeaH8nYsVYHbE7wePEOCbs6+p1k2iEaplg== dependencies: fast-loops "^1.0.0" - fela-plugin-custom-property "^10.6.1" + fela-plugin-custom-property "^11.2.0" -fela-plugin-prefixer@^10.6.1: - version "10.6.1" - resolved "https://registry.yarnpkg.com/fela-plugin-prefixer/-/fela-plugin-prefixer-10.6.1.tgz#a13c358446ac563520672f277fa0273380bf6713" - integrity sha512-1QXNzwlkos5Ezi8mpYY6jJVrN1KzZdCWTjqm2yWj32zF5SFUVAFPF1/4+Shld7iFPZMshl7ijDdK1zLM/H/fuw== +fela-plugin-prefixer@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fela-plugin-prefixer/-/fela-plugin-prefixer-11.2.0.tgz#40244c70c6bab6bf527f66248c9414902227491f" + integrity sha512-m+JTrHmZE0byV9GN93xX7C3u6xLW1tXHRFsiz6/gkT3yzWNE++3UJD/nZ1l8/+vnEY9YX2f6gJgOotqcorepFw== dependencies: css-in-js-utils "^3.0.0" fast-loops "^1.0.0" - fela-plugin-fallback-value "^10.6.1" + fela-plugin-fallback-value "^11.2.0" inline-style-prefixer "^5.1.0" isobject "^3.0.1" -fela-plugin-rtl@^10.6.1: - version "10.8.2" - resolved "https://registry.yarnpkg.com/fela-plugin-rtl/-/fela-plugin-rtl-10.8.2.tgz#287e993e73e371ba9a65c124821baf14ff1d9cb3" - integrity sha512-Xc3uYTNU0TponAtMwqfJQc/F33gACCCPr7QOMqpJurlYUU9VaYhchgs7YMocqns6kBPRGrYc0mYiQqNCfpKsjw== +fela-plugin-rtl@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fela-plugin-rtl/-/fela-plugin-rtl-11.2.0.tgz#3d75cc895a78b6b7aaafa6ba2ac77f8156369b84" + integrity sha512-/1gq0xK07rhH9RTBokGAQmkiKApjMUmb4YdIFypQk6esS6ywSgX7nJvj0Tnd3cgskbxwRP3bXM8JFP4n9CIUwA== dependencies: rtl-css-js "^1.1.3" @@ -9782,6 +9835,16 @@ fela-tools@^10.6.1: fela "^10.6.1" fela-utils "^10.6.1" +fela-tools@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fela-tools/-/fela-tools-11.2.0.tgz#de349f57b931464267698b4daebfc9bd1563405d" + integrity sha512-Zyy2Jsqv2KylBdjgXnbS9ufpLvP8a0hNCfS103NmiXdnHLBESX+pqTBh4YHhPRNCa0nvFiRztTJL7Js8RSkurw== + dependencies: + css-in-js-utils "^3.0.0" + fast-loops "^1.0.0" + fela "^11.2.0" + fela-utils "^11.2.0" + fela-utils@^10.6.1: version "10.8.2" resolved "https://registry.yarnpkg.com/fela-utils/-/fela-utils-10.8.2.tgz#b9d38e043aaf5d3d48012686ffb84e6378f24a35" @@ -9790,6 +9853,14 @@ fela-utils@^10.6.1: css-in-js-utils "^3.0.0" fast-loops "^1.0.0" +fela-utils@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fela-utils/-/fela-utils-11.2.0.tgz#d1947275a8070e99db3e8d7bc6a75d2963df498a" + integrity sha512-fYSw5AYjh2m+Lj0y1WRTx4aBscngRhRDkHdoEtG0tZH5Re1q8+VeHIrM7MRCrzHB8BtIoLkXURDGPe3vSZPTYA== + dependencies: + css-in-js-utils "^3.0.0" + fast-loops "^1.0.0" + fela@^10.6.1: version "10.6.1" resolved "https://registry.yarnpkg.com/fela/-/fela-10.6.1.tgz#66a8349018a5c06908deca7fc18a83b0df9d63a6" @@ -9801,6 +9872,17 @@ fela@^10.6.1: fela-utils "^10.6.1" isobject "^3.0.1" +fela@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/fela/-/fela-11.2.0.tgz#19c7d94dbb44423cb44ae8899c6a3aff49af7037" + integrity sha512-xhiRS9wIuZorsY9hOaTInGl2zXJF2CaUda7NerwMFzE6hyXkNwTSX0ZfITKUyKq9015AtXFnjKTe2hXtJeXI1Q== + dependencies: + css-in-js-utils "^3.0.0" + csstype "^2.5.5" + fast-loops "^1.0.0" + fela-utils "^11.2.0" + isobject "^3.0.1" + figgy-pudding@^3.4.1, figgy-pudding@^3.5.1: version "3.5.1" resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790" @@ -13873,7 +13955,7 @@ load-json-file@^4.0.0: pify "^3.0.0" strip-bom "^3.0.0" -loader-runner@^2.4.0: +loader-runner@^2.3.0, loader-runner@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357" integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw== @@ -14645,7 +14727,7 @@ memoizerific@^1.11.3: dependencies: map-or-similar "^1.5.0" -memory-fs@^0.4.0, memory-fs@^0.4.1: +memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI= @@ -15317,7 +15399,7 @@ node-ipc@^9.1.0: js-message "1.0.5" js-queue "2.0.0" -node-libs-browser@^2.2.1: +node-libs-browser@^2.0.0, node-libs-browser@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425" integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q== @@ -17004,7 +17086,7 @@ postcss@6.0.1: source-map "^0.5.6" supports-color "^3.2.3" -postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8: +postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16: version "5.2.18" resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5" integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg== @@ -17032,6 +17114,15 @@ postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.23, postcss@^7.0. source-map "^0.6.1" supports-color "^6.1.0" +postcss@^7.0.26: + version "7.0.27" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9" + integrity sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ== + dependencies: + chalk "^2.4.2" + source-map "^0.6.1" + supports-color "^6.1.0" + prefix-style@2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06" @@ -17711,13 +17802,13 @@ react-fast-compare@^2.0.4: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== -react-fela@^10.6.1: - version "10.6.1" - resolved "https://registry.yarnpkg.com/react-fela/-/react-fela-10.6.1.tgz#7d76246d073d93eefc08084345e81193a1e510c6" - integrity sha512-HEtJXkvmwvvPJ4lbYrbttudgmacXnWSU9H3Syx4KiyiUBq9y/f0bn1YW/BLh4jQVVxAsbI6s6hSNornX/sdEzw== +react-fela@^11.2.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/react-fela/-/react-fela-11.2.0.tgz#b4781d6b3b75a4f038c036145b3201001b2f789b" + integrity sha512-atQmmnUjcDmyAF2a0BQRwz17JnLbkq/YGsfgCxtv62BPUqrBguADmY+coYomaAdAFDTVQptlLWrQBNP1qmIReA== dependencies: - fela-bindings "^10.6.1" - fela-dom "^10.6.1" + fela-bindings "^11.2.0" + fela-dom "^11.2.0" prop-types "^15.5.8" react-focus-lock@^2.1.0: @@ -19598,6 +19689,11 @@ socks@~2.3.2: ip "^1.1.5" smart-buffer "4.0.2" +sort-css-media-queries@^1.4.3: + version "1.5.0" + resolved "https://registry.yarnpkg.com/sort-css-media-queries/-/sort-css-media-queries-1.5.0.tgz#8f605ad372caad0b81be010311882c046e738093" + integrity sha512-QofNE7CEVH1AKdhS7L9IPbV9UtyQYNXyw++8lC+xG6iOLlpzsmncZRiKbihTAESvZ8wOhwnPoesHbMrehrQyyw== + sort-keys@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad" @@ -20249,6 +20345,11 @@ style-to-object@^0.2.1: dependencies: inline-style-parser "0.1.1" +stylis@^3.5.4: + version "3.5.4" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" + integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== + supports-color@3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5" @@ -20391,7 +20492,7 @@ tapable@^0.2.5: resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.9.tgz#af2d8bbc9b04f74ee17af2b4d9048f807acd18a8" integrity sha512-2wsvQ+4GwBvLPLWsNfLCDYGsW6xb7aeC6utq2Qh0PFwgEy7K7dsma9Jsmb2zSQj7GvYAyUGSntLtsv++GmgL1A== -tapable@^1.0.0, tapable@^1.0.0-beta.5, tapable@^1.1.3: +tapable@^1.0.0, tapable@^1.0.0-beta.5, tapable@^1.1.0, tapable@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2" integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA== @@ -20461,7 +20562,7 @@ term-size@^2.1.0: resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.1.1.tgz#f81ec25854af91a480d2f9d0c77ffcb26594ed1a" integrity sha512-UqvQSch04R+69g4RDhrslmGvGL3ucDRX/U+snYW0Mab4uCAyKSndUksaoqlJ81QKSpRnIsuOYQCbC2ZWx2896A== -terser-webpack-plugin@^1.4.3: +terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.4.3: version "1.4.3" resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c" integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA== @@ -21788,7 +21889,7 @@ warning@^4.0.2, warning@^4.0.3: dependencies: loose-envify "^1.0.0" -watchpack@^1.6.0: +watchpack@^1.5.0, watchpack@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00" integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA== @@ -21940,7 +22041,7 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0: source-list-map "^2.0.0" source-map "~0.6.1" -webpack-sources@^1.2.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3: +webpack-sources@^1.2.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3: version "1.4.3" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933" integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ== @@ -21955,7 +22056,37 @@ webpack-virtual-modules@^0.2.0: dependencies: debug "^3.0.0" -webpack@4.35.0, webpack@^4.33.0, webpack@^4.35.0, webpack@^4.38.0: +webpack@4.35.0: + version "4.35.0" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.35.0.tgz#ad3f0f8190876328806ccb7a36f3ce6e764b8378" + integrity sha512-M5hL3qpVvtr8d4YaJANbAQBc4uT01G33eDpl/psRTBCfjxFTihdhin1NtAKB1ruDwzeVdcsHHV3NX+QsAgOosw== + dependencies: + "@webassemblyjs/ast" "1.8.5" + "@webassemblyjs/helper-module-context" "1.8.5" + "@webassemblyjs/wasm-edit" "1.8.5" + "@webassemblyjs/wasm-parser" "1.8.5" + acorn "^6.0.5" + acorn-dynamic-import "^4.0.0" + ajv "^6.1.0" + ajv-keywords "^3.1.0" + chrome-trace-event "^1.0.0" + enhanced-resolve "^4.1.0" + eslint-scope "^4.0.0" + json-parse-better-errors "^1.0.2" + loader-runner "^2.3.0" + loader-utils "^1.1.0" + memory-fs "~0.4.1" + micromatch "^3.1.8" + mkdirp "~0.5.0" + neo-async "^2.5.0" + node-libs-browser "^2.0.0" + schema-utils "^1.0.0" + tapable "^1.1.0" + terser-webpack-plugin "^1.1.0" + watchpack "^1.5.0" + webpack-sources "^1.3.0" + +webpack@^4.33.0, webpack@^4.38.0: version "4.41.6" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.6.tgz#12f2f804bf6542ef166755050d4afbc8f66ba7e1" integrity sha512-yxXfV0Zv9WMGRD+QexkZzmGIh54bsvEs+9aRWxnN8erLWEOehAKUTeNBoUbA6HPEZPlRo7KDi2ZcNveoZgK9MA== From cf5dd30a5769f08cfe6f4fa007ff7ae8415d14db Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 12 Mar 2020 23:03:58 +0100 Subject: [PATCH 02/13] fix import --- packages/fluentui/react/src/utils/felaRenderer.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/fluentui/react/src/utils/felaRenderer.tsx b/packages/fluentui/react/src/utils/felaRenderer.tsx index 4c11e47464946..a01f4ec8eeb9a 100644 --- a/packages/fluentui/react/src/utils/felaRenderer.tsx +++ b/packages/fluentui/react/src/utils/felaRenderer.tsx @@ -11,7 +11,8 @@ import felaFocusVisibleEnhancer from './felaFocusVisibleEnhancer'; import felaInvokeKeyframesPlugin from './felaInvokeKeyframesPlugin'; import felaSanitizeCss from './felaSanitizeCssPlugin'; import { RULE_TYPE } from 'fela-utils'; -import * as Stylis from 'stylis'; +// @ts-ignore +import Stylis from 'stylis'; let felaDevMode = false; From f9d89c2ced84366844bbff78c48dafe9d248ab80 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 19 Mar 2020 12:54:51 +0100 Subject: [PATCH 03/13] reset lock to master --- yarn.lock | 243 +++++++++++++----------------------------------------- 1 file changed, 56 insertions(+), 187 deletions(-) diff --git a/yarn.lock b/yarn.lock index 6353419b73bbd..ed415439e8071 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4085,13 +4085,6 @@ "@storybook/react" "^5.2.0" "@types/react" "*" -"@types/stylus@^0.48.32": - version "0.48.32" - resolved "https://registry.yarnpkg.com/@types/stylus/-/stylus-0.48.32.tgz#b2a510c781828708a1f9c02dcf65afbfb483aca4" - integrity sha512-wSvryQmUN/gicHkFMSFRkCV/x3wPBAA9PNLnZJA4hg/ep0YyYfENa74St8FHUzobZua1//Pl3/ars1YQb34LNQ== - dependencies: - "@types/node" "*" - "@types/tapable@*": version "1.0.4" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.4.tgz#b4ffc7dc97b498c969b360a41eee247f82616370" @@ -4509,11 +4502,6 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7: mime-types "~2.1.24" negotiator "0.6.2" -acorn-dynamic-import@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948" - integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw== - acorn-globals@^4.1.0: version "4.3.2" resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.2.tgz#4e2c2313a597fd589720395f6354b41cd5ec8006" @@ -4542,11 +4530,6 @@ acorn@^6.0.1, acorn@^6.0.7: resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f" integrity sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA== -acorn@^6.0.5: - version "6.4.1" - resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474" - integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA== - acorn@^6.2.1: version "6.4.0" resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.0.tgz#b659d2ffbafa24baf5db1cdbb2c94a983ecd2784" @@ -5215,19 +5198,7 @@ atob@^2.1.1, atob@^2.1.2: resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9" integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg== -autoprefixer@^6.3.1: - version "6.7.7" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-6.7.7.tgz#1dbd1c835658e35ce3f9984099db00585c782014" - integrity sha1-Hb0cg1ZY41zj+ZhAmdsAWFx4IBQ= - dependencies: - browserslist "^1.7.6" - caniuse-db "^1.0.30000634" - normalize-range "^0.1.2" - num2fraction "^1.2.2" - postcss "^5.2.16" - postcss-value-parser "^3.2.3" - -autoprefixer@^7.1.5: +autoprefixer@7.2.6, autoprefixer@^6.3.1, autoprefixer@^7.1.5, autoprefixer@^9.7.2: version "7.2.6" resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.6.tgz#256672f86f7c735da849c4f07d008abb056067dc" integrity sha512-Iq8TRIB+/9eQ8rbGhcP7ct5cYb/3qjNYAR2SnzLCEcwF6rvVOax8+9+fccgXk4bEhQGjOZd5TLhsksmAdsbGqQ== @@ -5239,19 +5210,6 @@ autoprefixer@^7.1.5: postcss "^6.0.17" postcss-value-parser "^3.2.3" -autoprefixer@^9.7.2: - version "9.7.4" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.7.4.tgz#f8bf3e06707d047f0641d87aee8cfb174b2a5378" - integrity sha512-g0Ya30YrMBAEZk60lp+qfX5YQllG+S5W3GYCFvyHTvhOki0AEQJLPEcIuGRsqVwLi8FvXPVtwTGhfr38hVpm0g== - dependencies: - browserslist "^4.8.3" - caniuse-lite "^1.0.30001020" - chalk "^2.4.2" - normalize-range "^0.1.2" - num2fraction "^1.2.2" - postcss "^7.0.26" - postcss-value-parser "^4.0.2" - awesome-typescript-loader@^3.2.3: version "3.5.0" resolved "https://registry.yarnpkg.com/awesome-typescript-loader/-/awesome-typescript-loader-3.5.0.tgz#4d4d10cba7a04ed433dfa0334250846fb11a1a5a" @@ -6077,7 +6035,7 @@ browserslist@4.7.0: electron-to-chromium "^1.3.247" node-releases "^1.1.29" -browserslist@^1.3.6, browserslist@^1.5.2, browserslist@^1.7.6: +browserslist@^1.3.6, browserslist@^1.5.2: version "1.7.7" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9" integrity sha1-C9dnBCWL6CmyOYu1Dkti0aFmsLk= @@ -6403,11 +6361,6 @@ caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000639: resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000978.tgz#6c71237ff5e2b759bc52496f560e2f6287e90a28" integrity sha512-UTzb0WomXxeqhAn3HgygItnkQeiLujN/O4D6hhB4ccSgktBysAbO/duUBJiNsPyxn/DsV8OnIn45jNeuvmUcPQ== -caniuse-db@^1.0.30000634: - version "1.0.30001035" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30001035.tgz#3a182cab9d556a4a02d945f1f739e81c18e73bfa" - integrity sha512-kLUON4XN3tq5Nwl7ZICDw+7/vMynSpRMVYDRkzLL31lgnpa6M2YXYdjst3h+xbzjMgdcveRTnRGE1h/1IcKK6A== - caniuse-lite@^1.0.30000792, caniuse-lite@^1.0.30000805: version "1.0.30000978" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000978.tgz#1e3346c27fc46bce9ac1ccd77863153a263dde56" @@ -6418,11 +6371,6 @@ caniuse-lite@^1.0.30000989, caniuse-lite@^1.0.30001022: resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001022.tgz#9eeffe580c3a8f110b7b1742dcf06a395885e4c6" integrity sha512-FjwPPtt/I07KyLPkBQ0g7/XuZg6oUkYBVnPHNj3VHJbOjmmJ/GdSo/GUY6MwINEQvjhP6WZVbX8Tvms8xh0D5A== -caniuse-lite@^1.0.30001020: - version "1.0.30001035" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001035.tgz#2bb53b8aa4716b2ed08e088d4dc816a5fe089a1e" - integrity sha512-C1ZxgkuA4/bUEdMbU5WrGY4+UhMFFiXrgNAfxiMIqWgFTWfv/xsZCS2xEHT2LMq7xAZfuAnu6mcqyDl0ZR6wLQ== - capture-exit@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4" @@ -6578,7 +6526,7 @@ chownr@^1.1.1: resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494" integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g== -chrome-trace-event@^1.0.0, chrome-trace-event@^1.0.2: +chrome-trace-event@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/chrome-trace-event/-/chrome-trace-event-1.0.2.tgz#234090ee97c7d4ad1a2c4beae27505deffc608a4" integrity sha512-9e/zx1jw7B4CO+c/RXoCsfg/x1AfUBioy4owYH0bJprEYAx5hRFLRhWBqHAG57D0ZM4H7vxbP7bPe0VwhQRYDQ== @@ -7296,7 +7244,7 @@ copy-props@^2.0.1: each-props "^1.3.0" is-plain-object "^2.0.1" -copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.2.0: +copy-to-clipboard@3.2.0, copy-to-clipboard@^3.0.8, copy-to-clipboard@^3.2.0: version "3.2.0" resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.2.0.tgz#d2724a3ccbfed89706fac8a894872c979ac74467" integrity sha512-eOZERzvCmxS8HWzugj4Uxl8OJxa7T2k1Gi0X5qavwydHIfuSHq2dTD09LOg/XyGq4Zpb5IsR/2OJ5lbOegz78w== @@ -9754,74 +9702,73 @@ fd-slicer@~1.0.1: dependencies: pend "~1.2.0" -fela-bindings@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/fela-bindings/-/fela-bindings-11.2.0.tgz#8ddc3c6710e903fa110dd09fe542b84c99a9b029" - integrity sha512-2DJDsq+7zBaRAWZ65DmnnEBYjwdDffn9NQs8tjsKuWtkVFgTLi28H/vYls11+nKHef6tDeo7L3JH/QzN/Ovj4w== +fela-bindings@^10.6.1: + version "10.6.1" + resolved "https://registry.yarnpkg.com/fela-bindings/-/fela-bindings-10.6.1.tgz#7658915178ec903f8e86d608ffd22f1ca3fca232" + integrity sha512-VY6PzkVHDpVHSvefa4AnfRYuzw1jgAheU+ePof4m8je3JgkoezKDiadI7uHD0teyzJhajDZ25nr2dOt2yCuMtA== dependencies: fast-loops "^1.0.0" - fela-dom "^11.2.0" - fela-tools "^11.2.0" + fela-dom "^10.6.1" + fela-tools "^10.6.1" react-addons-shallow-compare "^15.6.2" shallow-equal "^1.0.0" -fela-dom@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/fela-dom/-/fela-dom-11.2.0.tgz#0a1bc022f1f5cc457f4cf3a90fd077c29e256612" - integrity sha512-VJXgwtHANzSE7KsxquyEFdaJl3YGCM6HvvNvsdIahY/0vR7BCizbye1INpq4cNgmmnTSnA6UmqrOBL6haoaHcQ== +fela-dom@^10.6.1: + version "10.6.1" + resolved "https://registry.yarnpkg.com/fela-dom/-/fela-dom-10.6.1.tgz#d249a4380ab1565e73e250fe624a36329fd256a7" + integrity sha512-J/EbPv7w7GGEBwhwwohTNdBThS1CrVaO5t8eapuKg0GDUCulbpBHuL5fw1+TbpJKEL54h7GwaCV9RZKZPUOXGA== dependencies: css-in-js-utils "^3.0.0" fast-loops "^1.0.1" - fela-utils "^11.2.0" - sort-css-media-queries "^1.4.3" + fela-utils "^10.6.1" -fela-plugin-custom-property@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/fela-plugin-custom-property/-/fela-plugin-custom-property-11.2.0.tgz#130c74883073e736f4af67cdcb23a5a8c982b2f2" - integrity sha512-kJqoUfg4TPmPRLMJL8wCNT//uJrhLm0ksT/KDCCFSkXHr2BbD9/blJkxM1056y9y/bqCFAa9c/l3IT3wIWFtPQ== +fela-plugin-custom-property@^10.6.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/fela-plugin-custom-property/-/fela-plugin-custom-property-10.8.2.tgz#41847826be4bf4495eee5072df16228f5f8827a8" + integrity sha512-SFbuMRQpetEUYwMsG0ngZrdEB7N7ytH+jsXeWt54GKhdz68XcvbAEIoc5vWSPiNVBKH47jV3+dwXjhejd5AdaQ== dependencies: css-in-js-utils "^3.0.0" isobject "^3.0.1" -fela-plugin-embedded@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/fela-plugin-embedded/-/fela-plugin-embedded-11.2.0.tgz#97ce62a21d2a7089d6f4d32a6b8da271a5c35ddf" - integrity sha512-xVjz3CBR4vsbZEajao+30QVgAS0MpJ51tN/bVX8ne3VN0clrBW92oPrwOVuI9GWSbkma0afBwseQHMn468Hl3g== +fela-plugin-embedded@^10.6.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/fela-plugin-embedded/-/fela-plugin-embedded-10.8.2.tgz#3369b0bd67864c696cb0b8ccb142a1de78d1eb48" + integrity sha512-HeLyDJHQgpBEMbWjsCES1Jtptawtaqnp0Ml3zKebPMrryCQj4j0k4VdyzcS+QzE4M0JD1r0FYhKla+mpuMP5Qw== dependencies: fast-loops "^1.0.0" isobject "^3.0.1" -fela-plugin-fallback-value@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/fela-plugin-fallback-value/-/fela-plugin-fallback-value-11.2.0.tgz#576d902e2b2c3518b6843d54b15304f9538bc545" - integrity sha512-sgz3c69WEksDR6Y/AO7DoL871AZA2Yndn6mhH7hb3DM3BaYqhIgECSL8tJ0+RN3LkQkHbetEtfJKhT0r0PCQVQ== +fela-plugin-fallback-value@^10.6.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/fela-plugin-fallback-value/-/fela-plugin-fallback-value-10.8.2.tgz#c34ba7e369478f03bf24e798f64789d7306485e2" + integrity sha512-pjNQ4TJVJz8rDS8kEB7afRDHelQFzi0kIOhLSR0/LWLLFC7CfaQ3Vop9/w5Ot7iJtH8oR1dAxSQEyk497QcyPw== dependencies: css-in-js-utils "^3.0.0" isobject "^3.0.1" -fela-plugin-placeholder-prefixer@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/fela-plugin-placeholder-prefixer/-/fela-plugin-placeholder-prefixer-11.2.0.tgz#b53d2e804acd1c202270cd82acae62d9ec98e90f" - integrity sha512-/KaiI6IXD4A7i//vgbz8Mg4LQ795IhRnE5AXTxSKHJ8mVlT3vml+SeaH8nYsVYHbE7wePEOCbs6+p1k2iEaplg== +fela-plugin-placeholder-prefixer@^10.6.1: + version "10.6.1" + resolved "https://registry.yarnpkg.com/fela-plugin-placeholder-prefixer/-/fela-plugin-placeholder-prefixer-10.6.1.tgz#c55b27cb32c61eefeee660ebcac39c64c0de1d6b" + integrity sha512-yZcTYsjRXjNrDFeDvML5QalgeO9hHN6sqC3geAwC44GTpaw9BG22BKiuCInvzhkSYWuT+q8XSgPrW7wDwL1TRQ== dependencies: fast-loops "^1.0.0" - fela-plugin-custom-property "^11.2.0" + fela-plugin-custom-property "^10.6.1" -fela-plugin-prefixer@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/fela-plugin-prefixer/-/fela-plugin-prefixer-11.2.0.tgz#40244c70c6bab6bf527f66248c9414902227491f" - integrity sha512-m+JTrHmZE0byV9GN93xX7C3u6xLW1tXHRFsiz6/gkT3yzWNE++3UJD/nZ1l8/+vnEY9YX2f6gJgOotqcorepFw== +fela-plugin-prefixer@^10.6.1: + version "10.6.1" + resolved "https://registry.yarnpkg.com/fela-plugin-prefixer/-/fela-plugin-prefixer-10.6.1.tgz#a13c358446ac563520672f277fa0273380bf6713" + integrity sha512-1QXNzwlkos5Ezi8mpYY6jJVrN1KzZdCWTjqm2yWj32zF5SFUVAFPF1/4+Shld7iFPZMshl7ijDdK1zLM/H/fuw== dependencies: css-in-js-utils "^3.0.0" fast-loops "^1.0.0" - fela-plugin-fallback-value "^11.2.0" + fela-plugin-fallback-value "^10.6.1" inline-style-prefixer "^5.1.0" isobject "^3.0.1" -fela-plugin-rtl@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/fela-plugin-rtl/-/fela-plugin-rtl-11.2.0.tgz#3d75cc895a78b6b7aaafa6ba2ac77f8156369b84" - integrity sha512-/1gq0xK07rhH9RTBokGAQmkiKApjMUmb4YdIFypQk6esS6ywSgX7nJvj0Tnd3cgskbxwRP3bXM8JFP4n9CIUwA== +fela-plugin-rtl@^10.6.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/fela-plugin-rtl/-/fela-plugin-rtl-10.8.2.tgz#287e993e73e371ba9a65c124821baf14ff1d9cb3" + integrity sha512-Xc3uYTNU0TponAtMwqfJQc/F33gACCCPr7QOMqpJurlYUU9VaYhchgs7YMocqns6kBPRGrYc0mYiQqNCfpKsjw== dependencies: rtl-css-js "^1.1.3" @@ -9835,16 +9782,6 @@ fela-tools@^10.6.1: fela "^10.6.1" fela-utils "^10.6.1" -fela-tools@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/fela-tools/-/fela-tools-11.2.0.tgz#de349f57b931464267698b4daebfc9bd1563405d" - integrity sha512-Zyy2Jsqv2KylBdjgXnbS9ufpLvP8a0hNCfS103NmiXdnHLBESX+pqTBh4YHhPRNCa0nvFiRztTJL7Js8RSkurw== - dependencies: - css-in-js-utils "^3.0.0" - fast-loops "^1.0.0" - fela "^11.2.0" - fela-utils "^11.2.0" - fela-utils@^10.6.1: version "10.8.2" resolved "https://registry.yarnpkg.com/fela-utils/-/fela-utils-10.8.2.tgz#b9d38e043aaf5d3d48012686ffb84e6378f24a35" @@ -9853,14 +9790,6 @@ fela-utils@^10.6.1: css-in-js-utils "^3.0.0" fast-loops "^1.0.0" -fela-utils@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/fela-utils/-/fela-utils-11.2.0.tgz#d1947275a8070e99db3e8d7bc6a75d2963df498a" - integrity sha512-fYSw5AYjh2m+Lj0y1WRTx4aBscngRhRDkHdoEtG0tZH5Re1q8+VeHIrM7MRCrzHB8BtIoLkXURDGPe3vSZPTYA== - dependencies: - css-in-js-utils "^3.0.0" - fast-loops "^1.0.0" - fela@^10.6.1: version "10.6.1" resolved "https://registry.yarnpkg.com/fela/-/fela-10.6.1.tgz#66a8349018a5c06908deca7fc18a83b0df9d63a6" @@ -9872,17 +9801,6 @@ fela@^10.6.1: fela-utils "^10.6.1" isobject "^3.0.1" -fela@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/fela/-/fela-11.2.0.tgz#19c7d94dbb44423cb44ae8899c6a3aff49af7037" - integrity sha512-xhiRS9wIuZorsY9hOaTInGl2zXJF2CaUda7NerwMFzE6hyXkNwTSX0ZfITKUyKq9015AtXFnjKTe2hXtJeXI1Q== - dependencies: - css-in-js-utils "^3.0.0" - csstype "^2.5.5" - fast-loops "^1.0.0" - fela-utils "^11.2.0" - isobject "^3.0.1" - figgy-pudding@^3.4.1, figgy-pudding@^3.5.1: version "3.5.1" resolved "https://registry.yarnpkg.com/figgy-pudding/-/figgy-pudding-3.5.1.tgz#862470112901c727a0e495a80744bd5baa1d6790" @@ -13955,7 +13873,7 @@ load-json-file@^4.0.0: pify "^3.0.0" strip-bom "^3.0.0" -loader-runner@^2.3.0, loader-runner@^2.4.0: +loader-runner@^2.4.0: version "2.4.0" resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357" integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw== @@ -14727,7 +14645,7 @@ memoizerific@^1.11.3: dependencies: map-or-similar "^1.5.0" -memory-fs@^0.4.0, memory-fs@^0.4.1, memory-fs@~0.4.1: +memory-fs@^0.4.0, memory-fs@^0.4.1: version "0.4.1" resolved "https://registry.yarnpkg.com/memory-fs/-/memory-fs-0.4.1.tgz#3a9a20b8462523e447cfbc7e8bb80ed667bfc552" integrity sha1-OpoguEYlI+RHz7x+i7gO1me/xVI= @@ -15399,7 +15317,7 @@ node-ipc@^9.1.0: js-message "1.0.5" js-queue "2.0.0" -node-libs-browser@^2.0.0, node-libs-browser@^2.2.1: +node-libs-browser@^2.2.1: version "2.2.1" resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425" integrity sha512-h/zcD8H9kaDZ9ALUWwlBUDo6TKF8a7qBSCSEGfjTVIYeqsioSKaAX+BN7NgiMGp6iSIXZ3PxgCu8KS3b71YK5Q== @@ -17086,7 +17004,7 @@ postcss@6.0.1: source-map "^0.5.6" supports-color "^3.2.3" -postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16: +postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8: version "5.2.18" resolved "https://registry.yarnpkg.com/postcss/-/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5" integrity sha512-zrUjRRe1bpXKsX1qAJNJjqZViErVuyEkMTRrwu4ud4sbTtIBRmtaYDrHmcGgmrbsW3MHfmtIf+vJumgQn+PrXg== @@ -17114,15 +17032,6 @@ postcss@^7.0.0, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.23, postcss@^7.0. source-map "^0.6.1" supports-color "^6.1.0" -postcss@^7.0.26: - version "7.0.27" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.27.tgz#cc67cdc6b0daa375105b7c424a85567345fc54d9" - integrity sha512-WuQETPMcW9Uf1/22HWUWP9lgsIC+KEHg2kozMflKjbeUtw9ujvFX6QmIfozaErDkmLWS9WEnEdEe6Uo9/BNTdQ== - dependencies: - chalk "^2.4.2" - source-map "^0.6.1" - supports-color "^6.1.0" - prefix-style@2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06" @@ -17802,13 +17711,13 @@ react-fast-compare@^2.0.4: resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9" integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw== -react-fela@^11.2.0: - version "11.2.0" - resolved "https://registry.yarnpkg.com/react-fela/-/react-fela-11.2.0.tgz#b4781d6b3b75a4f038c036145b3201001b2f789b" - integrity sha512-atQmmnUjcDmyAF2a0BQRwz17JnLbkq/YGsfgCxtv62BPUqrBguADmY+coYomaAdAFDTVQptlLWrQBNP1qmIReA== +react-fela@^10.6.1: + version "10.6.1" + resolved "https://registry.yarnpkg.com/react-fela/-/react-fela-10.6.1.tgz#7d76246d073d93eefc08084345e81193a1e510c6" + integrity sha512-HEtJXkvmwvvPJ4lbYrbttudgmacXnWSU9H3Syx4KiyiUBq9y/f0bn1YW/BLh4jQVVxAsbI6s6hSNornX/sdEzw== dependencies: - fela-bindings "^11.2.0" - fela-dom "^11.2.0" + fela-bindings "^10.6.1" + fela-dom "^10.6.1" prop-types "^15.5.8" react-focus-lock@^2.1.0: @@ -19689,11 +19598,6 @@ socks@~2.3.2: ip "^1.1.5" smart-buffer "4.0.2" -sort-css-media-queries@^1.4.3: - version "1.5.0" - resolved "https://registry.yarnpkg.com/sort-css-media-queries/-/sort-css-media-queries-1.5.0.tgz#8f605ad372caad0b81be010311882c046e738093" - integrity sha512-QofNE7CEVH1AKdhS7L9IPbV9UtyQYNXyw++8lC+xG6iOLlpzsmncZRiKbihTAESvZ8wOhwnPoesHbMrehrQyyw== - sort-keys@^1.0.0: version "1.1.2" resolved "https://registry.yarnpkg.com/sort-keys/-/sort-keys-1.1.2.tgz#441b6d4d346798f1b4e49e8920adfba0e543f9ad" @@ -20345,11 +20249,6 @@ style-to-object@^0.2.1: dependencies: inline-style-parser "0.1.1" -stylis@^3.5.4: - version "3.5.4" - resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" - integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== - supports-color@3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5" @@ -20492,7 +20391,7 @@ tapable@^0.2.5: resolved "https://registry.yarnpkg.com/tapable/-/tapable-0.2.9.tgz#af2d8bbc9b04f74ee17af2b4d9048f807acd18a8" integrity sha512-2wsvQ+4GwBvLPLWsNfLCDYGsW6xb7aeC6utq2Qh0PFwgEy7K7dsma9Jsmb2zSQj7GvYAyUGSntLtsv++GmgL1A== -tapable@^1.0.0, tapable@^1.0.0-beta.5, tapable@^1.1.0, tapable@^1.1.3: +tapable@^1.0.0, tapable@^1.0.0-beta.5, tapable@^1.1.3: version "1.1.3" resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2" integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA== @@ -20562,7 +20461,7 @@ term-size@^2.1.0: resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.1.1.tgz#f81ec25854af91a480d2f9d0c77ffcb26594ed1a" integrity sha512-UqvQSch04R+69g4RDhrslmGvGL3ucDRX/U+snYW0Mab4uCAyKSndUksaoqlJ81QKSpRnIsuOYQCbC2ZWx2896A== -terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.4.3: +terser-webpack-plugin@^1.4.3: version "1.4.3" resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-1.4.3.tgz#5ecaf2dbdc5fb99745fd06791f46fc9ddb1c9a7c" integrity sha512-QMxecFz/gHQwteWwSo5nTc6UaICqN1bMedC5sMtUc7y3Ha3Q8y6ZO0iCR8pq4RJC8Hjf0FEPEHZqcMB/+DFCrA== @@ -21889,7 +21788,7 @@ warning@^4.0.2, warning@^4.0.3: dependencies: loose-envify "^1.0.0" -watchpack@^1.5.0, watchpack@^1.6.0: +watchpack@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.0.tgz#4bc12c2ebe8aa277a71f1d3f14d685c7b446cd00" integrity sha512-i6dHe3EyLjMmDlU1/bGQpEw25XSjkJULPuAVKCbNRefQVq48yXKUpwg538F7AZTf9kyr57zj++pQFltUa5H7yA== @@ -22041,7 +21940,7 @@ webpack-sources@^1.0.1, webpack-sources@^1.1.0: source-list-map "^2.0.0" source-map "~0.6.1" -webpack-sources@^1.2.0, webpack-sources@^1.3.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3: +webpack-sources@^1.2.0, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-sources@^1.4.3: version "1.4.3" resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-1.4.3.tgz#eedd8ec0b928fbf1cbfe994e22d2d890f330a933" integrity sha512-lgTS3Xhv1lCOKo7SA5TjKXMjpSM4sBjNV5+q2bqesbSPs5FjGmU6jjtBSkX9b4qW87vDIsCIlUPOEhbZrMdjeQ== @@ -22056,37 +21955,7 @@ webpack-virtual-modules@^0.2.0: dependencies: debug "^3.0.0" -webpack@4.35.0: - version "4.35.0" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.35.0.tgz#ad3f0f8190876328806ccb7a36f3ce6e764b8378" - integrity sha512-M5hL3qpVvtr8d4YaJANbAQBc4uT01G33eDpl/psRTBCfjxFTihdhin1NtAKB1ruDwzeVdcsHHV3NX+QsAgOosw== - dependencies: - "@webassemblyjs/ast" "1.8.5" - "@webassemblyjs/helper-module-context" "1.8.5" - "@webassemblyjs/wasm-edit" "1.8.5" - "@webassemblyjs/wasm-parser" "1.8.5" - acorn "^6.0.5" - acorn-dynamic-import "^4.0.0" - ajv "^6.1.0" - ajv-keywords "^3.1.0" - chrome-trace-event "^1.0.0" - enhanced-resolve "^4.1.0" - eslint-scope "^4.0.0" - json-parse-better-errors "^1.0.2" - loader-runner "^2.3.0" - loader-utils "^1.1.0" - memory-fs "~0.4.1" - micromatch "^3.1.8" - mkdirp "~0.5.0" - neo-async "^2.5.0" - node-libs-browser "^2.0.0" - schema-utils "^1.0.0" - tapable "^1.1.0" - terser-webpack-plugin "^1.1.0" - watchpack "^1.5.0" - webpack-sources "^1.3.0" - -webpack@^4.33.0, webpack@^4.38.0: +webpack@4.35.0, webpack@^4.33.0, webpack@^4.35.0, webpack@^4.38.0: version "4.41.6" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.6.tgz#12f2f804bf6542ef166755050d4afbc8f66ba7e1" integrity sha512-yxXfV0Zv9WMGRD+QexkZzmGIh54bsvEs+9aRWxnN8erLWEOehAKUTeNBoUbA6HPEZPlRo7KDi2ZcNveoZgK9MA== From 1ead3b366fabc3ff2ede08a65f96d72f6fc6d732 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 19 Mar 2020 13:04:12 +0100 Subject: [PATCH 04/13] wip --- packages/fluentui/react-bindings/package.json | 2 +- .../fluentui/react-northstar/package.json | 4 +- .../src/utils/felaRenderer.tsx | 5 +- .../src/utils/felaStylisEnhancer.ts | 55 +++++++++++++++++++ .../react-northstar/src/utils/types.ts | 16 ++++++ yarn.lock | 31 ++--------- 6 files changed, 81 insertions(+), 32 deletions(-) create mode 100644 packages/fluentui/react-northstar/src/utils/felaStylisEnhancer.ts create mode 100644 packages/fluentui/react-northstar/src/utils/types.ts diff --git a/packages/fluentui/react-bindings/package.json b/packages/fluentui/react-bindings/package.json index 78804e8403836..6e72c515d8be4 100644 --- a/packages/fluentui/react-bindings/package.json +++ b/packages/fluentui/react-bindings/package.json @@ -10,7 +10,7 @@ "@fluentui/state": "^0.46.0", "@fluentui/styles": "^0.46.0", "classnames": "^2.2.6", - "fela": "^11.2.0", + "fela": "^10.6.1", "lodash": "^4.17.15" }, "devDependencies": { diff --git a/packages/fluentui/react-northstar/package.json b/packages/fluentui/react-northstar/package.json index a106e9e022839..3ad44844bc442 100644 --- a/packages/fluentui/react-northstar/package.json +++ b/packages/fluentui/react-northstar/package.json @@ -20,7 +20,6 @@ "fela-plugin-embedded": "^10.6.1", "fela-plugin-fallback-value": "^10.6.1", "fela-plugin-placeholder-prefixer": "^10.6.1", - "fela-plugin-prefixer": "^10.6.1", "fela-plugin-rtl": "^10.6.1", "inline-style-expand-shorthand": "^1.2.0", "keyboard-key": "1.0.1", @@ -28,7 +27,8 @@ "popper.js": "^1.15.0", "prop-types": "^15.7.2", "react-fela": "^10.6.1", - "react-transition-group": "^4.3.0" + "react-transition-group": "^4.3.0", + "stylis": "^3.5.4" }, "devDependencies": { "@testing-library/jest-dom": "^5.1.1", diff --git a/packages/fluentui/react-northstar/src/utils/felaRenderer.tsx b/packages/fluentui/react-northstar/src/utils/felaRenderer.tsx index 681b0b071f2b8..6bc9658943fad 100644 --- a/packages/fluentui/react-northstar/src/utils/felaRenderer.tsx +++ b/packages/fluentui/react-northstar/src/utils/felaRenderer.tsx @@ -3,7 +3,6 @@ import { createRenderer as createFelaRenderer } from 'fela'; import felaPluginEmbedded from 'fela-plugin-embedded'; import felaPluginFallbackValue from 'fela-plugin-fallback-value'; import felaPluginPlaceholderPrefixer from 'fela-plugin-placeholder-prefixer'; -import felaPluginPrefixer from 'fela-plugin-prefixer'; import felaPluginRtl from 'fela-plugin-rtl'; import felaDisableAnimationsPlugin from './felaDisableAnimationsPlugin'; @@ -11,6 +10,7 @@ import felaExpandCssShorthandsPlugin from './felaExpandCssShorthandsPlugin'; import felaFocusVisibleEnhancer from './felaFocusVisibleEnhancer'; import felaInvokeKeyframesPlugin from './felaInvokeKeyframesPlugin'; import felaSanitizeCss from './felaSanitizeCssPlugin'; +import felaStylisEnhancer from './felaStylisEnhancer'; let felaDevMode = false; @@ -52,7 +52,7 @@ const filterClassName = (className: string): boolean => const rendererConfig = { devMode: felaDevMode, filterClassName, - enhancers: [felaFocusVisibleEnhancer], + enhancers: [felaFocusVisibleEnhancer, felaStylisEnhancer], plugins: [ felaDisableAnimationsPlugin(), @@ -65,7 +65,6 @@ const rendererConfig = { felaPluginPlaceholderPrefixer(), felaInvokeKeyframesPlugin(), felaPluginEmbedded(), - felaPluginPrefixer(), felaExpandCssShorthandsPlugin(), diff --git a/packages/fluentui/react-northstar/src/utils/felaStylisEnhancer.ts b/packages/fluentui/react-northstar/src/utils/felaStylisEnhancer.ts new file mode 100644 index 0000000000000..2482adec46789 --- /dev/null +++ b/packages/fluentui/react-northstar/src/utils/felaStylisEnhancer.ts @@ -0,0 +1,55 @@ +import { RULE_TYPE } from 'fela-utils'; +// @ts-ignore +import Stylis from 'stylis'; + +import { Renderer, RendererChange } from './types'; + +const stylis = new Stylis({ + cascade: false, + compress: false, + global: false, + keyframe: false, + preserve: false, + semicolon: false, +}); + +const felaStylisEnhancer = (renderer: Renderer) => ({ + ...renderer, + _emitChange: (change: RendererChange) => { + if (change.type === RULE_TYPE) { + // const pseudo = change.pseudo ? change.pseudo.replace(':focus-visible', ':focus') : undefined; + // const selector = `html[data-whatinput="keyboard"] ${change.selector.replace(':focus-visible', ':focus')}`; + + // const declarationReference = _.findKey(renderer.cache, change); + // const enhancedChange = { + // ...change, + // pseudo, + // selector + // }; + + // if (change.declaration === 'display:grid') { + // console.log(change); + const prefixed = stylis('', change.declaration); + const enhancedChange = { + ...change, + declaration: prefixed.slice(1, -1), + }; + // console.log(prefixed, change.declaration); + // } + + // Fela has two types for rendering: + // - DOM via subscriptions that's why `_emitChange()` is replaced, it will notify all + // subscriptions + // - static rendering, it directly accesses `.cache` via `clusterCache()` and generates + // stylesheets from changes + // renderer.cache[declarationReference] = enhancedChange; + renderer._emitChange(enhancedChange); + + return; + } + + renderer._emitChange(change); + }, +}); + +export default felaStylisEnhancer; diff --git a/packages/fluentui/react-northstar/src/utils/types.ts b/packages/fluentui/react-northstar/src/utils/types.ts new file mode 100644 index 0000000000000..452b94daeb514 --- /dev/null +++ b/packages/fluentui/react-northstar/src/utils/types.ts @@ -0,0 +1,16 @@ +import { IRenderer } from 'fela'; + +export type Renderer = IRenderer & { + cache: Record; + _emitChange?: (change: RendererChange) => void; +}; + +export type RendererChange = { + type: 'RULE' | 'KEYFRAME' | 'FONT' | 'STATIC' | 'CLEAR'; + className: string; + selector: string; + declaration: Object; + pseudo: string; + media: string; + support: string; +}; diff --git a/yarn.lock b/yarn.lock index ed415439e8071..a7bd8ef0ca1ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7462,14 +7462,6 @@ css-color-names@0.0.4: resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0" integrity sha1-gIrcLnnPhHOAabZGyyDsJ762KeA= -css-in-js-utils@^2.0.0: - version "2.0.1" - resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz#3b472b398787291b47cfe3e44fecfdd9e914ba99" - integrity sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA== - dependencies: - hyphenate-style-name "^1.0.2" - isobject "^3.0.1" - css-in-js-utils@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/css-in-js-utils/-/css-in-js-utils-3.0.0.tgz#4379185f5cc79f9eba39b4e795c317f253ffaa40" @@ -9754,17 +9746,6 @@ fela-plugin-placeholder-prefixer@^10.6.1: fast-loops "^1.0.0" fela-plugin-custom-property "^10.6.1" -fela-plugin-prefixer@^10.6.1: - version "10.6.1" - resolved "https://registry.yarnpkg.com/fela-plugin-prefixer/-/fela-plugin-prefixer-10.6.1.tgz#a13c358446ac563520672f277fa0273380bf6713" - integrity sha512-1QXNzwlkos5Ezi8mpYY6jJVrN1KzZdCWTjqm2yWj32zF5SFUVAFPF1/4+Shld7iFPZMshl7ijDdK1zLM/H/fuw== - dependencies: - css-in-js-utils "^3.0.0" - fast-loops "^1.0.0" - fela-plugin-fallback-value "^10.6.1" - inline-style-prefixer "^5.1.0" - isobject "^3.0.1" - fela-plugin-rtl@^10.6.1: version "10.8.2" resolved "https://registry.yarnpkg.com/fela-plugin-rtl/-/fela-plugin-rtl-10.8.2.tgz#287e993e73e371ba9a65c124821baf14ff1d9cb3" @@ -11758,13 +11739,6 @@ inline-style-parser@0.1.1: resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1" integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q== -inline-style-prefixer@^5.1.0: - version "5.1.0" - resolved "https://registry.yarnpkg.com/inline-style-prefixer/-/inline-style-prefixer-5.1.0.tgz#cb63195f9456dcda25cf59743e45c4d9815b0811" - integrity sha512-giteQHPMrApQOSjNSjteO5ZGSGMRf9gas14fRy2lg2buSc1nRnj6o6xuNds5cMTKrkncyrTu3gJn/yflFMVdmg== - dependencies: - css-in-js-utils "^2.0.0" - inquirer@6.5.0: version "6.5.0" resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.0.tgz#2303317efc9a4ea7ec2e2df6f86569b734accf42" @@ -20249,6 +20223,11 @@ style-to-object@^0.2.1: dependencies: inline-style-parser "0.1.1" +stylis@^3.5.4: + version "3.5.4" + resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe" + integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q== + supports-color@3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-3.1.2.tgz#72a262894d9d408b956ca05ff37b2ed8a6e2a2d5" From 5d025a5afee97df7bc235748debc1c12e40c38e5 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 19 Mar 2020 13:28:49 +0100 Subject: [PATCH 05/13] final updates --- .../src/utils/felaStylisEnhancer.ts | 32 ++---------- .../__snapshots__/felaRenderer-test.tsx.snap | 51 +++++++------------ .../test/specs/utils/felaRenderer-test.tsx | 4 -- 3 files changed, 22 insertions(+), 65 deletions(-) diff --git a/packages/fluentui/react-northstar/src/utils/felaStylisEnhancer.ts b/packages/fluentui/react-northstar/src/utils/felaStylisEnhancer.ts index 2482adec46789..534afed976f16 100644 --- a/packages/fluentui/react-northstar/src/utils/felaStylisEnhancer.ts +++ b/packages/fluentui/react-northstar/src/utils/felaStylisEnhancer.ts @@ -4,6 +4,7 @@ import Stylis from 'stylis'; import { Renderer, RendererChange } from './types'; +// We use Stylis only for vendor prefixing, all other capabilities are disabled const stylis = new Stylis({ cascade: false, compress: false, @@ -17,35 +18,10 @@ const felaStylisEnhancer = (renderer: Renderer) => ({ ...renderer, _emitChange: (change: RendererChange) => { if (change.type === RULE_TYPE) { - // const pseudo = change.pseudo ? change.pseudo.replace(':focus-visible', ':focus') : undefined; - // const selector = `html[data-whatinput="keyboard"] ${change.selector.replace(':focus-visible', ':focus')}`; + const prefixed: string = stylis('', change.declaration); - // const declarationReference = _.findKey(renderer.cache, change); - // const enhancedChange = { - // ...change, - // pseudo, - // selector - // }; - - // if (change.declaration === 'display:grid') { - // console.log(change); - const prefixed = stylis('', change.declaration); - const enhancedChange = { - ...change, - declaration: prefixed.slice(1, -1), - }; - // console.log(prefixed, change.declaration); - // } - - // Fela has two types for rendering: - // - DOM via subscriptions that's why `_emitChange()` is replaced, it will notify all - // subscriptions - // - static rendering, it directly accesses `.cache` via `clusterCache()` and generates - // stylesheets from changes - // renderer.cache[declarationReference] = enhancedChange; - renderer._emitChange(enhancedChange); - - return; + // Fela uses objects by references, it's safe to override properties + change.declaration = prefixed.slice(1, -1); } renderer._emitChange(change); diff --git a/packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap b/packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap index 6e49fadb0c264..752f02258bdd0 100644 --- a/packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap +++ b/packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap @@ -58,6 +58,7 @@ exports[`felaRenderer array returned by keyframe results in CSS fallback values } } .a { + -webkit-animation-name: k1; animation-name: k1; } @@ -104,9 +105,11 @@ exports[`felaRenderer keyframe colors are rendered 1`] = ` } } .a { + -webkit-animation-name: k1; animation-name: k1; } .b { + -webkit-animation-duration: 5s; animation-duration: 5s; } @@ -119,7 +122,7 @@ exports[`felaRenderer keyframe colors are rendered 1`] = ` exports[`felaRenderer marginLeft is rendered into marginLeft due to RTL with \`noFlip\` 1`] = ` ".a { - margin-left: 10px; /* @noflip */ + margin-left: 10px; } @@ -147,71 +150,53 @@ exports[`felaRenderer marginLeft is rendered into marginRight due to RTL 1`] = ` exports[`felaRenderer prefixes required styles 1`] = ` ".a { - background: -webkit-linear-gradient(#e66465, #9198e5); - background: -moz-linear-gradient(#e66465, #9198e5); - background: linear-gradient(#e66465, #9198e5); -} -.b { - background-clip: -webkit-text; - background-clip: text; -} -.c { - background-image: -webkit-cross-fade(75% url(\\"foo.png\\"), url(\\"bar.png\\")); - background-image: cross-fade(75% url(\\"foo.png\\"), url(\\"bar.png\\")); -} -.d { cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; } -.e { +.b { display: -webkit-box; - display: -moz-box; - display: -ms-flexbox; display: -webkit-flex; + display: -ms-flexbox; display: flex; } -.f { +.c { -webkit-filter: blur(5px); filter: blur(5px); } -.g { +.d { height: -webkit-min-content; height: -moz-min-content; height: min-content; } -.h { - margin-block-end: 20px; - -webkit-margin-after: 20px; -} -.i { +.e { position: -webkit-sticky; position: sticky; } -.j { - transition: width 2s, height 2s, background-color 2s, transform 2s; +.f { + -webkit-transition: width 2s, height 2s, background-color 2s, + -webkit-transform 2s; -webkit-transition: width 2s, height 2s, background-color 2s, transform 2s; - -moz-transition: width 2s, height 2s, background-color 2s, transform 2s; + transition: width 2s, height 2s, background-color 2s, transform 2s; } -.k:hover { +.g:hover { background-image: -webkit-image-set(\\"cat.png\\" 1x, \\"cat-2x.png\\" 2x); background-image: image-set(\\"cat.png\\" 1x, \\"cat-2x.png\\" 2x); } -.l:hover { +.h:hover { display: -webkit-inline-box; - display: -moz-inline-box; - display: -ms-inline-flexbox; display: -webkit-inline-flex; + display: -ms-inline-flexbox; display: inline-flex; } -.m:hover { +.i:hover { height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; } -
; +
; " `; diff --git a/packages/fluentui/react-northstar/test/specs/utils/felaRenderer-test.tsx b/packages/fluentui/react-northstar/test/specs/utils/felaRenderer-test.tsx index 71c320125a679..ee60635b42b16 100644 --- a/packages/fluentui/react-northstar/test/specs/utils/felaRenderer-test.tsx +++ b/packages/fluentui/react-northstar/test/specs/utils/felaRenderer-test.tsx @@ -168,14 +168,10 @@ describe('felaRenderer', () => { Date: Thu, 19 Mar 2020 14:44:35 +0100 Subject: [PATCH 06/13] add changelog entry --- packages/fluentui/CHANGELOG.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index f99bbe59cfec7..47f4c804f6b2b 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -43,6 +43,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Expose `contentWrapper` shorthand from `AccordionTitle` @silviuavram ([#12265](https://github.com/OfficeDev/office-ui-fabric-react/pull/12265)) - Add `disabled` versions for `Dropdown` and `Input` @silviuavram ([#12250](https://github.com/OfficeDev/office-ui-fabric-react/pull/12250)) +### Performance +- Replace `fela-plugin-prexifer` with `stylis` @layershifter ([#12289](https://github.com/OfficeDev/office-ui-fabric-react/pull/12289)) + ### Documentation - Adding context menu for table row to example and prototype @kolaps33 ([#12253](https://github.com/OfficeDev/office-ui-fabric-react/pull/12253)) From af9994c9af044f3600dcd9df008a83bc51cfe777 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 19 Mar 2020 15:34:55 +0100 Subject: [PATCH 07/13] fix grid usages --- .../Accordion/accordionTitleStyles.ts | 10 ++++- .../components/Checkbox/checkboxStyles.ts | 42 +++++++++++++++---- .../teams/components/Dialog/dialogStyles.ts | 16 ++++++- .../teams/components/Form/formStyles.ts | 3 +- .../teams/components/Grid/gridStyles.ts | 12 ++++-- .../teams/components/Layout/layoutStyles.ts | 4 +- packages/fluentui/styles/src/types.ts | 6 ++- 7 files changed, 75 insertions(+), 18 deletions(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Accordion/accordionTitleStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Accordion/accordionTitleStyles.ts index 041a7b1144f39..0e9bc66e569cf 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Accordion/accordionTitleStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Accordion/accordionTitleStyles.ts @@ -12,8 +12,14 @@ const accordionTitleStyles: ComponentSlotStylesPrepared ({ - display: 'grid', - gridTemplateColumns: `auto ${p.content ? '1fr' : ''}`, + display: ['grid', '-ms-grid'], + gridTemplateColumns: 'auto', + msGridColumns: 'auto', + + ...(p.content && { + gridTemplateColumns: 'auto 1fr', + msGridColumns: 'auto 1fr', + }), }), indicator: ({ props: p, variables: v, rtl }) => ({ alignItems: 'center', diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Checkbox/checkboxStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Checkbox/checkboxStyles.ts index 3b1bd90c161bc..0395c8bbf80fd 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Checkbox/checkboxStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Checkbox/checkboxStyles.ts @@ -18,9 +18,16 @@ const checkboxStyles: ComponentSlotStylesPrepared ({ position: 'relative', - display: 'inline-grid', + display: ['inline-grid', '-ms-inline-grid'], + gridTemplateColumns: 'auto 1fr', // IE11: Gap is done via virtual column as in autoprefixer - gridTemplateColumns: p.labelPosition === 'start' ? `1fr ${v.gap} auto` : `auto ${v.gap} 1fr`, + msGridColumns: `auto ${v.gap} 1fr`, + + ...(p.labelPosition === 'start' && { + gridTemplateColumns: `1fr auto`, + msGridColumns: `1fr ${v.gap} auto`, + }), + cursor: 'pointer', outline: 0, @@ -82,8 +89,15 @@ const checkboxStyles: ComponentSlotStylesPrepared ({ - gridColumn: p.labelPosition === 'start' ? 3 : 1, - '-ms-grid-row-align': 'center', + msGridRowAlign: 'center', + gridColumn: 1, + msGridColumn: 1, + + ...(p.labelPosition === 'start' && { + gridColumn: 3, + msGridColumn: 3, + }), + boxShadow: 'unset', width: pxToRem(16), height: pxToRem(16), @@ -120,8 +134,15 @@ const checkboxStyles: ComponentSlotStylesPrepared ({ - '-ms-grid-row-align': 'center', - gridColumn: p.labelPosition === 'start' ? 3 : 1, + msGridRowAlign: 'center', + gridColumn: 1, + msGridColumn: 1, + + ...(p.labelPosition === 'start' && { + gridColumn: 3, + msGridColumn: 3, + }), + boxShadow: 'unset', boxSizing: 'border-box', @@ -170,7 +191,14 @@ const checkboxStyles: ComponentSlotStylesPrepared ({ display: 'block', // IE11: should be forced to be block, as inline-block is not supported - gridColumn: p.labelPosition === 'start' ? 1 : 3, + + gridColumn: 3, + msGridColumn: 3, + + ...(p.labelPosition === 'start' && { + gridColumn: 1, + msGridColumn: 1, + }), }), }; diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Dialog/dialogStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Dialog/dialogStyles.ts index 6056459ffd2d3..dc79f3ed3b389 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Dialog/dialogStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Dialog/dialogStyles.ts @@ -13,8 +13,11 @@ export default { padding: v.rootPadding, position: 'relative', width: v.rootWidth, - display: 'grid', + + display: ['grid', '-ms-grid'], gridTemplateColumns: '1fr auto', + msGridColumns: '1fr auto', + boxShadow: v.boxShadow, color: v.foregroundColor, }), @@ -22,6 +25,7 @@ export default { footer: (): ICSSInJSStyle => ({ gridColumn: '1 / -1', gridRow: 3, + msGridRow: 3, }), actions: (): ICSSInJSStyle => ({ @@ -30,8 +34,14 @@ export default { content: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({ margin: v.contentMargin, + gridColumn: '1 / span 2', gridRow: 2, + + msGridColumn: 1, + msGridColumnSpan: 2, + msGridRow: 2, + justifySelf: 'left', width: '100%', }), @@ -39,7 +49,9 @@ export default { header: ({ variables: v }: DialogStyleParams): ICSSInJSStyle => ({ margin: v.headerMargin, gridRow: 1, + msGridRow: 1, gridColumn: 1, + msGridColumn: 1, justifySelf: 'left', fontSize: v.headerFontSize, fontWeight: v.headerFontWeight, @@ -47,7 +59,9 @@ export default { headerAction: ({ variables: v }: DialogStyleParams) => ({ gridRow: 1, + msGridRow: 1, gridColumn: 2, + msGridColumn: 2, color: v.foregroundColor, margin: v.headerActionMargin, }), diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Form/formStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Form/formStyles.ts index 5773da98b7253..19479dcc108f4 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Form/formStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Form/formStyles.ts @@ -6,8 +6,9 @@ const formStyles: ComponentSlotStylesPrepared = { root: ({ props, variables }): ICSSInJSStyle => ({ height: '100%', width: '100%', - display: 'grid', + display: ['grid', '-ms-grid'], gridTemplateColumns: '1fr', + msGridColumns: '1fr', justifyContent: 'space-evenly', gridGap: pxToRem(20), justifyItems: 'start', diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Grid/gridStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Grid/gridStyles.ts index eb0bf8b516977..cc4ed6060aaa8 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Grid/gridStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Grid/gridStyles.ts @@ -17,12 +17,18 @@ const gridStyles: ComponentSlotStylesPrepared = { width, padding, gridGap, - display: 'grid', + display: ['grid', '-ms-grid'], justifyContent: 'space-evenly', ...(rows && !columns && { gridAutoFlow: 'column' }), - ...(rows && { gridTemplateRows: getCSSTemplateValue(rows) }), - ...(columns && { gridTemplateColumns: getCSSTemplateValue(columns) }), + ...(rows && { + gridTemplateRows: getCSSTemplateValue(rows), + msGridRows: getCSSTemplateValue(rows), + }), + ...(columns && { + gridTemplateColumns: getCSSTemplateValue(columns), + msGridColumns: getCSSTemplateValue(columns), + }), '& > *': { outlineOffset: '-3px' }, }; diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Layout/layoutStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Layout/layoutStyles.ts index 37f8208e54e36..7c001f5f6cdde 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Layout/layoutStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Layout/layoutStyles.ts @@ -25,7 +25,7 @@ const layoutStyles: ComponentSlotStylesPrepared = { ...(debug && debugRoot()), justifyItems, alignItems, - display: 'grid', + display: ['grid', '-ms-grid'], [vertical ? 'gridTemplateRows' : 'gridTemplateColumns']: [ // Heads up! // IE11 Doesn't support grid-gap, insert virtual columns instead @@ -60,7 +60,7 @@ const layoutStyles: ComponentSlotStylesPrepared = { main: ({ props: p }): ICSSInJSStyle => ({ ...(p.debug && debugArea()), alignItems: 'center', - display: 'grid', + display: ['grid', '-ms-grid'], [p.vertical ? '-ms-grid-row' : '-ms-grid-column']: countTrue([p.start, p.start && p.gap, p.main]), ...p.mainCSS, }), diff --git a/packages/fluentui/styles/src/types.ts b/packages/fluentui/styles/src/types.ts index 5aff503f7efa5..7da1d76af8d2a 100644 --- a/packages/fluentui/styles/src/types.ts +++ b/packages/fluentui/styles/src/types.ts @@ -40,10 +40,12 @@ export interface ICSSPseudoElementStyle extends ICSSInJSStyle { content?: string; } -export interface ICSSInJSStyle extends CSSProperties { +export type ICSSInJSStyle = Omit & { // TODO Questionable: how else would users target their own children? [key: string]: any; + display?: CSSProperties['display'] | CSSProperties['display'][]; + // missing React.CSSProperties speak?: CSS.Globals | 'none' | 'normal' | 'spell-out'; @@ -65,7 +67,7 @@ export interface ICSSInJSStyle extends CSSProperties { // we could expand these ourselves so that "font-smoothing" works, but which values? '-webkit-font-smoothing'?: CSS.Globals | 'auto' | 'none' | 'antialiased' | 'subpixel-antialiased'; '-moz-osx-font-smoothing'?: CSS.Globals | 'auto' | 'grayscale'; -} +}; export interface ThemeAnimation { keyframe: ((kp: KP) => object) | object | string; From 5694c0bb815feeffeb950d6ff38fce2eb263b042 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Thu, 19 Mar 2020 16:45:50 +0100 Subject: [PATCH 08/13] return gap back --- .../src/themes/teams/components/Checkbox/checkboxStyles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/fluentui/react-northstar/src/themes/teams/components/Checkbox/checkboxStyles.ts b/packages/fluentui/react-northstar/src/themes/teams/components/Checkbox/checkboxStyles.ts index 0395c8bbf80fd..4fb948e807f51 100644 --- a/packages/fluentui/react-northstar/src/themes/teams/components/Checkbox/checkboxStyles.ts +++ b/packages/fluentui/react-northstar/src/themes/teams/components/Checkbox/checkboxStyles.ts @@ -19,12 +19,12 @@ const checkboxStyles: ComponentSlotStylesPrepared Date: Mon, 30 Mar 2020 10:24:55 +0200 Subject: [PATCH 09/13] update snapshot after merge --- .../specs/utils/__snapshots__/felaRenderer-test.tsx.snap | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap b/packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap index c392a933bf6cc..1e59d194d4d7a 100644 --- a/packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap +++ b/packages/fluentui/react-northstar/test/specs/utils/__snapshots__/felaRenderer-test.tsx.snap @@ -196,10 +196,7 @@ exports[`felaRenderer prefixes required styles 1`] = ` } -
; +
; " `; From afbdb03a905736b2900e92c75cd21454eaade08c Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 14 Apr 2020 14:40:02 +0200 Subject: [PATCH 10/13] add stylis to approvedPackages.ts --- .../dangerjs/detectNonApprovedDependencies/approvedPackages.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/scripts/dangerjs/detectNonApprovedDependencies/approvedPackages.ts b/scripts/dangerjs/detectNonApprovedDependencies/approvedPackages.ts index 91870db745b21..a6e5fe94c3984 100644 --- a/scripts/dangerjs/detectNonApprovedDependencies/approvedPackages.ts +++ b/scripts/dangerjs/detectNonApprovedDependencies/approvedPackages.ts @@ -87,6 +87,7 @@ export default [ 'rtl-css-js@1.11.0', 'scheduler@0.13.3', 'scheduler@0.13.6', + 'stylis@3.5.4', 'webpack@4.25.1', ]; From 4a6d445c058dd61f2d7fc0b65ceff9a76da21bb2 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 14 Apr 2020 14:42:18 +0200 Subject: [PATCH 11/13] update changelog --- packages/fluentui/CHANGELOG.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index 0fa008d2398e1..a52b209e88907 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -31,6 +31,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm Removed types: `TeamsSvgIconSpec`, `ThemeIconSpec`, `SvgIconSpec`, `SvgIconSpecWithStyles` @mnajdova ([#12549](https://github.com/microsoft/fluentui/pull/12549)) - Restricted prop sets in the `Attachment` component which are passed to styles functions @layershifter ([#12576](https://github.com/microsoft/fluentui/pull/12576)) - Replace `ListItemProps` with `DropdownItemProps` for `Dropdown` slots `noResultsMessage` and `loadingMessage` @silviuavram ([#12493](https://github.com/microsoft/fluentui/pull/12493)) +- CSS Grid, `linear-gradient()`, `background-clip`, `cross-fade()` are not prefixed @layershifter ([#12289](https://github.com/microsoft/fluentui/pull/12289)) ### Fixes - Fix default focused input outline in Safari @sheff146 ([#12279](https://github.com/microsoft/fluentui/pull/12279)) @@ -68,6 +69,9 @@ Removed types: `TeamsSvgIconSpec`, `ThemeIconSpec`, `SvgIconSpec`, `SvgIconSpecW - Add `size` and `fluid` props to `Card` component @pompomon ([#12589](https://github.com/microsoft/fluentui/pull/12589)) - Add shadow styles to `Card` component @pompomon ([#12624](https://github.com/microsoft/fluentui/pull/12624)) +### Performance +- Replace `fela-plugin-prexifer` with `stylis` @layershifter ([#12289](https://github.com/OfficeDev/office-ui-fabric-react/pull/12289)) + ### Documentation - Add per-component bundle size charts @miroslavstastny ([#12374](https://github.com/microsoft/fluentui/pull/12374)) - Fix crash on `Loader` documentation page @layershifter ([#12417](https://github.com/microsoft/fluentui/pull/12417)) @@ -107,9 +111,6 @@ Removed types: `TeamsSvgIconSpec`, `ThemeIconSpec`, `SvgIconSpec`, `SvgIconSpecW - Expose `contentWrapper` shorthand from `AccordionTitle` @silviuavram ([#12265](https://github.com/OfficeDev/office-ui-fabric-react/pull/12265)) - Add `disabled` versions for `Dropdown` and `Input` @silviuavram ([#12250](https://github.com/OfficeDev/office-ui-fabric-react/pull/12250)) -### Performance -- Replace `fela-plugin-prexifer` with `stylis` @layershifter ([#12289](https://github.com/OfficeDev/office-ui-fabric-react/pull/12289)) - ### Documentation - Adding context menu for table row to example and prototype @kolaps33 ([#12253](https://github.com/OfficeDev/office-ui-fabric-react/pull/12253)) From 0355c58f35aac879a315d2a8644fdcb8c1ae5841 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 14 Apr 2020 14:44:08 +0200 Subject: [PATCH 12/13] fix changelog --- packages/fluentui/CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md index a52b209e88907..de260558125b6 100644 --- a/packages/fluentui/CHANGELOG.md +++ b/packages/fluentui/CHANGELOG.md @@ -70,7 +70,7 @@ Removed types: `TeamsSvgIconSpec`, `ThemeIconSpec`, `SvgIconSpec`, `SvgIconSpecW - Add shadow styles to `Card` component @pompomon ([#12624](https://github.com/microsoft/fluentui/pull/12624)) ### Performance -- Replace `fela-plugin-prexifer` with `stylis` @layershifter ([#12289](https://github.com/OfficeDev/office-ui-fabric-react/pull/12289)) +- Replace `fela-plugin-prexifer` with `stylis` @layershifter ([#12289](https://github.com/microsoft/fluentui/pull/12289)) ### Documentation - Add per-component bundle size charts @miroslavstastny ([#12374](https://github.com/microsoft/fluentui/pull/12374)) From 49d5e347b61ca86e54236c8cd209c8c358ee3750 Mon Sep 17 00:00:00 2001 From: Oleksandr Fediashov Date: Tue, 14 Apr 2020 15:35:50 +0200 Subject: [PATCH 13/13] fix type --- packages/fluentui/react-northstar/src/utils/types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/fluentui/react-northstar/src/utils/types.ts b/packages/fluentui/react-northstar/src/utils/types.ts index 452b94daeb514..ed3998e3cbe4d 100644 --- a/packages/fluentui/react-northstar/src/utils/types.ts +++ b/packages/fluentui/react-northstar/src/utils/types.ts @@ -9,7 +9,7 @@ export type RendererChange = { type: 'RULE' | 'KEYFRAME' | 'FONT' | 'STATIC' | 'CLEAR'; className: string; selector: string; - declaration: Object; + declaration: string; pseudo: string; media: string; support: string;