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

Slack thread discussion

To limit the scope of this ticket:

  1. Migrate styles as-is out of the svelte components to a single .css file included in project_browser.libraries.yml
  2. Remove the rollup config for the custom hashing rules

As follow-up tasks before core inclusion:

  1. Refactor CSS to BEM per updated CSS coding standards
  2. 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:

  1. Refactor styles to postCSS similar to Olivero and Claro, for better maintainability
  2. Move claro-styling CSS to claro theme with a libraries_extend declaration
Command icon 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

andy-blum created an issue. See original summary.

andy-blum’s picture

Assigning this to myself to work on at DrupalCon Lille.

chrisfromredfin’s picture

Issue tags: +core-mvp, +beta blocker
chrisfromredfin’s picture

This came out of figuring out how to make it easy to audit markup and classname usage. Relating that issue.

andy-blum’s picture

Issue summary: View changes

  • chrisfromredfin committed da133a05 on 1.0.x
    Issue #3394904 by chrisfromredfin, andy-blum: Move styles out of svelte...
chrisfromredfin’s picture

Status: Active » Fixed

Ride 'em cowboy!

chrisfromredfin’s picture

Issue summary: View changes

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.