fix(tools): correct lightdom css routing, improve trailing slash behavior #2944

zeroedin · 2025-08-20T13:57:23Z

What I did

Corrected lightdom(-shim).css routing in dev server for downstream use cases
Improved trailing slash behavior in dev server

Testing Instructions

Open dev server, add -lightdom.css to a component and link in a demo. Ensure lightdom css is properly linked.

Notes to Reviewers

…vior

changeset-bot · 2025-08-20T13:57:27Z

⚠️ No Changeset found

Latest commit: 21e0a14

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

github-actions · 2025-08-20T13:58:09Z

✅ Commitlint tests passed!

More Info

{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "fix(tools): correct lightdom css routing, improve trailing slash behavior"
}

…ource parts

zeroedin · 2025-08-20T15:15:58Z

tools/pfe-tools/custom-elements-manifest/lib/Manifest.ts

+        decodeURIComponent(demo.source?.href.replace(options.sourceControlURLPrefix, '') ?? '');
+      // split the demoSource into an array of parts
+      const demoSourceParts = demoSource.split('/');
+      // if demoSourceParts contains options.elementsDir, then build the filePath from the rootDir and the demoSource


This might be a naive change. Perhaps we should only check if the first part of the demo source matches the elementsDir? @bennypowers thoughts?

zeroedin · 2025-08-21T13:32:42Z

npm run docs fails on main branch as well right now for the same error.

[11ty] Problem writing Eleventy templates:
[11ty] 1. Having trouble rendering njk template ./docs/quick-start.md (via TemplateContentRenderError)
[11ty] 2. (./docs/quick-start.md)
[11ty] EleventyNunjucksError: Error with Nunjucks paired shortcode generateImportMap (via Template render error)
[11ty] 3. Cannot read properties of undefined (reading 'replace') (via TypeError)

