I have a requirement which I'm not sure if can be achieved with Rollup (or with Webpack?)
I've written a React component library. Each component imports it's stylesheet. Something like
import "./button.scss"
export default function Button() {
...
}
Now, these scss files use sass variables of all sorts that I would like to define in a global file.
I want the consumer of my library to be able to import Button as so:
import { Button } from "mylib" or even better:
import Button from "mylib/button"
and have only the code required by Button be added to my library.
I can't for the life of me figure/google out how to achieve this.
Is there a good reference to a tree-shakable React component library that uses sass and sass variables?
Bonus question:
I have some third party css that only some of the component require.
So, if each of the component's scss files imports:
#import "~some-third-party-css-lib.css"
Will Rollup duplicate that css? Or is there some kind of deduping mechanism?
Thanks!
From what I know now (Feb 2020) the only options to achieve good tree-shaking results for a component library are:
When using css modules
You need to rely on the consumer of your library to handle the (s)css imports (Create React App for example is doing this pretty well)
Make sure to not transpile/bundle the css in your package and that the import paths are correct
Make the consumers import each component separately (import Button from "mylib/button"). This is because css imports are considered side-effects by most bundlers and it's petty hard (maybe even impossible) to tell which classes are actually used. So if you have an index in your library that re-exports all components, this causes ALL css to be imported and probably bundled.
When using a css-in-js system with a runtime
also make sure that you do not pre-bundle/export the css in the library build-step but rather have that leave that to the consuming app.
This has some implications that should be considered.
The consumer of your components must ship a css-in-js runtime alongside their app
If the consumer is trying to do server-side pre-rendering in some sort that might require custom additional steps depending of the css-in-js library you're using
Conclusion
As of now I don't know a solution that supports full tree-shaking (including css) while also not imposing additional complexity to the consuming app. But I'm currently still investigating this topic and will post updates here if I find something interesting.
Look at the library tailwindcss. It automatically purges the unused css variables.
Related
Background
I'm creating a public Node package which consists of some React UI. I'm currently using CSS Modules to scope the styles to the component, and it's all being successfully bundled with Webpack. The bundle outputs a main.css file.
The ask
Since I intend to use this packaged component across many projects with different frameworks, I cannot guarantee that CSS Modules will be available. Thus, I would like to "flatten" the compiled JSX, such that the generated CSS Module classNames are always added at build time, rather than being conditionally added based on whether or not the CSS modules are being imported. From there I should be able to just import the compiled CSS file and call it a day.
What I've found
This tool seems to solve my problem, specifically using CSS Modules. This is not actively maintained though, and I wonder if there's a better solution out there.
https://cef62.github.io/css-modules-compiler/
https://cef62.github.io/css-modules-compiler/quick-start.html
I do wonder if this is doable with some sort of PostCSS routine or a preexisting PostCSS plugin.
I have a component library using storybook & TailwindCSS and a host app that's also using TaildwindCSS itself that imports the component library. When the classes are generated, I'm seeing that they're duplicated:
Both projects import TailwindCSS standardly in their index.css files which is then imported into index.tsx using import "./index.css";:
The host app does generate all the classes from the component library when imported but due to there being duplicate classes, some are being overridden due to the order (pay attention to the source and line numbers in the above image)
The component looks correct on storybook:
Host app:
Looking for advice on how to correctly import the component library within the host app?
UPDATE:
I've figured that the component library generates it's own TailwindCSS classes as expected and that's where the "duplicate" classes (inline) come from and it's being included in a single output in index.js in the dist folder. Still need a way to avoid these duplicates when imported in the host app. May need to look at changing the component library to build a separate .css file with the styles and tell the host app to generate the component library's styles to prevent these duplicates.
After reading more on the TailwindCSS documentation, I've found a resolution. Using the following information from https://tailwindcss.com/docs/content-configuration#working-with-third-party-libraries, I was able to fix my issues.
Essentially what I've now done is, on my component library, I ensured that the.css styles are extracted into it's own file and not built into a single index.js. After that, on the host app, I set the content of tailwind config to reference my component library so that it scans the src and generates those classes itself.
I created a React component library with the help of Rollup.
Inside component library project there is a common css file with default theme, and I would like to be distributed separately.
What would be the best way to rollup the library and have components and css separately? And how to consume it in a main project? I have spend a day looking for the info, but there is a “library hell”, and very different information.
I use React, scss.
I have main scss file with mixins, variables, extends etc. Currently if i want use mixins or variable i need to #import './global.scss'; in each component directly where i want to use it. But most of the time i need these styles in almost all components global.scss.
How i can make global.scss visible for all components without repeating import in each component directly?
Thanks.
there is no such possibility in sass.
The solutions are:
The first and the easiest:
Just include #import in all sass files, it is not bad practice as you will always have control of all vars that are imported in each file in your app.
The second
While building you app via webpack you can find all sass files(that are not started with underscore) in your project and include you import in it.
Most of my site is using Bulma classes for some of my global UI styling, and I'd like to continue to use those classes within my components, but also be able to define CSS Modules for those components for custom per component tweaks.
Because of this, I added babel-plugin-react-css-modules to my project which has allowed me to use my Bulma classes in className and put my module classes in styleName. Ok, a little hacky feeling, but it's working. I've got a global-styles.scss file in a CSS directory that I'm loading into my main app component. This is where I'm importing Bulma, as well as defining any of my own global styles.
My issue is that my when my global styles and my module styles all get smashed together (via css-modules?) and injected into a style tag in the head (via style-loader?), my module styles get defined first, then my global styles.
I feel like the module styles are locally scoped and should always take precedence (load last), even if I'm loading both global and scoped styles in the same component. For example, in one component I'm using Bulma's .navbar classes, but I'm also defining my own .navbar class in my CSS Module for that component, and I'm applying both to the same element in my component.
Is there anyway I can specify what order to build the style tag? Between all of these plugins I'm just lost, then when you throw Gatsby's plugin abstraction on top of it and it's all very confusing.
I'm not entirely certain of what was causing the issue, but it seems to pertain to Gatsby.
https://www.gatsbyjs.org/tutorial/part-two/#component-css
Tip: This part of the tutorial has focused on the quickest and most straightforward way to get started styling a Gatsby site — importing standard CSS files directly, using gatsby-browser.js. In most cases, the best way to add global styles is with a shared layout component.
Their recommended approach is to import your global files in your layout component. This was loading my globals after my modules. However, creating a gatsby-browser.js file, and importing my globals there is loading my styles in the intended order.