Scope CSS + minor adjustments #5

[blutorange]

Closes #5

As mentioned in #5, I tried including the component in our app and while not super-terrible, the "unscoped" CSS does change the layout of the app a little bit. So I think it's better for a component to have CSS that has less potential for conflicts.

What I did

• Add scoping to selectors, custom properties, keyframes, layer (prefix jsonjoy, CSS class jsonjoy)
  • tailwind doesn't seem like a good match for developing UI components to me, it's hard to control specifics of the CSS
  • since rsbuild already uses postcss, I instead added a postcss step to adjust the generated CSS and add scoping
• Add type="button" in a few places where it was missing. In our app, all components must be inside <form> and the missing type="button" resulted in the form getting submitted.
• Add export conditions module and default to package.json
  • Some tools still use module instead of import, e.g. esbuild
  • Add default as a fallback for compatibility
• Increment version to 0.1.0 since scoped CSS can (in principle) be a breaking change
• Include hsl(...) in CSS variables
  • This is better for consumers of this component because:
    • People won't expect having to set the variables to the 3 components of HSL
    • Consumers can use any colors space they wish
    • IDEs can provide tools such as color picker
  • Also add note regarding styling to README.md

You can see this in the demo application, only the actual JSON schema editor component is styled. Once you add the CSS class jsonjoy to the container div of the demo app, all styles are applied again.

What you should check

• From what I can see in the demo app, it all looks properly styled to me. But perhaps you can take another look if I missed anything.

[lovasoa]

Thanks! Just to be clear: does this break the official json builder application (the one you call the "demo app") ? If so, then I cannot merge this.

[blutorange]

Thanks! Just to be clear: does this break the official json builder application (the one you call the "demo app") ? If so, then I cannot merge this.

No -- the screenshot I posted was just for illustration how it does not affect the surrounding page. I just added the jsonjoy class to the main <div> of the app, and everything looks fine again.

But please try it out before merging in case I overlooked something ; )