Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Importing CSS from Third Party React Components #16993

Merged
merged 4 commits into from
Sep 10, 2020
Merged

Importing CSS from Third Party React Components #16993

merged 4 commits into from
Sep 10, 2020

Conversation

Timer
Copy link
Member

@Timer Timer commented Sep 10, 2020 •
edited
Loading

This PR implements a simplified version of the RFC: Importing CSS from Third Party React Components #15208.

This pull requests adds the ability to import Global CSS anywhere in your application, so long that it originates from npm (node_modules).

This is a best-effort heuristic that makes a safety trade-off for better interoperability with npm packages that require CSS.
The assumption being made is that npm packages should be good citizens and not override global styles.

Without this ability, the component's CSS would have to be included for the entire app instead of specific page (or component) where it's required.

The only intent of this PR is to allow components to use third-party component CSS like so:

// components/MySlider.tsx
import { Slider } from "@reach/slider";
import "@reach/slider/styles.css";

function Example() {
  return <Slider min={0} max={200} step={10} />;
}

Misusing this behavior to import first-party Global CSS within your application will lead to unexpected results, and we provide no semver guarantees for the behavior.

Fixes #12079
Fixes #16563

@ijjk
Copy link
Member

ijjk commented Sep 10, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
buildDuration 13s 13.1s ⚠️ +114ms
nodeModulesSize 57 MB 57 MB ⚠️ +2.34 kB
Page Load Tests Overall increase ✓
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.355 2.299 -0.06
/ avg req/sec 1061.54 1087.55 +26.01
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.321 1.206 -0.11
/error-in-render avg req/sec 1891.93 2072.85 +180.92
Client Bundles (main, webpack, commons)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..4c1a.js gzip 10.8 kB 10.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-ee619e3..fb8c.js gzip 7 kB 7 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 57.5 kB 57.5 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..dule.js gzip 6.67 kB 6.67 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-f1103fb..dule.js gzip 6.07 kB 6.07 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-d2344ce..8b36.js gzip 1.3 kB 1.3 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-f8c0daf..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Rendered Page Sizes
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
index.html gzip 1 kB 1 kB ✓
link.html gzip 1.01 kB 1.01 kB ✓
withRouter.html gzip 993 B 993 B ✓
Overall change 3 kB 3 kB ✓
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
buildDuration 14.5s 14.6s ⚠️ +125ms
nodeModulesSize 57 MB 57 MB ⚠️ +2.34 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..4c1a.js gzip 10.8 kB 10.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-ee619e3..fb8c.js gzip 7 kB 7 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 57.5 kB 57.5 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..dule.js gzip 6.67 kB 6.67 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-f1103fb..dule.js gzip 6.07 kB 6.07 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-d2344ce..8b36.js gzip 1.3 kB 1.3 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-f8c0daf..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Serverless bundles
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_error.js 1.03 MB 1.03 MB ✓
404.html 4.34 kB 4.34 kB ✓
hooks.html 3.92 kB 3.92 kB ✓
index.js 1.04 MB 1.04 MB ✓
link.js 1.08 MB 1.08 MB ✓
routerDirect.js 1.07 MB 1.07 MB ✓
withRouter.js 1.07 MB 1.07 MB ✓
Overall change 5.31 MB 5.31 MB ✓
Commit: a8930e4

@Timer Timer marked this pull request as ready for review September 10, 2020 16:31
@ijjk
Copy link
Member

ijjk commented Sep 10, 2020

Stats from current PR

