Problem/Motivation

UI Kit is meant to be tech agnostic. For performance, it currently bundles all css styles together into one.

SDC expects component styles to live within the component directory.

Steps to reproduce

Proposed resolution

We have some options. For sake of time for Barcelona, we may need to go with option 2.

  1. Hacky: create a .css file that includes the global .css file
  2. Less hacky: add comments in each .scss file to mark beginning and end of file and create a parser that pulls out all the individual .css files based on the comments
  3. Proper: Restructure build rules so the component css is created in the directory and the global file can include all of these

Remaining tasks

  • Choose approach
  • Implement
  • Review and test
  • Commit :)

User interface changes

Components will have their self-contained css files so might show up better (i.e. styled) compared if when they don't. TBD

API changes

Data model changes

Comments

Kristen Pol created an issue. See original summary.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Title: Create SDDS build rules for creating component css files from scss files » Create individual SDDS component css files from scss files

Update title.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Assigned: Unassigned » richardgaunt
Status: Postponed » Active

Assigning to Richard to figure out approach.

Kristen Pol credited alan.cole.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented

Credit to alan.cole for discussion.

alan.cole’s picture

alan.cole commented
Assigned: richardgaunt » alan.cole
kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Status: Active » Needs work

Alan's WIP code is here:

https://git.drupalcode.org/project/demo_design_system/-/commit/7b3fb8af8...

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Assigned: alan.cole » richardgaunt

Will see if Richard can help with this one this week.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented

Note, that we are still not sure this is 100% needed for the demo because XB and our stuff are not far enough along for us to be able to tell.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Status: Needs work » Needs review

MR: https://git.drupalcode.org/project/demo_design_system/-/merge_requests/2...

kristen pol credited RichardGaunt.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Assigned: richardgaunt » kristen pol

I'm testing and doing a tweak.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented
Assigned: kristen pol » Unassigned
Status: Needs review » Fixed

This was merged and is working with this hack at the top of all of the component css files:

@import url("../../../../dist/base.css");

to grab all the colors/etc.

At some point, we can remove that once this is fixed (assuming that fixes the problem):

#3469856: The component preview should have a background: include theme's global asset libraries for component preview

I'll make a followup issue.

kristen pol’s picture

kristen pol
she/her
Primary language English
Location Santa Cruz, CA, USA
commented

Follow-up issue:

#3471095: Remove base.css import in SDDS component css files generated by splitcss

Status: Fixed » Closed (fixed)

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