Multiple components: Could not parse CSS stylesheet #4512

karlfock · 2023-09-27T17:54:43Z

Describe the bug

I just upgraded to latest primevue 3.35.0. Before that I had 3.34.1.

When running unit tests with vitest 0.34.5 there are error output from tests that test files that import primevue components. The tests still pass, so there is just a logging that occurs.

In this particular example, it's a component containing a Tag component that is under test.

This is how the logging looks in it's entirety:

> vitest run


 RUN  v0.34.5 /Users/username/dev/app-name

stderr | src/components/__tests__/Test.spec.ts > Component > it does should...
Error: Could not parse CSS stylesheet
    at exports.createStylesheet (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:37:21)
    at HTMLStyleElementImpl._updateAStyleBlock (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
    at HTMLStyleElementImpl._childTextContentChangeSteps (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:36:12)
    at HTMLStyleElementImpl._insert (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:824:14)
    at HTMLStyleElementImpl._replaceAll (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:1049:12)
    at HTMLStyleElementImpl.set textContent [as textContent] (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:574:14)
    at HTMLStyleElement.set textContent [as textContent] (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/generated/Node.js:678:44)
    at vue.watch.immediate (/Users/username/dev/app-name/node_modules/primevue/usestyle/usestyle.cjs.js:61:34)
    at callWithErrorHandling (/Users/username/dev/app-name/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:18)
    at callWithAsyncErrorHandling (/Users/username/dev/app-name/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:164:17)
@layer primevue {
.p-component, .p-component * {
    box-sizing: border-box;
}

.p-hidden-space {
    visibility: hidden;
}

.p-reset {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    text-decoration: none;
    font-size: 100%;
    list-style: none;
}

.p-disabled, .p-disabled * {
    cursor: default !important;
    pointer-events: none;
    user-select: none;
}

.p-component-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.p-unselectable-text {
    user-select: none;
}

.p-sr-only {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

.p-link {
        text-align: left;
        background-color: transparent;
        margin: 0;
        padding: 0;
        border: none;
    cursor: pointer;
    user-select: none;
}

.p-link:disabled {
        cursor: default;
}

/* Non vue overlay animations */
.p-connected-overlay {
    opacity: 0;
    transform: scaleY(0.8);
    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
}

.p-connected-overlay-visible {
    opacity: 1;
    transform: scaleY(1);
}

.p-connected-overlay-hidden {
    opacity: 0;
    transform: scaleY(1);
    transition: opacity .1s linear;
}

/* Vue based overlay animations */
.p-connected-overlay-enter-from {
    opacity: 0;
    transform: scaleY(0.8);
}

.p-connected-overlay-leave-to {
    opacity: 0;
}

.p-connected-overlay-enter-active {
    transition: transform .12s cubic-bezier(0, 0, 0.2, 1), opacity .12s cubic-bezier(0, 0, 0.2, 1);
}

.p-connected-overlay-leave-active {
    transition: opacity .1s linear;
}

/* Toggleable Content */
.p-toggleable-content-enter-from,
.p-toggleable-content-leave-to {
    max-height: 0;
}

.p-toggleable-content-enter-to,
.p-toggleable-content-leave-from {
    max-height: 1000px;
}

.p-toggleable-content-leave-active {
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0, 1, 0, 1);
}

.p-toggleable-content-enter-active {
    overflow: hidden;
    transition: max-height 1s ease-in-out;
}

.p-button {
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    align-items: center;
    vertical-align: bottom;
    text-align: center;
    overflow: hidden;
    position: relative;
}

.p-button-label {
    flex: 1 1 auto;
}

.p-button-icon-right {
    order: 1;
}

.p-button:disabled {
    cursor: default;
}

.p-button-icon-only {
    justify-content: center;
}

.p-button-icon-only .p-button-label {
    visibility: hidden;
    width: 0;
    flex: 0 0 auto;
}

.p-button-vertical {
    flex-direction: column;
}

.p-button-icon-bottom {
    order: 2;
}

.p-buttonset .p-button {
    margin: 0;
}

.p-buttonset .p-button:not(:last-child), .p-buttonset .p-button:not(:last-child):hover {
    border-right: 0 none;
}

.p-buttonset .p-button:not(:first-of-type):not(:last-of-type) {
    border-radius: 0;
}

.p-buttonset .p-button:first-of-type:not(:only-of-type) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.p-buttonset .p-button:last-of-type:not(:only-of-type) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.p-buttonset .p-button:focus {
    position: relative;
    z-index: 1;
}


.p-checkbox {
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    vertical-align: bottom;
    position: relative;
}

.p-checkbox.p-checkbox-disabled {
    cursor: default;
}

.p-checkbox-box {
    display: flex;
    justify-content: center;
    align-items: center;
}


.p-fluid .p-inputtext {
    width: 100%;
}

/* InputGroup */
.p-inputgroup {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.p-inputgroup-addon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.p-inputgroup .p-float-label {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.p-inputgroup .p-inputtext,
.p-fluid .p-inputgroup .p-inputtext,
.p-inputgroup .p-inputwrapper,
.p-fluid .p-inputgroup .p-input {
    flex: 1 1 auto;
    width: 1%;
}

/* Floating Label */
.p-float-label {
    display: block;
    position: relative;
}

.p-float-label label {
    position: absolute;
    pointer-events: none;
    top: 50%;
    margin-top: -.5rem;
    transition-property: all;
    transition-timing-function: ease;
    line-height: 1;
}

.p-float-label textarea ~ label {
    top: 1rem;
}

.p-float-label input:focus ~ label,
.p-float-label input.p-filled ~ label,
.p-float-label textarea:focus ~ label,
.p-float-label textarea.p-filled ~ label,
.p-float-label .p-inputwrapper-focus ~ label,
.p-float-label .p-inputwrapper-filled ~ label {
    top: -.75rem;
    font-size: 12px;
}

.p-float-label .input:-webkit-autofill ~ label {
    top: -20px;
    font-size: 12px;
}

.p-float-label .p-placeholder,
.p-float-label input::placeholder,
.p-float-label .p-inputtext::placeholder {
    opacity: 0;
    transition-property: all;
    transition-timing-function: ease;
}

.p-float-label .p-focus .p-placeholder,
.p-float-label input:focus::placeholder,
.p-float-label .p-inputtext:focus::placeholder {
    opacity: 1;
    transition-property: all;
    transition-timing-function: ease;
}

.p-input-icon-left,
.p-input-icon-right {
    position: relative;
    display: inline-block;
}

.p-input-icon-left > i,
.p-input-icon-left > svg,
.p-input-icon-right > i,
.p-input-icon-right > svg {
    position: absolute;
    top: 50%;
    margin-top: -.5rem;
}

.p-fluid .p-input-icon-left,
.p-fluid .p-input-icon-right {
    display: block;
    width: 100%;
}


.p-radiobutton {
    position: relative;
    display: inline-flex;
    cursor: pointer;
    user-select: none;
    vertical-align: bottom;
}

.p-radiobutton.p-radiobutton-disabled {
    cursor: default;
}

.p-radiobutton-box {
    display: flex;
    justify-content: center;
    align-items: center;
}

.p-radiobutton-icon {
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0) scale(.1);
    border-radius: 50%;
    visibility: hidden;
}

.p-radiobutton-box.p-highlight .p-radiobutton-icon {
    transform: translateZ(0) scale(1.0, 1.0);
    visibility: visible;
}

}

Error: Could not parse CSS stylesheet
    at exports.createStylesheet (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/helpers/stylesheets.js:37:21)
    at HTMLStyleElementImpl._updateAStyleBlock (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:68:5)
    at HTMLStyleElementImpl._childTextContentChangeSteps (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/nodes/HTMLStyleElement-impl.js:36:12)
    at HTMLStyleElementImpl._insert (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:824:14)
    at HTMLStyleElementImpl._replaceAll (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:1049:12)
    at HTMLStyleElementImpl.set textContent [as textContent] (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/nodes/Node-impl.js:574:14)
    at HTMLStyleElement.set textContent [as textContent] (/Users/username/dev/app-name/node_modules/jsdom/lib/jsdom/living/generated/Node.js:678:44)
    at vue.watch.immediate (/Users/username/dev/app-name/node_modules/primevue/usestyle/usestyle.cjs.js:61:34)
    at callWithErrorHandling (/Users/username/dev/app-name/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:156:18)
    at callWithAsyncErrorHandling (/Users/username/dev/app-name/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:164:17)
@layer primevue {
    .p-tag {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .p-tag-icon,
    .p-tag-value,
    .p-tag-icon.pi {
        line-height: 1.5;
    }

    .p-tag.p-tag-rounded {
        border-radius: 10rem;
    }
}

Reproducer

https://codesandbox.io/p/sandbox/wonderful-mayer-977h8s?file=%2Fpackage.json%3A18%2C22

PrimeVue version

3.35.0

Vue version

3.x

Language

TypeScript

Build / Runtime

Vue CLI App

Browser(s)

Running test with vitest

Steps to reproduce the behavior

Go to https://codesandbox.io/p/sandbox/wonderful-mayer-977h8s?file=%2Fpackage.json%3A18%2C22

Run in the terminal:
npm test

If you comment out the primevue Tag in Component.vue and run the test again, there is no "Error: Could not parse CSS stylesheet" etc.

See the output:

Expected behavior

Just the test restul without the "Could not parse CSS stylesheet" etc.

The text was updated successfully, but these errors were encountered:

nikitakoliadin · 2023-09-28T07:20:25Z

The same problem

LanFeusT23 · 2023-10-04T17:28:19Z

Same problem here.

mertsincan · 2023-10-05T20:37:59Z

@LanFeusT23 @nikitakoliadin @karlfock could you please check this link; https://stackoverflow.com/a/69958999

I saw interesting suggestions when I read the comments in the links he/she shared. :)

mertsincan · 2023-10-05T20:58:47Z

And please see jsdom/jsdom#2177. I think this issue is related to jsdom. So, closed. I use;

const originalConsoleError = console.error;
const jsDomCssError = "Error: Could not parse CSS stylesheet";
console.error = (...params) => {
  if (!params.find((p) => p.toString().includes(jsDomCssError))) {
    originalConsoleError(...params);
  }
};

https://codesandbox.io/p/sandbox/interesting-hooks-ggwymp?file=%2Fsrc%2F__test__%2FComponent.spec.ts%3A6%2C1-12%2C3

Best Regards,

karlfock · 2023-10-06T06:30:09Z

@mertsincan Thank you! I used this method: jsdom/jsdom#2177 (comment)

nikitakoliadin · 2023-10-06T08:58:44Z

Thanks, it helped.

karlfock added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Sep 27, 2023

mertsincan added this to the 3.35.1 milestone Oct 5, 2023

mertsincan closed this as completed Oct 5, 2023

mertsincan removed this from the 3.35.1 milestone Oct 5, 2023

FlipWarthog mentioned this issue Oct 12, 2023

Fix #4599 - PR Checker build failing #4600

Merged

FlipWarthog mentioned this issue Oct 25, 2023

Could not parse CSS @layer during jest test after upgrading to 10.0.5 primefaces/primereact#5156

Closed

Adrii77 mentioned this issue Oct 26, 2023

New @layer implementation primefaces/primeng#13737

Closed

J0taFerreira mentioned this issue Jan 24, 2024

feat: #1083 component testing for usernameInput component bcgov/nr-forests-access-management#1152

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Multiple components: Could not parse CSS stylesheet #4512

Multiple components: Could not parse CSS stylesheet #4512

karlfock commented Sep 27, 2023 •

edited

Loading

nikitakoliadin commented Sep 28, 2023

LanFeusT23 commented Oct 4, 2023

mertsincan commented Oct 5, 2023

mertsincan commented Oct 5, 2023 •

edited

Loading

karlfock commented Oct 6, 2023

nikitakoliadin commented Oct 6, 2023

Multiple components: Could not parse CSS stylesheet #4512

Multiple components: Could not parse CSS stylesheet #4512

Comments

karlfock commented Sep 27, 2023 • edited Loading

Describe the bug

Reproducer

PrimeVue version

Vue version

Language

Build / Runtime

Browser(s)

Steps to reproduce the behavior

Expected behavior

nikitakoliadin commented Sep 28, 2023

LanFeusT23 commented Oct 4, 2023

mertsincan commented Oct 5, 2023

mertsincan commented Oct 5, 2023 • edited Loading

karlfock commented Oct 6, 2023

nikitakoliadin commented Oct 6, 2023

karlfock commented Sep 27, 2023 •

edited

Loading

mertsincan commented Oct 5, 2023 •

edited

Loading