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.

Sign up for GitHub

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

Jump to bottom

[Bug]: Carbon CSS has syntax errors #17824

Open
2 tasks done
wkeese opened this issue Oct 21, 2024 · 0 comments
Open
2 tasks done

[Bug]: Carbon CSS has syntax errors #17824

wkeese opened this issue Oct 21, 2024 · 0 comments
Labels
status: needs triage 🕵️‍♀️ type: bug 🐛

Comments

@wkeese
Copy link
Contributor

wkeese commented Oct 21, 2024

Package

@carbon/styles

Browser

Chrome

Package version

1.67

React version

18

Description

Carbon's CSS -- node_modules/@carbon/styles/css/styles.css and also node_modules/@carbon/ibm-products/css/index-full-carbon.css -- has syntax errors.

  1. Mathematical calculations outside of calc():
  --temp-1lh: (
    var(--cds-body-compact-01-line-height, 1.28572) * 1em
  );
  --temp-expressive-1lh: (
    var(--cds-body-compact-02-line-height, 1.375) * 1em
  );
  --temp-1lh: (
    var(--cds-body-01-line-height, 1.42857) * 1em
  );
  1. In @carbon/ibm-products' CSS files, references to SCSS variables:
--c4p--page-header--navigation-buffer-top: $spacing-06;
--c4p--page-header--navigation-buffer-top: $spacing-06;

Reproduction/example

N/A

Steps to reproduce

Load node_modules/@carbon/styles/css/styles.css and also node_modules/@carbon/ibm-products/css/index-full-carbon.css in your IDE. For me, I loaded in Webstorm. The problems should also be detectable with stylelint but that prints thousands of errors.

I also wrote some Node code to test loading that CSS, but it doesn't seem to mind or flag the errors. I'll leave the code here anyway for reference:

const fs = require("node:fs");
const jsdom = require("jsdom");
const { JSDOM } = jsdom;

const carbonCss = fs.readFileSync('node_modules/@carbon/ibm-products/css/index-full-carbon.css', 'utf8');

// JSDOM can't [yet] handle CSS with @charset or with has().
// has() is supposed to be working though, see https://stackoverflow.com/questions/71490461/jsdom-and-pseudoclass-has.
const adjustedCarbonCSS = carbonCss.replace(/(@charset.*?\n)|(:has\(.*?\))/g, "");

const { window } = new JSDOM(`
<html>
  <head>
    <style>${adjustedCarbonCSS}</style>
  </head>
  <body class="cds--list-box__menu">
    <p>Hello world</p>
  </body>
</html>
`);

console.log(window.getComputedStyle(window.document.body).display);

Suggested Severity

None

Application/PAL

IKC

Code of Conduct
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
status: needs triage 🕵️‍♀️ type: bug 🐛
Projects
Design System
Status: No status
Milestone
No milestone
Development

No branches or pull requests
1 participant
@wkeese