how to handle breaking in css in monorepo?

Question

I have monorepo, and two teams checkout the repo and working on the apps insided.

• foo team works on app1
• bar team works on app2.

My project structure looks like this:

  apps
   app1
   app2
  packages
   pkg1
   pkg2
   pkg3
  lerna.json

The relationship between the projects are:

 app1 -> pkg2, pkg3
 app2 -> pkg3

pkg3 is share between two of the apps (app1, app2). and in pkg3 has button.

foo team add css class to the button: background:blue, and did commit and push.

bar team in the next day, pull the last version from the master and they decided that blue is not good for them so they change to red. (background:red). after that they do commit and push.

the foo team takes the last version and they see that the button color has changed. (in the worst case, they don't see it until too late).

my question is how can prevent or handle such a scenario? I don't thing test will have the answer cause it css. so what can be done to fix it?

PS I was thinking to not style in button inside but outside - but for the long term it will not stick and somebody can forget.

Answer 1

If you're going to have a shared module with design elements in it, then the people working on it need to treat it like a shared module.

Nobody should be making dramatic changes to it, especially on an element as generic as "button".

Everyone should be working from a shared design language, and changes to it should be agreed among teams (or handed down from a higher level in the organisation).