Contrib.social

Move styles out of svelte bundle to traditional Drupal library

Open on Drupal.org →
Created on 18 October 2023, about 1 year ago
Updated 20 October 2023, about 1 year ago

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

As follow-up tasks before core inclusion:

  1. Refactor CSS to BEM per updated CSS coding standards 📌 Update markup classnames Active
  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
📌 Task
Status

Fixed

Version

1.0

Component

Code

Created by

🇺🇸United States andy-blum Ohio, USA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024