Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug - CodeSandbox - examples fail because package.json includes CSS dependency #11455

Open
dlabrecq opened this issue Jan 22, 2025 · 1 comment

Comments

@dlabrecq
Copy link
Member

dlabrecq commented Jan 22, 2025

Describe the problem
The CodeSandbox examples include additional package dependencies via parsing import statements found in PatternFly examples. However, this inadvertently includes CSS imports as well. As a result, multiple CodeSandbox examples fail because a CSS file is not a valid package dependency.

How do you reproduce the problem?

  1. Run latest code locally
  2. Navigate to the chart sparkline or tooltip examples
  3. Open any CodeSandbox example from these pages
  4. View the package.json file
  5. See the CSS file as a dependency, for example:

"react-charts/src/victory/components/Sparkline/examples/./sparkline.css": "latest",

Expected behavior
This regex statement in documentation-framework should omit CSS files from the CodeSandbox dependencies

Screenshots
Sparkline examples
http://localhost:8002/charts/sparkline-chart

Image

Any other information?
Even after removing the extra dependency manually, the CSS file no longer loads as expected. CodeSandbox appears to be importing 'react-charts/src/victory/components/Sparkline/examples/./sparkline.css' instead of './sparkline.css'.

Image

@github-project-automation github-project-automation bot moved this to Needs triage in PatternFly Issues Jan 22, 2025
@dlabrecq dlabrecq changed the title Bug - CodeSandbox - Multiple examples fail because package.json includes CSS files as a dependency Bug - CodeSandbox - examples fail because package.json includes CSS file as a dependency Jan 22, 2025
@dlabrecq dlabrecq changed the title Bug - CodeSandbox - examples fail because package.json includes CSS file as a dependency Bug - CodeSandbox - examples fail because package.json includes CSS dependency Jan 22, 2025
@dlabrecq
Copy link
Member Author

dlabrecq commented Jan 23, 2025

As a workaround, I've temporarily added SVG rules manually. Not ideal because it's duplicated in multiple places.

const sheet = (() => {
  var style = document.createElement("style");
  document.head.appendChild(style);
  return style.sheet;
})();

sheet.insertRule(".ws-react-charts-sparkline-overflow { margin-left: 50px; margin-top: 50px; height: 135px; }", sheet.cssRules.length);
sheet.insertRule(".ws-react-charts-sparkline-overflow svg { overflow: visible; }", sheet.cssRules.length);

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Needs triage
Development

No branches or pull requests

1 participant