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.
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 am learning react in which I am making components and making css file for each component but if I make a className lets say "temporary" then if I make another component and while I am not importing the previous component's css file but then also if i give the class "temporary" to any other element of this component then also it take the css styling. Why is this happening I don't know.
You create multiple CSS files and several components in your React project and connect them if needed.
But this is what you see, not what happens.
React actually converts all your CSS code into a file and then outputs it.
This is also true for components.
You create dozens of CSS and JS files, but React creates two files for you.
In Recycling, we only create a few files to write more readable code.
If you have a problem with this, you can research the module.css in React and use it to prevent this from happening to you.
Again, if you have any questions about this, I am at your service.
I am using react-bootstrap and bootstrap in my nextjs project, thus I have to include the global css:
// _app.js
import 'bootstrap/dist/css/bootstrap.min.css';
The problem is that I load a lot of unused css in every page, thus google lighthouse diminishes my score.
I have tried to purge the unused css, and even thought the score increases, there are still unused styles. I do not need an alert, or a button everywhere. I would like to import only the styles I need in every specific page.
Is there a way to transform global css into css modules so I only import what I need? Maybe some webpack configuration or similar?
I can do it by myself manually splitting the bootstrap code into components. But I would like to know if there is any automatic way of doing it. So I do not have to go through this procedure for all my node_modules that need stylyng.
This is one of Bootstrap's cons — outside of eliminating modules from the core bootstrap.scss file and recompiling a unique version, there isn't a way to do this out of the box. (e.g., remove #import "accordion"; from bootstrap.scss to eliminate accordion styles)
In theory, you could compile each import as a separate .scss file and load the .css only when it's needed but there are some nuance interdependencies and would need consideration to ensure some code doesn't duplicate (e.g., variables, reboot, functions)
Inversely, you most likely are only using a few modules (grid.scss, spacing.scss, buttons.scss) and can eliminate all others.
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.
I'm using CSS Modules (Sass) with rollup on a component library project, which is working well. Each component ends up with a dist folder containing a single JS bundle file, and a corresponding CSS file with the scoped CSS classes so consumers of the component don't have to worry about CSS class name conflicts. All they do is include the JS bundle and the CSS file and everything is great. Yay CSS Modules.
The problem I'm now facing is that some components really need separate "themes" - ideally, separate CSS files, one per theme. So consumers can continue as they've been doing: including the JS bundle, but now choosing which CSS file to include to pick a theme.
I'm not sure how to get this going with CSS modules & rollup, and whether this is even the sort of approach others are taking. From what I can see, rollup always handles bundling things together, whereas I want separate CSS files, all of which get their classes renamed identically during the build phase. That way, if within my JS I refer to styles.myclass, if myclass had gotten renamed to scoped-myclass by CSS modules for the original CSS file, for a second CSS file it would also get the same name.
This would keep consumption of the component extremely simple - just a matter of including a different CSS file.
Any suggestions?
Awfully late, but let me answer this 3 years on. So what I ended up doing was totally detaching the CSS generation step from rollup and relying on the Sass CLI to handle that portion of the build process. It felt a bit klutzy, but I remember it wasn't awfully hard to do and solved the problem I outlined above. I don't believe there was a plain rollup solution at the time, nor do I think there's one today.
However... in my case the whole approach was kinda mistaken. This certainly won't be everyone's scenario, but let me spell it all out because hey it may be useful and it definitely wasn't obvious to me at the time.
This was for an in-house shared component library, where each component and its corresponding CSS was a separate npm package stored in our Artifactory. When it grew, plenty of internal references popped up, e.g. multiple components would reference the Button component, and over time they'd reference different versions of the Buttons component - each of which needed its own properly scoped CSS, unique to that package-version.
So what I found was that by doing it this way - having the CSS generated as part of the npm package dist files - I had to write an additional layer for the consumer applications that would parse their node_modules/ folder for our own internal components and combine all the different CSS files, such as the multiple versions of buttons. e.g. the main application would directly import buttons v1.0.0 in its package.json file, but the Dialog component (also included in the package.json) could include buttons 2.0.0 as its own dependency. For every version of the package, there was a uniquely scoped version of the CSS - so the consuming application HAD to include every version otherwise the styling would be borked.
So all in all, it ended up being way more complex that I wanted. I thought I could make it easier & better with the separate generated themed CSS files as part of the package dist, but it didn't end up that way. If I could revisit that project today, I'd re-examine a solution used by Material UI and others which I kinda poo-poo'd at the time: automatic injection of the CSS into the page by the component JS, rather than generating standalone CSS files which required extra work by the consumer applications to gather up and add to the final webpage. Frankly, now I regard it as the "least crap". There are definite downsides to the injection approach (extra work done on every page render for everyone! Yikes!), but there's no doubt in my mind it hugely simplifies the job of the consumer applications. It's a balancing act, but in 20-20 hindsight I'd lean towards the injection approach. With that, scoping & theming is a different and much simpler problem.
If I got you right, consider looking at SCSS plugin: rollup-plugin-scss. It captures all spare .css files imported in the components, and then processes them through underlying node-sass. The catch is, it seems like you can write a custom callback function that'd handle your CSSs differently based on conditions you throw in.
Based on the example from the plugin's page:
import scss from 'rollup-plugin-scss'
...
export default {
input: 'src/index.tsx',
output: [...],
plugins: [
...
output: function (styles, styleNodes) {
// replace this with conditioned outputs as needed:
writeFileSync('bundle1.css', styles)
writeFileSync('bundle2.css', styles)
},
]
}