Problem/Motivation
Looking forward to PB's inclusion in core, admin themes will need the ability to override the default styles. In svelte, styles included in components are hashed unpredictably and would require either a complex API of CSS custom properties or extra effort from admin themes to rebuild the svelte bundles.
We can bypass all this by moving styles outside of svelte to a traditional Drupal library. When element class names are not referenced by a CSS rule in the same .svelte file, the compiler assumes that class should be globally scoped and does not hash it.
Proposed resolution
To limit the scope of this ticket:
- Migrate styles as-is out of the svelte components to a single .css file included in project_browser.libraries.yml
Remove the rollup config for the custom hashing rules
As follow-up tasks before core inclusion:
- Refactor CSS to BEM per updated CSS coding standards
- Separate styles into PB layout/essentials and the styles that make it match Claro. This will allow PB to provide more of a blank slate to admin themes. This approach should be similar to how views_ui provides a very minimalist experience when the admin theme is set to stark, and then seven/claro/contrib admin themes are able to apply their own look-and-feel on top of that
As follow-up tasks after core inclusion:
- Refactor styles to postCSS similar to Olivero and Claro, for better maintainability
- Move claro-styling CSS to claro theme with a libraries_extend declaration
Issue fork project_browser-3394904
Show commands
Start within a Git clone of the project using the version control instructions.
Or, if you do not have SSH keys set up on git.drupalcode.org:
Comments
Comment #2
andy-blumAssigning this to myself to work on at DrupalCon Lille.
Comment #3
chrisfromredfinComment #4
chrisfromredfinThis came out of figuring out how to make it easy to audit markup and classname usage. Relating that issue.
Comment #5
andy-blumComment #8
chrisfromredfinRide 'em cowboy!
Comment #9
chrisfromredfin