Test fails with Error: undefined:1:326905: missing '}'

[shaunbharat]

Information

OS: Windows 11, using Command Prompt on Windows Terminal
Node: v18.17.0
npm: 9.8.1

Steps to Reproduce

1. Clone the repository at v6.1.0: git clone -b v6.1.0 https://github.com/sindresorhus/generate-github-markdown-css
2. Install dependencies: npm i
3. Run tests npm test

Error

When I do the steps above, the following error is thrown.

C:\Users\Shaun\Desktop\temp\a\generate-github-markdown-css>npm test

> generate-github-markdown-css@6.1.0 test
> xo && node test.js

C:\Users\Shaun\Desktop\temp\a\generate-github-markdown-css\node_modules\css\lib\parse\index.js:62
    var err = new Error(options.source + ':' + lineno + ':' + column + ': ' + msg);
              ^

Error: undefined:1:326905: missing '}'
    at error (C:\Users\Shaun\Desktop\temp\a\generate-github-markdown-css\node_modules\css\lib\parse\index.js:62:15)
    at declarations (C:\Users\Shaun\Desktop\temp\a\generate-github-markdown-css\node_modules\css\lib\parse\index.js:260:26)
    at rule (C:\Users\Shaun\Desktop\temp\a\generate-github-markdown-css\node_modules\css\lib\parse\index.js:561:21)
    at rules (C:\Users\Shaun\Desktop\temp\a\generate-github-markdown-css\node_modules\css\lib\parse\index.js:118:70)
    at stylesheet (C:\Users\Shaun\Desktop\temp\a\generate-github-markdown-css\node_modules\css\lib\parse\index.js:81:21)
    at module.exports [as parse] (C:\Users\Shaun\Desktop\temp\a\generate-github-markdown-css\node_modules\css\lib\parse\index.js:565:20)
    at getCSS (file:///C:/Users/Shaun/Desktop/temp/a/generate-github-markdown-css/index.js:359:19)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async file:///C:/Users/Shaun/Desktop/temp/a/generate-github-markdown-css/test.js:7:35 {
  reason: "missing '}'",
  filename: undefined,
  line: 1,
  column: 326905,
  source: '.blankslate{--blankslate-outer-padding-block:var(--base-size-20,1.25rem);--blankslate-outer-padding-inline:var(--base-size-20,1.25rem)}.blankslate-spacious{--blankslate-outer-padding-block:var(--base-size-44,2.75rem);--blankslate-outer-padding-inline:var(--base-size-28,1.75rem)}.blankslate-icon{margin-bottom:var(--stack-gap-condensed, 0.5rem)}.blankslate-heading{font-size:var(--text-title-size-small, 1rem)}.blankslate p{font-size:var(--text-body-size-medium, 0.875rem)}.blankslate-action{margin-top:var(--stack-gap-condensed, 0.5rem)}.blankslate-action:first-of-type{margin-top:var(--stack-gap-normal, 1rem)}.blankslate-action:last-of-type{margin-bottom:calc(var(--stack-gap-condensed, 0.5rem)/2)}}anchored-position[popover]{border-width:0;min-width:192px;overflow:visible;padding:0;position:absolute}anchored-position:not(.Overlay){background:none}.Overlay[popover]:not(:popover-open){display:none}anchored-position.not-anchored::backdrop{background-color:var(--overlay-backdrop-bgColor, var(--color-neutral-muted))}.breadcrumb-item{display:inline-block;list-style:none;margin-left:-0.35em;white-space:nowrap}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis, var(--color-fg-subtle));content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg)}.breadcrumb-item:first-child{margin-left:0}.breadcrumb-item-selected:after,.breadcrumb-item[aria-current]:not([aria-current=false]):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default, var(--color-fg-default))}:root{--duration-fast:80ms;--easing-easeInOut:cubic-bezier(0.65,0,0.35,1)}.Button{align-items:center;background-color:initial;border:var(--borderWidth-thin, max(1px, 0.0625rem)) solid;border-color:#0000;border-radius:var(--borderRadius-medium, 0.375rem);color:var(--button-default-fgColor-rest, var(--color-btn-text));cursor:pointer;display:inline-flex;flex-direction:row;font-size:var(--text-body-size-medium, 0.875rem);font-weight:var(--base-text-weight-medium, 500);gap:var(--base-size-4, 0.25rem);height:var(--control-medium-size, 2rem);justify-content:space-between;min-width:max-content;padding:0 var(--control-medium-paddingInline-normal, 0.75rem);position:relative;text-align:center;transition:var(--duration-fast) var(--easing-easeInOut);transition-property:color,fill,background-color,border-color;-webkit-user-select:none;user-select:none}@media(pointer: coarse){.Button:before{content:"";height:100%;left:50%;min-height:48px;min-width:48px;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}}.Button:hover{transition-duration:var(--duration-fast)}.Button:active{transition:none}.Button:disabled,.Button[aria-disabled=true]{box-shadow:none;cursor:not-allowed}a.Button:hover,summary.Button:hover{-webkit-text-decoration:none;text-decoration:none}.Button-content{align-items:center;display:grid;flex:1 0 auto;grid-template-areas:"leadingVisual text trailingVisual";grid-template-columns:min-content minmax(0, auto) min-content;place-content:center}.Button-content>:not(:last-child){margin-right:var(--control-medium-gap, 0.5rem)}.Button-content--alignStart{justify-content:start}.Button-visual{display:flex;pointer-events:none}.Button-visual .Counter{background-color:var(--buttonCounter-default-bgColor-rest, var(--color-btn-counter-bg));color:inherit}.Button-label{grid-area:text;line-height:var(--text-body-lineHeight-medium, 1.4285);white-space:nowrap}.Button-leadingVisual{grid-area:leadingVisual}.Button-leadingVisual svg{fill:currentcolor}.Button-trailingVisual{grid-area:trailingVisual}.Button-trailingAction{margin-right:calc(var(--base-size-4, 0.25rem)*-1)}.Button--small{font-size:var(--text-body-size-small, 0.75rem);gap:var(--control-small-gap, 0.25rem);height:var(--control-small-size, 1.75rem);padding:0 var(--control-small-paddingInline-condensed, 0.5rem)}.Button--small .Button-label{line-height:var(--text-body-lineHeight-small, 1.6666)}.Button--small .Button-content>:not(:last-child){margin-right:var(--control-small-gap, 0.25rem)}.Button--large{gap:var(--control-large-gap, 0.5rem);height:var(--control-large-size, 2.5rem);padding:0 var(--control-large-paddingInline-spacious, 1rem)}.Button--large .Button-label{line-height:var(--text-body-lineHeight-large, 1.5)}.Button--large .Button-content>:not(:last-child){margin-right:var(--control-large-gap, 0.5rem)}.Button--fullWidth{width:100%}.Button--primary{fill:var(--button-primary-iconColor-rest, var(--color-btn-primary-icon));background-color:var(--button-primary-bgColor-rest, var(--color-btn-primary-bg));border-color:var(--button-primary-borderColor-rest, var(--color-btn-primary-border));box-shadow:var(--shadow-resting-small, var(--color-btn-primary-shadow));color:var(--button-primary-fgColor-rest, var(--color-btn-primary-text))}.Button--primary:hover:not(:disabled,.Button--inactive){background-color:var(--button-primary-bgColor-hover, var(--color-btn-primary-hover-bg));border-color:var(--button-primary-borderColor-hover, var(--color-btn-primary-hover-border))}.Button--primary:focus{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px}.Button--primary:focus:not(:focus-visible){box-shadow:none;outline:1px solid #0000}.Button--primary:focus-visible{box-shadow:inset 0 0 0 3px var(--fgColor-onEmphasis, var(--color-fg-on-emphasis));outline:2px solid var(--focus-outlineColor, var(--color-accent-fg));outline-offset:-2px}.Button--primary:active:not(:disabled),.Button--primary[aria-pressed=true]{background-color:var(--button-primary-bgColor-active, var(--color-btn-primary-selected-bg));box-shadow:var(--button-primary-shadow-selected, var(--color-btn-primary-selected-shadow))}.Button--primary:disabled,.Button--primary[aria-disabled=true]{fill:var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text));background-color:var(--button-primary-bgColor-disabled, var(--color-btn-primary-disabled-bg));border-color:var(--button-primary-borderColor-disabled, var(--color-btn-primary-disabled-border));color:var(--button-primary-fgColor-disabled, var(--color-btn-primary-disabled-text))}.Button--primary .Counter{background-color:var(--buttonCounter-primary-bgColor-rest, var(--color-btn-primary-counter-bg));color:inherit}.Button--secondary{fill:var(--fgColor-muted, var(--color-fg-muted));background-color:var(--button-default-bgColor-rest, var(--color-btn-bg));border-color:var(--button-default-borderColor-rest, var(--color-btn-border));box-shadow:var(--button-default-shadow-resting, var(--color-btn-shadow)),var(--button-default-shadow-inset, var(--color-btn-inset-shadow));color:var(--button-default-fgColor-rest, var(--color-btn-text))}.Button--secondary:hover:not(:disabled,.Button--inactive){background-color:var(--button-default-bgColor-hover, var(--color-btn-hover-bg));border-color:var(--button-default-borderColor-hover, var(--color-btn-hover-border))}.Button--secondary:active:not(:disabled){background-color:var(--button-default-bgColor-active, var(--color-btn-active-bg));border-color:var(--button-default-borderColor-active, var(--color-btn-active-border))}.Button--secondary[aria-pressed=true]{background-color:var(--button-default-bgColor-selected, var(--color-btn-selected-bg));box-shadow:var(--shadow-inset, var(--color-primer-shadow-inset))}.Button--secondary:disabled,.Button--secondary[aria-disabled=true]{fill:var(--control-fgColor-disabled, var(--color-primer-fg-disabled));background-color:var(--button-default-bgColor-disabled, var(--color-btn-bg));border-color:var(--button-default-borderColor-disabled, var(--color-btn-border));color:var(--control-fgColor-disabled, var(--color-primer-fg-disabled))}.Button--invisible{color:var(--button-default-fgColor-rest, var(--color-btn-text))}.Button--invisible.Button--iconOnly{color:var(--button-invisible-iconColor-rest, var(--color-fg-muted))}.Button--invisible:hover:not(:disabled,.Button--inactive){background-color:var(--button-invisible-bgColor-hover, var(--color-action-list-item-default-hover-bg))}.Button--invisible:hover:not(:disabled,.Button--inactive) .Button-visual{color:var(--button-invisible-iconColor-hover, var(--color-fg-default))}.Button--invisible:active:not(:disabled),.Button--invisible[aria-pressed=true]{background-color:var(--button-invisible-bgColor-active, var(--color-action-list-item-default-active-bg))}.Button--invisible:disabled,.Button--invisible[aria-disabled=true]{fill:var(--button-invisible-fgColor-disabled, var(--color-primer-fg-disabled));background-color:var(--button-invisible-bgColor-disabled, var(--color-action-list-item-default-selected-bg));border-color:var(--button-invisible-borderColor-disabled, var(--color-action-list-item-default-selected-bg));color:var(--button-invisible-fgColor-disabled, var(--color-primer-fg-disabled))}.Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-invisible-fgColor-rest, var(--color-btn-outline-text))}.Button--invisible .Button-visual{color:var(--button-invisible-iconColor-rest, var(--color-fg-muted))}.Button--invisible .Button-visual .Counter{color:var(--fgColor-default, var(--color-fg-default))}.Button--link{fill:var(--fgColor-link, var(--color-accent-fg));border:none;color:var(--fgColor-link, var(--color-accent-fg));display:inline-block;font-size:inherit;height:unset;padding:0}.Button--link:hover:not(:disabled,.Button--inactive){-webkit-text-decoration:underline;text-decoration:underline}.Button--link:focus,.Button--link:focus-visible{outline-offset:2px}.Button--link:disabled,.Button--link[aria-disabled=true]{fill:var(--control-fgColor-disabled, var(--color-primer-fg-disabled));background-color:initial;border-color:#0000;color:var(--control-fgColor-disabled, var(--color-primer-fg-disabled))}.Button--danger{fill:var(--button-danger-iconColor-rest, var(--color-btn-danger-icon));background-color:var(--button-danger-bgColor-rest, var(--color-btn-bg));border-color:var(--button-danger-borderColor-rest, var(-'... 22935 more characters
}

Node.js v18.17.0

Code

Above is just when I run the test for generate-github-markdown-css.

import getCSS from 'generate-github-markdown-css';
getCSS({ light: 'light', dark: 'dark' });

If I use the package in my own code by running the code above with npx ts-node-esm cli.ts, the same error is thrown.

[hyrious]

It seems GitHub is using a new CSS feature (@container) where the css module cannot parse it. The css module is not updated for 3 years and obviously it lacks some newly adapted CSS features like nesting, layers and so on. So we need to either --

• Wait for css to support these features → Adds @container support reworkcss/css#170
• Or use another CSS parser

[shaunbharat]

Thanks for the fast response! Maybe I'll look into contributing a fix.