0

Context: I am working on UI widgets for external third party applications. The UI widget project is a part of an existing monorepo. I am re-using the styles(regular scss, not css modules) that already exist.

Issue: Because some of the classes(.h1-.h6, .hide, .show) we have defined are generic, there are some unexpected style rules applied(when the third party application also has defined the same classes) from third party application styles. This leads to unexpected/broken look and feel of the UI widgets on the third party applications.

This can easily be solved by using module.scss instead of regular scss. But this is not so simple because it is a monorepo and these styles are global. Any change here would mean a lot of breaking changes across the monorepo.

What am I trying to achieve: I am looking for a build step that would generate a hash for my classes(mycomponent.scss) which would avoid class collision on the third party applications. This would mean a transformation in the build css and react html output.

What have I tried so far:

  1. css-loader - Tried messing around with modules config. Configured the auto parameter to pick up regular scss files but that does not work due to expected reasons. I was trying to check if I could achieve the same functionality as css modules without actually using css modules.
  2. postcss-loader[postcss-modules] - used generateScopedName config to generate a custom class name. This generated a bundle with transformed class names in the build css file, but react still outputs the original classes. This leads to unstyled UI widgets as the class names in the html and the build css don't match.
umalogic
  • 63
  • 5
  • Since you are overriding default styles you can use an id to elevate your styles in the cascade. Could this work in your case? – Nathaniel Flick Aug 11 '22 at 18:45
  • @NathanielFlick Yes, that should solve the specificity issues and it is already happening. The UI Widget styles have higher specificity when compared to third party app styles. However, the problem arises when UI Widgets and the third party app define the same class, but the the third party app defines different set of css rules(because UI Widgets styles don't override these rules). In this case some styles of third party app are applied to the UI Widgets. – umalogic Aug 12 '22 at 05:24

0 Answers0