feat: introduce scoped css for default styles

[kaiszybiak]

Description

We integrate the asyncapi component as a plugin into the backstage ecosystem. During the integration of the pre release version containing the switch to tailwind we noticed, that by including the default styles import "@asyncapi/react-component/styles/default.css"; those styles where globally applied and had an effect on other components, as they are not scoped (see related PR).

This PR is inspired by #381. Our initial idea was to resolve the merge conflicts and go with the CSS prefix solution. (see branch). However the tailwind prefix does not affect:

/* default.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Our second approach was to use tailwind selector-strategy:

// tailwind.config.js
module.exports = {
  important: '#app',
}

This made the refactoring easier, as we only had to add one id to the container and were not forced to change all of the tailwind utility classes manually but it still had the same problem as the prefix solution, that there where still styles applied globally e.g.

/* snippet from @asyncapi/react-component/styles/default.css */

button:focus {
  outline: 1px dotted;
  outline: 5px auto -webkit-focus-ring-color;
}

Solution

We scope all CSS by using the postcss plugin postcss-scopify. The default styles will only affect the asyncapi component. There is a slightly difference between the following screenshots, as the default.css doesn't affect the CodeMirror component anymore.

Essentially all styles stay the same only styles applied to html and body do not have an effect anymore as they are scoped but the scoping class .aui-root is applied some levels deeper to the AsyncApiLayout.

/**
Use a more readable tab size (opinionated).
*/

.aui-root html {
  -moz-tab-size: 4;
  -o-tab-size: 4;
     tab-size: 4;
}

/**
1. Correct the line height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
*/

.aui-root html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

Before:

After:

Changes proposed in this pull request:

• Introduce postcss plugin postcss-scopify
• Add aui-root as a scoped class to the AsyncApiLayout component
• Add leading-normal to match the line-height applied before to the html tag by @tailwind base

Related issue
Resolves #369
See also #381

[github-actions]

Welcome to AsyncAPI. Thanks a lot for creating your first pull request. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request.

Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue.

[sonarqubecloud]

Kudos, SonarCloud Quality Gate passed!   

0 Bugs
0 Vulnerabilities
0 Security Hotspots
0 Code Smells

No Coverage information
0.0% Duplication

[magicmatatjahu]

@kaiszybiak Thanks for great description and solution! Yeah, I went with adding to all classes the prefix but your is better, I like it! That I hadn't thought of something similar either 😅 Thanks again, everything looks great :) I also read the discussion in the attached PR in the backstage and don't worry. The next version will not be changed much in terms of styles. The only thing we still want to do is fix the bugs that people have reported and we'll release 1.0.0. We waited so long to release next because we were waiting for a designer to be hired, but it took us so long that the new styles won't be available until 2.0.0.

[magicmatatjahu]

🚀

[asyncapi-bot]

🎉 This PR is included in version 1.0.0-next.25 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