Skip to content

Latest commit

 

History

History
 
 

federated-css

README.md

Federated Styles Example

  • expose-remotes apps exposes components with a different types of components styling.
  • consumers-nextjs NextJs apps consumes exposed components in different combinations.
  • consumers-react React apps consumes exposed components in different combinations.

Reason

To show examples of how different types of styling could be federated.

Comparison Table

Exposed Styling React NextJs
Css can import (affect global) can import (affect global)
Scss can import (affect global) can import (affect global)
Less can import (affect global) can import (affect global)
Css Module can import (affect encapsulated) can import (affect encapsulated)
react-jss can import (affect encapsulated) can import (affect encapsulated)
styled-components can import (affect encapsulated) can import (affect encapsulated)
tailwind css (as module) can import (affect encapsulated) can import (affect encapsulated)
tailwind styled component can import (affect encapsulated) can import (affect encapsulated)
Css variables in css can import (affect global) can import (affect global)

Running Expose Remotes

Command start:expose-all will run remotes http://localhost:4000-4008/ with exposed components

Running Demo React

Commands will run host react App on http://localhost:3001-3008/

  • start:react:jss-tailwind-component
  • start:react:css-styled-component
  • start:react:less-scss
  • start:react:css-module-and-jss
  • start:react:tailwind-global-and-less
  • start:react:tailwind-module-and-jss
  • start:react:combination-of-5
  • start:react:combination-of-4

Since there are 9! variants of remotes combinations you are able to create and run your own start:react:any-combination --scopes=@federated-css/{REQUIRED_COMBINATION_OF_REMOTES}

ex. pnpm run start:react:any-combination @federated-css/{expose-css,expose-scss,expose-less,expose-tailwind-css-global} it will run all required expose remotes and creates host app with provided depth. Note. you don't need to start required remotes separately for this command.

Available Scopes
expose-css
expose-css-module
expose-jss
expose-less
expose-scss
expose-styled-component
expose-tailwind-css-global
expose-tailwind-css-module

Running Demo NextJs

Commands will run host NextJs App on http://localhost:8081-8084/.

-start:nextjs:combination-of-4 -start:nextjs:jss-tailwind-global -start:nextjs:jss-css-and-tailwind-module -start:nextjs:less-and-styled-component

Since there are 9! variants of remotes combinations you are able to create and run your own start:nextjs:any-combination --scopes=@federated-css/{REQUIRED_COMBINATION_OF_REMOTES}

ex. pnpm run start:nextjs:any-combination @federated-css/{expose-css,expose-scss,expose-less,expose-tailwind-css-global} it will run all required expose remotes and creates host app with provided depth. Note. you don't need to start required remotes separately for this command.

Available Scopes
expose-css
expose-css-module
expose-jss
expose-less
expose-scss
expose-styled-component
expose-tailwind-css-global
expose-tailwind-css-module