Default Server Mode (Increase detected ⚠️)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
buildDuration 13.1s 13.3s ⚠️ +200ms
nodeModulesSize 57 MB 57 MB ⚠️ +2.34 kB
Page Load Tests Overall increase ✓
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.326 2.308 -0.02
/ avg req/sec 1074.72 1083.08 +8.36
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.357 1.319 -0.04
/error-in-render avg req/sec 1842.92 1895.34 +52.42
Client Bundles (main, webpack, commons)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..4c1a.js gzip 10.8 kB 10.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-ee619e3..fb8c.js gzip 7 kB 7 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 57.5 kB 57.5 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..dule.js gzip 6.67 kB 6.67 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-f1103fb..dule.js gzip 6.07 kB 6.07 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-d2344ce..8b36.js gzip 1.3 kB 1.3 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-f8c0daf..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Rendered Page Sizes
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
index.html gzip 1 kB 1 kB ✓
link.html gzip 1.01 kB 1.01 kB ✓
withRouter.html gzip 993 B 993 B ✓
Overall change 3 kB 3 kB ✓
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
buildDuration 14.3s 14.6s ⚠️ +258ms
nodeModulesSize 57 MB 57 MB ⚠️ +2.34 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..4c1a.js gzip 10.8 kB 10.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-ee619e3..fb8c.js gzip 7 kB 7 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 57.5 kB 57.5 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..dule.js gzip 6.67 kB 6.67 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-f1103fb..dule.js gzip 6.07 kB 6.07 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-d2344ce..8b36.js gzip 1.3 kB 1.3 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-f8c0daf..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Serverless bundles
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_error.js 1.03 MB 1.03 MB ✓
404.html 4.34 kB 4.34 kB ✓
hooks.html 3.92 kB 3.92 kB ✓
index.js 1.04 MB 1.04 MB ✓
link.js 1.08 MB 1.08 MB ✓
routerDirect.js 1.07 MB 1.07 MB ✓
withRouter.js 1.07 MB 1.07 MB ✓
Overall change 5.31 MB 5.31 MB ✓
Commit: 5a5e7f2

@ijjk
Copy link
Member

ijjk commented Sep 10, 2020

Stats from current PR

Default Server Mode (Decrease detected ✓)
General Overall increase ⚠️
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
buildDuration 14.3s 14.5s ⚠️ +170ms
nodeModulesSize 57 MB 57 MB ⚠️ +2.34 kB
Page Load Tests Overall decrease ⚠️
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
/ failed reqs 0 0 ✓
/ total time (seconds) 2.694 2.766 ⚠️ +0.07
/ avg req/sec 927.98 903.77 ⚠️ -24.21
/error-in-render failed reqs 0 0 ✓
/error-in-render total time (seconds) 1.742 1.771 ⚠️ +0.03
/error-in-render avg req/sec 1434.9 1411.6 ⚠️ -23.3
Client Bundles (main, webpack, commons)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..4c1a.js gzip 10.8 kB 10.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-ee619e3..fb8c.js gzip 7 kB 7 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 57.5 kB 57.5 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..dule.js gzip 6.67 kB 6.67 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-f1103fb..dule.js gzip 6.07 kB 6.07 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-d2344ce..8b36.js gzip 1.3 kB 1.3 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-f8c0daf..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Rendered Page Sizes
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
index.html gzip 1 kB 1 kB ✓
link.html gzip 1.01 kB 1.01 kB ✓
withRouter.html gzip 993 B 993 B ✓
Overall change 3 kB 3 kB ✓
Serverless Mode
General Overall increase ⚠️
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
buildDuration 16.1s 15.9s -198ms
nodeModulesSize 57 MB 57 MB ⚠️ +2.34 kB
Client Bundles (main, webpack, commons)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..4c1a.js gzip 10.8 kB 10.8 kB ✓
framework.HASH.js gzip 39 kB 39 kB ✓
main-ee619e3..fb8c.js gzip 7 kB 7 kB ✓
webpack-e067..f178.js gzip 751 B 751 B ✓
Overall change 57.5 kB 57.5 kB ✓
Client Bundles (main, webpack, commons) Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
677f882d2ed8..dule.js gzip 6.67 kB 6.67 kB ✓
framework.HA..dule.js gzip 39 kB 39 kB ✓
main-f1103fb..dule.js gzip 6.07 kB 6.07 kB ✓
webpack-07c5..dule.js gzip 751 B 751 B ✓
Overall change 52.5 kB 52.5 kB ✓
Legacy Client Bundles (polyfills)
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
polyfills-4b..e242.js gzip 31 kB 31 kB ✓
Overall change 31 kB 31 kB ✓
Client Pages
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-9a0b9e1..b37e.js gzip 1.28 kB 1.28 kB ✓
_error-ed1b0..8fbd.js gzip 3.44 kB 3.44 kB ✓
hooks-89731c..c609.js gzip 887 B 887 B ✓
index-17468f..5d83.js gzip 227 B 227 B ✓
link-d2344ce..8b36.js gzip 1.3 kB 1.3 kB ✓
routerDirect..924c.js gzip 284 B 284 B ✓
withRouter-7..c13d.js gzip 284 B 284 B ✓
Overall change 7.71 kB 7.71 kB ✓
Client Pages Modern
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_app-75d3a82..dule.js gzip 625 B 625 B ✓
_error-4469a..dule.js gzip 2.29 kB 2.29 kB ✓
hooks-cbf13f..dule.js gzip 387 B 387 B ✓
index-b9a643..dule.js gzip 226 B 226 B ✓
link-f8c0daf..dule.js gzip 1.26 kB 1.26 kB ✓
routerDirect..dule.js gzip 284 B 284 B ✓
withRouter-f..dule.js gzip 282 B 282 B ✓
Overall change 5.36 kB 5.36 kB ✓
Client Build Manifests
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_buildManifest.js gzip 322 B 322 B ✓
_buildManife..dule.js gzip 329 B 329 B ✓
Overall change 651 B 651 B ✓
Serverless bundles
vercel/next.js canary Timer/next.js feat/import-global-from-npm Change
_error.js 1.03 MB 1.03 MB ✓
404.html 4.34 kB 4.34 kB ✓
hooks.html 3.92 kB 3.92 kB ✓
index.js 1.04 MB 1.04 MB ✓
link.js 1.08 MB 1.08 MB ✓
routerDirect.js 1.07 MB 1.07 MB ✓
withRouter.js 1.07 MB 1.07 MB ✓
Overall change 5.31 MB 5.31 MB ✓
Commit: d6ec313

