Is there a way in Next.js to separate critical CSS and non critical for each page and load non-critical asynchronously ?
I am using styled-components in my pages and components + couple of external css libraries.
Thanks!
You can use module css, but not global. Global styles can only be used in _app.js, but you can import "module" css which is a built in feature. Is this what you mean?
// Foo.js component needing third party
import '#thirdparty/dist/styles.css'
// Foo.js component with module css from you
import styles from "./Foo.module.css";
I apologize if this is not what ur looking for. I'm not entirely sure what you are in need of.
Related
I am developing my own library of react components. I am using rollup to create the build. I also want to ship css along with it which i bundled into a single styles.css file. My concern is how a user would use it. They can simply import the components using import { Component1, Component2 } from 'my-library' but they are not styled by default. This can be solved by importing the css file: import 'my-library/build/styles.css' but i feel like this import is redundant, i want the css file to be included by default in my library index.js file. I am not sure how can i achieve this.
I am using rollup and rollup-plugin-postcss.
So my question is how do i do this? Should i use some rollup plugin? Is my idea right in the first place? Maybe i should leave it to the user to decide how they want it bundled because my approach forces them to use some loader for css files?
If you want to ship external styles (instead of e.g. a CSS-in-JS system such as Emotion), that "redundant import" way is the standard, exactly because you can't know how the user of your library wants the styles applied to their page, or which loader (or bundler!) they'd want to use.
It's also possible there's no document to inject styles into at all, in case your users are server-side-rendering your component to be hydrated on the client side.
I'm working on a table component which one will be usable (included in a library when it will work correctly)in any of my projects.
As there is a lot of css rules related to this component I would like to put the style outside of the component svelte file.
What I did is writing a separate css file which I import in the component svelte file by :
import './table.css';
But in such a case I can see my rules in the built bundle.css file but these are not scoped to my component.
So I'm wondering if there is way of doing it as I would like or not....
yes, when svelte-preprocess is set up, you can use <style src="./table.css"></style> in the .svelte file
https://github.com/sveltejs/svelte-preprocess#external-files
...https://discord.com/channels/457912077277855764/945368391231864832/945369571680997416
Concerning page loading speed, It seems strange to me that React is importing CSS files that are imported in components that are not even being used on the homepage. My react app seems to be importing every css file in my entire project, i'm sure this is affecting my page speed. How can i prevent react from importing css files (which are being imported by components) that are not even being imported/exist on a certain page?
For example my homepage may have Comp1.js, comp2.js and comp3.js and each of these files import their own css files. But i see css files from other pages being loaded in the html head tag...(see screenshot below)
const comp1 = await import('path');
I was having a similar issue, which led me to discover this question. Here's what worked for me:
Instead of importing the CSS files at the head of the component's source, you can import the file using import(<path>); in the render() function in case of class-based components, or before the return() statement in case of stateless functional components.
That way React won't be able to load the files at app's startup because their imports have been abstracted away by not being there in the top level structure of any component.
I'm just beginning to learn React so if anyone has a clearer explanation of how this works, I'll be more than happy to know.
How do I import CSS files into vue components so that the scope of those files limited to components only, I tried importing the files into style tab in a single component file with the scoped property but it still bundles all the CSS and overriding one another? Is there any way I can import CSS files with scoped limited to Single file component? I don't want my CSS to be overwritten by other component CSS files? and one more thing I am using webpack cli 3. Thank you so much for your time. Will appreciate the help.
Finally after so much googling and hits and tires i found one answer. we can do something like this in the Single File Component. this will make you CSS src file scoped to your component only. Thank you for your time!
<style scoped src="#/assets/css/main.css"></style>
I'm trying to break up my monolithic React app into reusable parts that can be shared with other projects.
I want to extract some generic components (e.g. Button, Header, Dropdown, etc.) into my own little UI library. The problem I'm running into is how to manage the CSS. Right now, my app just has a single stylesheet that takes care of everything.
These are the solutions I have seen:
Embed the CSS styles for each component in the JS for the component itself (CSS in JS).
import or require the CSS files in the JS for the component and use webpack to bundle the CSS file for you.
I really don't love either option. I understand the appeal of co-locating the styles with the component, but I feel like: a) it clutters the component definition, and b) it fights with how CSS works (no more taking advantage of cascading styles since everything is so tightly scoped to the individual component).
And, I can't bring myself to import a CSS file. That just feels so wrong. We're not even writing javascript anymore at that point.
I realize that these aren't exactly popular opinions, but is there a 3rd option that I'm missing for getting a good old fashioned CSS file from an NPM module that I can just drop in my HTML and use? Ideally one that doesn't involve copy/pasting it from node_modules. :)
Thanks to the tip from #EmileBergeron I found the PostCSS import plugin. It can find and inline stylesheets in node_modules and in your own code.
So, my workflow will be:
npm install my-ui-library
Import the React components you want to use into your JS files import { Button } from 'my-ui-library'
Import the corresponding stylesheets into your CSS files #import 'my-ui-library/Button.css'
That way I'm importing CSS into CSS and JS into JS which feels a lot more natural to me. It might also make sense to just have one stylesheet for all components instead of breaking it up per-component, but that's a detail I can figure out later.
Then, I just need to add PostCSS into my build system to inline everything which has been pretty simple in testing.