[11ty] Original error stack trace: TypeError: Cannot read properties of undefined (reading 'replace')
[11ty] at Generator.htmlInject (file:///Users/sspriggs/Sites/_patternfly/patternfly-elements/node_modules/@jspm/generator/dist/generator-c35f6b68.js:4946:236)
[11ty] at async Object. (/Users/sspriggs/Sites/_patternfly/patternfly-elements/docs/_plugins/create-import-map.cjs:12:18)
[11ty] Copied 5259 Wrote 0 files in 5.40 seconds (v3.1.2)

github-actions · 2025-08-21T14:09:07Z

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	`2667d1a`
😎 Deploy Preview	https://deploy-preview-2944--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

netlify · 2025-08-21T14:09:57Z

✅ Deploy Preview for patternfly-elements ready!

Name	Link
🔨 Latest commit	`21e0a14`
🔍 Latest deploy log	https://app.netlify.com/projects/patternfly-elements/deploys/68af4f9d4e25ab0008553b30
😎 Deploy Preview	https://deploy-preview-2944--patternfly-elements.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

github-actions · 2025-08-21T14:10:21Z

SSR Test Run for f1357ba: Report

github-actions · 2025-08-27T18:36:36Z

SSR Test Run for 2667d1a: Report

adamjohnson

Dunno if you wanna also try tackling adding a trailing slash to non-index.html demos. Otherwise, LGTM 👏 .

adamjohnson · 2025-09-09T18:20:38Z

tools/pfe-tools/dev-server/plugins/dev-server-router.ts

+/**
+ * Ensures trailing slash for component URLs
+ * FROM: `/elements/footer`
+ *   TO: `/elements/footer/`
+ * @param config normalized PFE dev server config
+ */
+const ensureTrailingSlashMiddleware: PfeMiddleware = () => (ctx, next) => {


This is a minor nitpick, but if:

http://localhost:8000/components/jump-links

will add the trailing /, would it also be worthwhile to add the trailing slash to the other demos as well? eg:

http://localhost:8000/components/jump-links/demo/centered-list ...becomes... http://localhost:8000/components/jump-links/demo/centered-list/

Feel free to resolve if this is out of scope.

the trailing slashes themselves were kinda a nitpick of my own, so why not solve one more case.

adamjohnson · 2025-09-09T18:39:52Z

This probably needs a changeset.

bennypowers · 2025-09-09T18:51:30Z

Sorry for the delay in review. Please consider that an indication of how ill-advised my original approach is, moreso than as a comment on your changes

That being said, I have questions:

has this been tested on Windows?
what is this coming to solve? Im still not clear on what the exact problem is that this addresses

zeroedin · 2025-09-09T20:46:27Z

That being said, I have questions:

has this been tested on Windows?

what is this coming to solve? Im still not clear on what the exact problem is that this addresses

Has not been tested on Windows. I'm not sure why it would be any different, but I will test.
Solves the fact that in the dev server, the -lightdom.css files literally do not load downstream in RHDS given the current state of things.

bennypowers · 2025-09-10T14:21:24Z

tools/pfe-tools/dev-server/plugins/dev-server-router.ts

+ *   TO: `elements/pf-jazz-hands/pf-jazz-hands-lightdom.css` or `elements/pf-jazz-hands/pf-jazz-hands-lightdom-shim.css`
+ * @param config normalized PFE dev server config
+ */
+const lightdomShortPathMiddleware: PfeMiddleware = config => (ctx, next) => {


does this need to be hardcoded at the pfe level? IIRC we don't have lightdom stylesheets here. It would be better to implement this middleware in rhds's wds config

zeroedin · 2025-10-13T20:49:58Z

Closed in favor of downstream fix. RedHat-UX/red-hat-design-system#2663

fix(tools): correct lightdom css routing, improve trailing slash beha…

61e2990

…vior

zeroedin requested a review from bennypowers August 20, 2025 13:57

zeroedin self-assigned this Aug 20, 2025

zeroedin added the bug label Aug 20, 2025

zeroedin changed the title ~~fix(tools): correct lightdom css routing, improve trailing slash beha…~~ fix(tools): correct lightdom css routing, improve trailing slash behavior Aug 20, 2025

github-actions bot added the AT passed Automated testing has passed label Aug 20, 2025

zeroedin mentioned this pull request Aug 20, 2025

fix: ai derived dev server routing corrections RedHat-UX/red-hat-design-system#2582

Closed

zeroedin added 2 commits August 20, 2025 11:06

fix(tools): build filePath using elementsDir if not present in demo s…

b6cfdff

…ource parts

fix(tools): simplify syntax with a ternary

8511e4b

zeroedin commented Aug 20, 2025

View reviewed changes

Merge branch 'main' into fix/tools/lightdom-css-routing

d81d2e1

fix(tools): select first part of demoSourceParts for filePath

21e0a14

adamjohnson mentioned this pull request Aug 28, 2025

fix(footer): reduce CLS before component upgrades or if JavaScript fails to load RedHat-UX/red-hat-design-system#2560

Merged

1 task

adamjohnson approved these changes Sep 9, 2025

View reviewed changes

bennypowers requested changes Sep 10, 2025

View reviewed changes

adamjohnson mentioned this pull request Oct 13, 2025

fix: web-dev-server serving lightdom.css RedHat-UX/red-hat-design-system#2663

Merged

zeroedin closed this Oct 13, 2025

zeroedin deleted the fix/tools/lightdom-css-routing branch October 13, 2025 20:50

fix(tools): correct lightdom css routing, improve trailing slash behavior #2944

fix(tools): correct lightdom css routing, improve trailing slash behavior #2944

Uh oh!

Conversation

zeroedin commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Testing Instructions

Notes to Reviewers

Uh oh!

changeset-bot bot commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Aug 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Commitlint tests passed!

Uh oh!

zeroedin Aug 20, 2025

Choose a reason for hiding this comment

Uh oh!

zeroedin commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for patternfly-elements ready!

Uh oh!

netlify bot commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for patternfly-elements ready!

Uh oh!

github-actions bot commented Aug 21, 2025

Uh oh!

github-actions bot commented Aug 27, 2025

Uh oh!

adamjohnson left a comment

Choose a reason for hiding this comment

Uh oh!

adamjohnson Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

zeroedin Sep 9, 2025

Choose a reason for hiding this comment

Uh oh!

adamjohnson commented Sep 9, 2025

Uh oh!

bennypowers commented Sep 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zeroedin commented Sep 9, 2025

Uh oh!

bennypowers Sep 10, 2025

Choose a reason for hiding this comment

Uh oh!

zeroedin commented Oct 13, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

zeroedin commented Aug 20, 2025 •

edited

Loading

changeset-bot bot commented Aug 20, 2025 •

edited

Loading

github-actions bot commented Aug 20, 2025 •

edited

Loading

zeroedin commented Aug 21, 2025 •

edited

Loading

github-actions bot commented Aug 21, 2025 •

edited

Loading

netlify bot commented Aug 21, 2025 •

edited

Loading

bennypowers commented Sep 9, 2025 •

edited

Loading