2

I got a design system in my current app... and they all sit in a styles folder. Now, I also have a components folders that includes a "designSystem" folder that contains all my reusable components that I want to share across various apps.

The problem is.. this is how my app looks. How do I get globals into bit.dev and then have my component that I put up there, use it? OR is that not how it worls?

app -
----- styles <--- everything under here
---------- variables.scss
---------- typography.scss
---------- mixins.scss
---------- colors.scss
---------- main.scss (imports all of the above)**
----- pages
---------- all my main app pages. about us/products/contact
----- components
--------- DesignSystem <--- everything under here, but these need globals in "styles"
------------- Button
------------------ Button.js
------------------ Button.scss
------------------ index.js
--------- someComponent
--------- someOtherComponent

So, i see tutorials that always have this assumption that EVERYTING in components are self isolated and don't care about outside styles.... BUT how do you use bit.dev with this?

So, I want to put up everything in my DesignSystems folder.... each folder is a component. BUT those items need to know about "styles" and those items there... I am stumped.. what to do?

How do I handle this?

Do I have to go the storybook route and create an app first and put all my components there.. THEN send it up to bit.dev?

james emanon
  • 11,185
  • 11
  • 56
  • 97

2 Answers2

4
  1. You can create scoped pure-css components using css-modules, it is widely supported, and de-facto as standard. It works separately from SASS to replace hard coded class names with a unique hash. You can see this as an example of a pure-css component.
import styles from './styles.module.css';

export const pillClass = styles.pill;
  1. You can use css variables to do smart run-time pure-css theming. You can see example of definition here, overrides here, and usage here.
//definition:
.colors: {
  --base-color: blue;
}

//override:
.warningColors {
  --base-color: yellow;
}

// usage:
.label {
  background: var(--base-color);
}
  1. You can import SASS/SCSS files to load variables between files. You can see it here.
    (Only use this for variables!!)
//pastes the entire theme.colors here.
//(ok for sass variables)
@import '~@bit/bit.base-ui.theme.colors';
  1. You can use stylable, which a typed css-modules system. Its advantage are css-variable hashing and imports between css modules.

In any case, I would NOT recommend global css, or style imports between files. It is very difficult to keep track of them this way. Instead, you should add specific classes to a dom node, which you can turn on and off separately:

//...
const baseTheme = [colorsDefinition, shadows, margins, cats, dogs].join(' ');

return <div id="root" className={baseTheme}></div>
Uri Kutner
  • 476
  • 4
  • 13
2

you can share the global SCSS files as separate components and use them in the component you need. Let's assume the button use the variables.scss file, so a dependency will be created between the button and the style component.
You can see examples of project exported with Bit:
https://github.com/teambit/base-ui
https://github.com/teambit/evangelist

See how this input component:
https://bit.dev/bit/evangelist/input/input/~code#input.module.scss
is using the global colors style component:
https://bit.dev/bit/base-ui/theme/colors/~code

I hope it may help you.

Josh
  • 670
  • 7
  • 14
  • 1
    I might be misunderstanding how `@Import` works, but wouldn't importing global files in every component (e.g. 10) cause the global file to be included X (10) times, causing huge bloat to the output CSS? It's fine for variables that aren't output, but for global base styling (e.g. `h1` or `ul`), this would be included multiple times right? – fredrivett Feb 11 '21 at 18:17