Skip to content

[POC] - Modify react-styles CSS paths to absolute paths #7825

@jschuler

Description

@jschuler

Coming out of patternfly/patternfly#4930
Investigate if we can modify the core CSS files that are copied over into react-styles/css to use absolute paths.
For example, this parcel error is currently thrown:

@parcel/transformer-css: Ambiguous url('../../assets/images/status-icon-sprite.svg#success') in custom property. Relative paths are resolved from the location the var() is used, not where the
 custom property is defined. Use an absolute URL instead

  /home/rp/prj/node_modules/@patternfly/react-styles/css/components/FormControl/form-control.css:122:63
    121 |   --pf-c-form-control--textarea--invalid--BackgroundPositionY: var(--pf-c-form-control--PaddingLeft);
  > 122 |   --pf-c-form-control--m-icon-sprite--success--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#success");
  >     |                                                               ^
    123 |   --pf-c-form-control--m-icon-sprite--m-warning--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#warning");
    124 |   --pf-c-form-control--m-icon-sprite--invalid--BackgroundUrl: url("../../assets/images/status-icon-sprite.svg#invalid");

  💡 Replace with: url(/node_modules/@patternfly/react-styles/css/assets/images/status-icon-sprite.svg#success)

As the parcel hint suggests, we could perhaps fix this by modifying the react-styles scripts, so that instead of url("../../assets/... it could load from url(/node_modules/@patternfly/react-styles/css/assets...

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

Done

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions