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

postcss v8.2.12 fails to build (Nuxt) #2182

Closed
dargmuesli opened this issue Apr 23, 2021 · 9 comments
Closed

postcss v8.2.12 fails to build (Nuxt) #2182

dargmuesli opened this issue Apr 23, 2021 · 9 comments

Comments

@dargmuesli
Copy link

This issue is similar to #2174, duplicating redxtech/vue-plyr#359 (comment):

Expected behaviour

postcss v8.2.12 does not throw an error.

Actual behaviour

postcss v8.2.12 does not throws an error.

Steps to reproduce

Build this branch: dargmuesli/creal#93

Environment

https://github.com/dargmuesli/creal/blob/master/Dockerfile

Console errors (if any)

#22 33.41 ERROR in ./node_modules/plyr/dist/plyr.css
#22 33.41 Module build failed (from ./node_modules/extract-css-chunks-webpack-plugin/dist/loader.js):
#22 33.41 ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
#22 33.41 ParserError: Syntax Error at line: 1, column 51
#22 33.41     at /srv/app/node_modules/plyr/dist/plyr.css:1:2198

See this build log.
@dargmuesli
Copy link
Author

I'm using plyr@3.6.7.

@ItsNash0
Copy link

I fixed it by linking the css by cdn on head in nuxt.config.json instead of linking css through the css linker.

here is my solution using app.html so we can defer loading and improve performance

<!DOCTYPE html>
<html {{ HTML_ATTRS }}>

<head {{ HEAD_ATTRS }}>
    {{ HEAD }}
    <link rel="preload" href="https://cdn.plyr.io/3.6.7/plyr.css" as="style"
        onload="this.onload=null;this.rel='stylesheet'">
    <noscript>
        <link rel="stylesheet" href="https://cdn.plyr.io/3.6.7/plyr.css">
    </noscript>
</head>

<body {{ BODY_ATTRS }}>
    {{ APP }}
    
</body>

</html>

@dargmuesli
Copy link
Author

But that just removes the verification, doesn't it?

@ItsNash0
Copy link

yep, postcss won't touch the css. if you need it up and running quickly its a solution. though I understand not ideal, but hey, deferring a CDN css is not that bad, i've had issues like this one with the css sometimes with plyr, so im going this route for now, less headaches.

@julkue
Copy link

julkue commented Apr 30, 2021

I have exactly the same issue without Nuxt, just with Webpack. Downgrading from 3.6.7 to 3.6.4 fixes the issue.

@miladazhdehnia
Copy link

same here
any solution?

@kgnfth
Copy link

kgnfth commented May 6, 2021 •
edited

it is because one of the "+ - *" signs in the css,
i think the only solution for now is to downgrade plyr

the difference between v3.6.4 and v3.6.7

v3.6.4

margin-right:calc((calc(var(--plyr-control-spacing,10px) * .7) - 2) * -1);

v3.6.7

margin-right:calc(var(--plyr-control-spacing, 10px)*.7*-1 - -2);

This was referenced May 8, 2021
Merged
Merged
@amallecourt amallecourt mentioned this issue Jun 17, 2021
Closed
@dargmuesli
Copy link
Author

dargmuesli commented Jul 30, 2021 •
edited

I did some further research and it looks like this issue's root is csstools/postcss-preset-env#191. Closing this one.

Further explanation: plyr generates its CSS using PostCSS 8 and Nuxt does not fully support PostCSS 8 yet.

@julkue julkue mentioned this issue Sep 17, 2021
Closed
@manniL
Copy link

manniL commented Oct 7, 2022

For all Googlers - you can use PostCSS8 with nuxt now via https://github.com/nuxt/postcss8

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
6 participants
@manniL @dargmuesli @julkue @ItsNash0 @miladazhdehnia @kgnfth