design-system icon indicating copy to clipboard operation
design-system copied to clipboard

refactor(styles): generate not-defined selectors by using the components/src/components/ subfolder names

Open oliverschuerch opened this issue 6 months ago โ€ข 7 comments

๐Ÿ“„ Description

This PR handles the follwing things:

  1. It removes the not-defined.scss definition from the styles package.
  2. It adds a global style output in the components package which includes the same logic. The :not(:defined) selector has been updated, to ensure, prehydrated ssr components can show up from the very beginning. All csr components will only become visible, as soon as they have been hydrated. It's possible there is still room for optimization. I've used this codepen to test how the selector works.
  3. The global style output is manually added to the components-angular and components-react packages, where I tried to make sure it can be used from the release package. However, there is for sure room for optimization here.
  4. I tryed to set up needed scripts in our package.json files, so we can still seemlessly develop. Since this was not the case before, there meight be some cases, when one has to prebuild a local dependency, before another package can be started. However, I tested the following things:
  • pnpm components (play|start|build)
  • pnpm components-react build
  • pnpm components-angular (start|build)
  • pnpm docs:start
  • pnpm nextjs:start

๐Ÿ“ Checklist

  • โœ… My code follows the style guidelines of this project
  • ๐Ÿ› ๏ธ I have performed a self-review of my own code
  • ๐Ÿ“„ I have made corresponding changes to the documentation
  • โš ๏ธ My changes generate no new warnings or errors
  • ๐Ÿงช I have added tests that prove my fix is effective or that my feature works
  • โœ”๏ธ New and existing unit tests pass locally with my changes

oliverschuerch avatar Apr 01 '25 13:04 oliverschuerch