Closed AndrewBogdanovTSS closed 3 years ago
Nust.js is still using PostCSS 7. You can’t update to PostCSS 8 based plugins.
Using version 4.2.3 worked for me in Nuxt as well, thanks!
One question @ai : how can I check it PostCSS really added vendor prefixes? I looked into sources, but they still seem unprefixed. Probably I don't know how to check it. Thanks in advance!
@janswist call npx autoprefixer --info
to get what prefixed is required for your Browserslist. Then put it in CSS.
I got something like this. I'm supposed to put it in something like main.css
? Not really understood what put it in CSS means.
➜ app git:(master) npx autoprefixer --info
Browsers:
Chrome for Android: 85
Firefox for Android: 79
And_qq: 10.4
UC for Android: 12.12
Android: 81
Baidu: 7.12
Chrome: 86, 85, 84
Edge: 86, 85
Firefox: 81, 80, 78, 68
IE: 11
iOS: 14, 13.4-13.7, 13.3, 12.2-12.4
Kaios: 2.5
Opera Mini: all
Opera Mobile: 59
Opera: 71, 70
Safari: 14, 13.1
Samsung: 12.0, 11.1-11.2
These browsers account for 90.39% of all users globally
At-Rules:
@keyframes: webkit
@resolution: webkit
@viewport: ms, o
Selectors:
::backdrop: webkit
::placeholder: moz, -ms- old
::selection: moz
:any-link: webkit, moz
:fullscreen: webkit, ms
:placeholder-shown: moz, ms
:read-only: moz
:read-write: moz
Properties:
animation-delay: webkit
animation-direction: webkit
animation-duration: webkit
animation-fill-mode: webkit
animation-iteration-count: webkit
animation-name: webkit
animation-play-state: webkit
animation-timing-function: webkit
animation: webkit
appearance: webkit, moz
backdrop-filter: webkit
backface-visibility: webkit
background-clip: webkit
border-block-end: webkit
border-block-start: webkit
border-image: o
border-inline-end: webkit
border-inline-start: webkit
box-decoration-break: webkit
break-after: moz
break-before: moz
break-inside: moz
clip-path: webkit
color-adjust: webkit
column-count: moz
column-fill: moz
column-gap: moz
column-rule-color: moz
column-rule-style: moz
column-rule-width: moz
column-rule: moz
column-span: moz
column-width: moz
columns: moz
flow-from: ms
flow-into: ms
font-kerning: webkit
grid-area *: ms
grid-column *: ms
grid-column-align *: ms
grid-column-end *: ms
grid-column-start *: ms
grid-row *: ms
grid-row-align *: ms
grid-row-end *: ms
grid-row-start *: ms
grid-template *: ms
grid-template-areas *: ms
grid-template-columns *: ms
grid-template-rows *: ms
hyphens: webkit, ms
image-rendering: ms
margin-block-end: webkit
margin-block-start: webkit
margin-inline-end: webkit
margin-inline-start: webkit
mask-border-outset: webkit
mask-border-repeat: webkit
mask-border-slice: webkit
mask-border-source: webkit
mask-border-width: webkit
mask-border: webkit
mask-clip: webkit
mask-composite: webkit
mask-image: webkit
mask-origin: webkit
mask-position: webkit
mask-repeat: webkit
mask-size: webkit
mask: webkit
object-fit: o
object-position: o
overscroll-behavior: ms
padding-block-end: webkit
padding-block-start: webkit
padding-inline-end: webkit
padding-inline-start: webkit
place-self: ms
region-fragment: ms
scroll-snap-coordinate: ms
scroll-snap-destination: ms
scroll-snap-points-x: ms
scroll-snap-points-y: ms
scroll-snap-type: ms
tab-size: moz, o
text-align-last: moz
text-decoration-color: webkit
text-decoration-line: webkit
text-decoration-skip-ink: webkit
text-decoration-skip: webkit
text-decoration-style: webkit
text-decoration: webkit
text-emphasis-color: webkit
text-emphasis-position: webkit
text-emphasis-style: webkit
text-emphasis: webkit
text-orientation: webkit
text-size-adjust: webkit, moz
text-spacing: ms
user-select: webkit, moz, ms
writing-mode: ms
Values:
cross-fade: webkit
element: moz
fill-available: webkit, moz
fill: webkit, moz
fit-content: webkit, moz
grab: webkit
grabbing: webkit
grid *: ms
image-set: webkit
inline-grid *: ms
isolate-override: moz
isolate: webkit, moz
max-content: webkit, moz
min-content: webkit, moz
pixelated: moz
plaintext: moz
sticky: webkit
stretch: webkit, moz
* - Prefixes will be added only on grid: true option.
Add body { user-select: text; }
to CSS and thern check that your output CSS contains prefixed versions
Works! Accidentally I discovered that it works even though it's not installed (I had it installed, but then switched to other branch where I don't have it and voilà). Is it supposed to work out of the box in Nuxt.js?
Anyway, thanks for the help!
@ai As of 2021, is NuxtJS ready for PostCSS8?
@ai
Hmm okay thx but i still get [object Object] is not a PostCSS plugin when running my nuxt app.
Please use build.postcss in your nuxt.config.js instead of an external config file. Support for such files will be removed in Nuxt 3 as they remove all defaults set by Nuxt and can cause severe problems with features like alias resolving inside your CSS.
I get the following error when I try to read the configs from external file, so I moved everything inside nuxt.config.js and placed them under build property.
@Saggitarie did you add postcss
8 dependency to your package.json
?
@ai
under devdependencies, yes
@Saggitarie check npm ls
. Maybe there is some PostCSS 7 dependency in Nuxt.js.
Sorry, I am not familiar with Nuxt.js. You need to contact Nuxt.js community.
Yeah, I'll do that. WIll notify in this thread if I find out the solution.
Thanks for your response @ai !
@Saggitarie check
npm ls
. Maybe there is some PostCSS 7 dependency in Nuxt.js.Sorry, I am not familiar with Nuxt.js. You need to contact Nuxt.js community.
@ai BTW I tried yarn list and here is the result. Don't use this command that much so don't really know how to look at this, but I think there are couple of plugins that aren't postcss@8?
yarn list v1.22.10
├─ @nuxt/postcss8@1.1.3 │ ├─ postcss-import@13.0.0 │ ├─ postcss-loader@4.3.0 │ ├─ postcss-value-parser@4.1.0 │ └─ postcss@8.3.6 ├─ @nuxt/webpack@2.15.7 │ ├─ css-loader@4.3.0 │ │ └─ postcss-value-parser@4.1.0 │ ├─ postcss-import@12.0.1 │ ├─ postcss-load-config@2.1.2 │ ├─ postcss-loader@3.0.0 │ ├─ postcss-modules-extract-imports@2.0.0 │ ├─ postcss-modules-local-by-default@3.0.3 │ │ └─ postcss-value-parser@4.1.0 │ ├─ postcss-modules-scope@2.2.0 │ ├─ postcss-modules-values@3.0.0 │ └─ postcss-url@8.0.0 ├─ css-has-pseudo@0.10.0 │ └─ postcss-selector-parser@5.0.0 ├─ css-loader@6.2.0 │ ├─ postcss-value-parser@4.1.0 │ └─ postcss@8.3.6 ├─ postcss-advanced-variables@3.0.1 ├─ postcss-atroot@0.1.3 │ └─ postcss@5.2.18 ├─ postcss-attribute-case-insensitive@4.0.2 ├─ postcss-calc@7.0.5 │ └─ postcss-value-parser@4.1.0 ├─ postcss-cli@8.3.1 ├─ postcss-color-function@4.1.0 │ └─ postcss@6.0.23 ├─ postcss-color-functional-notation@2.0.1 ├─ postcss-color-gray@5.0.0 ├─ postcss-color-hex-alpha@5.0.3 ├─ postcss-color-mod-function@3.0.3 ├─ postcss-color-rebeccapurple@4.0.1 ├─ postcss-color-short@0.2.4 │ └─ postcss@5.2.18 ├─ postcss-colormin@4.0.3 ├─ postcss-combine-duplicated-selectors@10.0.3 ├─ postcss-convert-values@4.0.1 ├─ postcss-custom-media@7.0.8 ├─ postcss-custom-properties@8.0.11 ├─ postcss-custom-selectors@5.1.2 │ └─ postcss-selector-parser@5.0.0 ├─ postcss-dir-pseudo-class@5.0.0 │ └─ postcss-selector-parser@5.0.0 ├─ postcss-discard-comments@4.0.2 ├─ postcss-discard-duplicates@4.0.2 ├─ postcss-discard-empty@4.0.1 ├─ postcss-discard-overridden@4.0.1 ├─ postcss-double-position-gradients@1.0.0 ├─ postcss-easy-import@3.0.0 │ └─ postcss@6.0.23 ├─ postcss-env-function@2.0.2 ├─ postcss-extend-rule@2.0.0 │ └─ postcss@6.0.23 ├─ postcss-flexbugs-fixes@5.0.2 ├─ postcss-focus-visible@4.0.0 ├─ postcss-focus-within@3.0.0 ├─ postcss-font-variant@4.0.1 ├─ postcss-functions@4.0.2 │ └─ postcss-value-parser@4.1.0 ├─ postcss-gap-properties@2.0.0 ├─ postcss-image-set-function@3.0.1 ├─ postcss-import-resolver@2.0.0 ├─ postcss-import@10.0.0 │ └─ postcss@6.0.23 ├─ postcss-initial@3.0.4 ├─ postcss-join-transitions@1.1.0 │ └─ postcss@6.0.23 ├─ postcss-js@3.0.3 │ └─ postcss@8.3.6 ├─ postcss-lab-function@2.0.1 ├─ postcss-load-config@3.1.0 ├─ postcss-loader@6.1.1 ├─ postcss-logical@3.0.0 ├─ postcss-media-minmax@4.0.0 ├─ postcss-merge-longhand@4.0.11 ├─ postcss-merge-rules@4.0.3 │ └─ postcss-selector-parser@3.1.2 ├─ postcss-message-helpers@2.0.0 ├─ postcss-minify-font-values@4.0.2 ├─ postcss-minify-gradients@4.0.2 ├─ postcss-minify-params@4.0.2 ├─ postcss-minify-selectors@4.0.2 │ └─ postcss-selector-parser@3.1.2 ├─ postcss-mixins@8.1.0 │ └─ postcss@8.3.6 ├─ postcss-modules-extract-imports@3.0.0 ├─ postcss-modules-local-by-default@4.0.0 │ └─ postcss-value-parser@4.1.0 ├─ postcss-modules-scope@3.0.0 ├─ postcss-modules-values@4.0.0 ├─ postcss-mq-last@1.0.2 │ └─ postcss@6.0.23 ├─ postcss-nested@4.2.3 ├─ postcss-nesting@5.0.0 │ └─ postcss@6.0.23 ├─ postcss-normalize-charset@4.0.1 ├─ postcss-normalize-display-values@4.0.2 ├─ postcss-normalize-positions@4.0.2 ├─ postcss-normalize-repeat-style@4.0.2 ├─ postcss-normalize-string@4.0.2 ├─ postcss-normalize-timing-functions@4.0.2 ├─ postcss-normalize-unicode@4.0.1 ├─ postcss-normalize-url@4.0.1 ├─ postcss-normalize-whitespace@4.0.2 ├─ postcss-ordered-values@4.1.2 ├─ postcss-overflow-shorthand@2.0.0 ├─ postcss-page-break@2.0.0 ├─ postcss-place@4.0.1 ├─ postcss-preset-env@6.7.0 │ ├─ postcss-nesting@7.0.1 │ └─ postcss-value-parser@4.1.0 ├─ postcss-property-lookup@2.0.0 │ └─ postcss@6.0.23 ├─ postcss-pseudo-class-any-link@6.0.0 │ └─ postcss-selector-parser@5.0.0 ├─ postcss-reduce-initial@4.0.3 ├─ postcss-reduce-transforms@4.0.2 ├─ postcss-replace-overflow-wrap@3.0.0 ├─ postcss-reporter@7.0.2 ├─ postcss-responsive-type@1.0.0 │ └─ postcss@6.0.23 ├─ postcss-selector-matches@4.0.0 ├─ postcss-selector-not@4.0.1 ├─ postcss-selector-parser@6.0.6 ├─ postcss-simple-vars@6.0.3 ├─ postcss-svgo@4.0.3 ├─ postcss-unique-selectors@4.0.1 ├─ postcss-url@10.1.3 ├─ postcss-utilities@0.8.4 │ └─ postcss-value-parser@4.1.0 ├─ postcss-value-parser@3.3.1 ├─ postcss-values-parser@2.0.1 ├─ postcss@7.0.36 └─ stylehacks@4.0.3 └─ postcss-selector-parser@3.1.2
@Saggitarie yes
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users#nuxtjs
This first @nuxt/postcss8 is from the list you gave me in your first reply.
I'm using postcss-nested inside Nuxt, my config that I was using before the upgrade with v.4.2.3 was working just fine nuxt.config.js
but after the upgrade I started to get an error which fails the build