@Timer Timer merged commit 1ea6745 into vercel:canary Sep 10, 2020
@Timer Timer deleted the feat/import-global-from-npm branch September 10, 2020 17:45
@websocket98765
Copy link

Misusing this behavior to import first-party Global CSS within your application will lead to unexpected results, and we provide no semver guarantees for the behavior.

@Timer Are there plans to offer the ability to import first-party global CSS/SCSS? That's personally what I'm waiting for to be able to transition from Create React App.

@Timer
Copy link
Member Author

Timer commented Sep 16, 2020

There are no immediate plans to support that behavior.

@websocket98765
Copy link

@Timer I hope you'll consider allowing CSS imports into components soon, even if only enabled via Next config, not by default. Many people need this: #15577 (comment)

For me, I started rewriting my CRA app to NextJS ~2 months ago and got blocked on S/CSS import into components causing errors, and have been maintaining two apps (CRA & a non-functional Next) since then, unsuccessfully hoping to find a solution so we can finish moving to Next (& then incrementally adopt things like CSS modules).

HitoriSensei pushed a commit to HitoriSensei/next.js that referenced this pull request Sep 26, 2020
@Timer
Importing CSS from Third Party React Components (vercel#16993)
878cd2f
@maxgfr
Copy link

maxgfr commented Oct 28, 2020

I'm sharing the same issue as @websocket98765

@websocket98765
Copy link

@maxgfr Best workaround I've found is to import a global.scss file (name is arbitrary) in _app.js:

import 'styles/global.scss';

and then to include paths in this to each component's CSS wherever it lives in the app. Not a clean solution, but works given that converting to modules was causing broken styles. It unblocked me until the site gets a new design.

@vercel vercel locked as resolved and limited conversation to collaborators Jan 29, 2022
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@chibicode chibicode Awaiting requested review from chibicode

@ijjk ijjk Awaiting requested review from ijjk

@lfades lfades Awaiting requested review from lfades

@timneutkens timneutkens Awaiting requested review from timneutkens

Assignees
No one assigned
Labels
type: next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Flag to let components load global styles Importing correctly scoped css from node_modules outside of _app
4 participants
@Timer @ijjk @websocket98765 @maxgfr