Problem/Motivation

In Twig themes, the standard Drupal way to attach CSS to a template is with {{ attach_library() }}. There are many templates in the umami_jsx theme currently doing this (since these Twig templates were copied from Umami). The library name passed to this function is then defined in umami_jsx.libraries.yml, which points to a CSS file.

The above does not match the workflow of how CSS is added to components in non-Drupal JS apps. It would be good for the Umami JSX theme to demonstrate how CSS can be attached to the component in a way that's more typical for modern front-end development.

Steps to reproduce

Proposed resolution

Find a suitable CSS-in-JS library (perhaps https://panda-css.com/), and convert one or several Twig templates that use {{ attach_library() }} to JSX components that use the CSS-in-JS approach.

Remaining tasks

User interface changes

API changes

Data model changes

Issue fork jsx-3393003

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:

About issue forks

Comments

effulgentsia created an issue. See original summary.

hooroomoo made their first commit to this issue’s fork.

hooroomoo opened merge request !2

hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented
Status: Active » Needs review
hooroomoo’s picture

hooroomoo
they/them
Location nyc🗽
commented

This PR adds the Panda CSS library and replaces 'node--card-common' and 'node--card-common-alt' with the new NodeCardCommon JSX component.

hooroomoo opened merge request !3

effulgentsia’s picture

effulgentsia commented
Status: Needs review » Fixed

Merged MR3. Thanks for the great work on this!

Status: Fixed » Closed (fixed)

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