Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Change all CSS loads that use `require` to `import`

See original GitHub issue

This will be needed for style-loader v2.0.0.

Here is the full list, grouped by directory:

src/components/app/: claimed by @codifyit
- FooterLinks.js: require('./FooterLinks.css');
- Home.js: require('./Home.css');
- MenuButtons/Publish.js: require('./Publish.css');
- ProfileViewer.js:require(‘./ProfileViewer.css’);
src/components/flame-graph/: claimed by @jufajardini
- Canvas.js: require('./Canvas.css');
- FlameGraph.js: require('./FlameGraph.css');
- MaybeFlameGraph.js: require('./MaybeFlameGraph.css');
src/components/js-tracer/: claimed by @mariehposa
- Chart.js: require('./index.css');
- index.js: require('./index.css');
src/components/shared/: claimed by @somaru-chan
- Backtrace.js: require('./Backtrace.css');
- CallNodeContextMenu.js: require('./CallNodeContextMenu.css');
- chart/Canvas.js: require('./Canvas.css');
- chart/Viewport.js: require('./Viewport.css');
src/components/stack-chart/: claimed by @burianovata
- Canvas.js: require('./Canvas.css');
- index.js: require('./index.css');
Others: claimed by @AyumiOsawa
- src/components/marker-chart/index.js: require('./index.css');
- src/components/network-chart/index.js: require('./index.css');
- src/components/tooltip/Tooltip.js: require('./Tooltip.css');

Each require line needs to be changed to an import line. For example:

require('./FooterLinks.css');

will be changed to

import './FooterLinks.css';

Please claim only one group at once. For example only src/components/app/. Thanks!

Issue Analytics

State:
Created 3 years ago
Comments:16 (16 by maintainers)

Top GitHub Comments

3reactions

julienwcommented, Oct 13, 2020

@jufajardini @mariehposa @AyumiOsawa I’ve added you on the groups you asked. Thanks for helping!

Also I’m adding the “assigned” label because all groups are now claimed.

1reaction

jufajardinicommented, Oct 16, 2020

Hey, yes!

Sorry for making you come asking.Finished it yesterday evening, but since it’s my first PR ever, I wanted to make sure I wasn’t making any mistakes. I’ll pull it within one hour, if I don’t get entangled in the process.

Thanks for the patience, and sorry once more.

Le ven. 16 oct. 2020 à 19:00, Julien Wajsberg notifications@github.com a écrit :

Hey @jufajardini https://github.com/jufajardini, wondering if you could look at this already? Thanks 😃

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/firefox-devtools/profiler/issues/2922#issuecomment-710324701, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEBQXWMV3LOUB76RQ46K62TSLCC3VANCNFSM4SMQLGEQ .

– Juliana Fajardini Reichow

Top Results From Across the Web

Using CSS Module Scripts to import stylesheets - web.dev

With the new CSS module scripts feature, you can load CSS style sheets with import statements, just like JavaScript modules.

import - CSS: Cascading Style Sheets - MDN Web Docs

The @import CSS at-rule is used to import style rules from other valid stylesheets. An @import rule must be defined at the top...

Fast webpage loading using the all new "HTML import" draft in ...

My first quesion is: What are the ways to convert old style stylesheets into HTML import? Can I simply change... <link ...

Two ways to load only the CSS you need - LogRocket Blog

Use media queries and PostCSS to load CSS into a webpage based on the particular style sheet you want to use.

css-loader | webpack - JS.ORG

The css-loader interprets @import and url() like import/require() and will resolve them. Getting Started. Warning. To use css-loader, webpack@5 is required. To ...