🐛 BUG: PostCSS example from documentation does not work (and some plugins are broken) #3528

felixsanz · 2022-06-06T00:08:30Z

What version of `astro` are you using?

v1.0.0-beta.40

Are you using an SSR adapter? If so, which one?

no

What package manager are you using?

npm

What operating system are you using?

Linux

Describe the Bug

https://docs.astro.build/en/guides/styling/#postcss

Documentation says that PostCSS integration can be enabled with just creating a postcss.config.js file, install some plugins and require them there.

And it works with plugins like autoprefixer, but postcss-nesting does not work. The example in the documentation uses postcss-preset-env (which also includes postcss-nesting).

In the test case i created i just forked the "Just the basics" repo example, installed the plugin, added postcss.config.js and moved the css inside components/Card.astro so it becomes:

	.link-card {
		list-style: none;
		display: flex;
		padding: 0.15rem;
		background-image: var(--link-gradient);
		background-size: 400%;
		border-radius: 0.5rem;
		background-position: 100%;
		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);

		& > a {
			width: 100%;
			text-decoration: none;
			line-height: 1.4;
			padding: 1em 1.3em;
			border-radius: 0.35rem;
			color: var(--text-color);
			background-color: white;
			opacity: 0.8;
		}

The nesting thing does not work, devtools shows an error because invalid property. In the case of doing this in a svelte component... the dev server crash and doesn't let you continue.

Looks like postcss plugins that include (at the moment) a custom syntax does not work

Link to Minimal Reproducible Example

https://codesandbox.io/s/silent-dew-fehxqz

Participation

I am willing to submit a pull request for this issue.

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

oliverturner · 2022-06-08T14:37:08Z

As a Stage 1 proposal, nesting must be opted into explicitly (postcss-nesting only enables Stage 2 and later by default).

So not a bug per se, but since nesting is a common-enough want, an update to the docs would probably be helpful. PR incoming!

https://codesandbox.io/s/fancy-surf-h0i1wk?file=/postcss.config.js

felixsanz · 2022-06-08T14:49:46Z

As a Stage 1 proposal, nesting must be opted into explicitly (postcss-nesting only enables Stage 2 and later by default).

Nesting is a common-enough want that it may warrant an update to the docs?

https://codesandbox.io/s/fancy-surf-h0i1wk?file=/postcss.config.js

Ok about that, but postcss-nesting does not work. And in svelte components it crash and don't even let you start the server, so it's a valid bug

oliverturner · 2022-06-08T15:26:28Z

Is the rendered example in that fork not working for you?

https://codesandbox.io/s/fancy-surf-h0i1wk?file=/src/components/Card.astro

felixsanz · 2022-06-08T16:25:43Z

nope...

oliverturner · 2022-06-08T16:42:17Z

Ah... that's because I was looking into the Svelte set-up: should have forked before doing that!

Try this: https://codesandbox.io/s/lively-sun-9p6qyo?file=/src/components/Card.astro

felixsanz · 2022-06-08T17:22:29Z

Ah... that's because I was looking into the Svelte set-up: should have forked before doing that!

Try this: https://codesandbox.io/s/lively-sun-9p6qyo?file=/src/components/Card.astro

That doesn't include a .svelte component :/

oliverturner · 2022-06-08T17:27:25Z

Yes, I was trying to validate that the PostCSS integration works as described with Astro components.

oliverturner · 2022-06-09T16:00:08Z

So this version uses CSS nesting in Svelte modules

https://codesandbox.io/s/admiring-raman-ftigzk?file=/src/components/Card.svelte

felixsanz · 2022-06-09T16:18:16Z

So this version uses CSS nesting in Svelte modules

https://codesandbox.io/s/admiring-raman-ftigzk?file=/src/components/Card.svelte

can you check a local project using vscode? to me crash both language-tools and the dev server

oliverturner · 2022-06-09T16:50:34Z

Can you try updating astro.config.mjs with the following and let me know how you get on?

import { defineConfig } from "astro/config";
import svelte from "@astrojs/svelte";
import preprocess from "svelte-preprocess";

export default defineConfig({
  integrations: [
    svelte({
      preprocess: [
        preprocess({
          postcss: true,
        }),
      ],
    }),
  ],
});

felixsanz · 2022-06-09T16:52:10Z

Can you try updating astro.config.mjs with the following and let me know how you get on?

import { defineConfig } from "astro/config";
import svelte from "@astrojs/svelte";
import preprocess from "svelte-preprocess";

export default defineConfig({
  integrations: [
    svelte({
      preprocess: [
        preprocess({
          postcss: true,
        }),
      ],
    }),
  ],
});

Yeah i saw you importing the svelte-preprocess package in some example and i tried that already, it didn't help :(

oliverturner · 2022-06-09T16:56:47Z

Can you confirm that this repo doesn't work for you? I'm running it locally without issue.
https://github.com/oliverturner/astro-svelte-postcss

felixsanz · 2022-06-09T17:21:43Z

Can you confirm that this repo doesn't work for you? I'm running it locally without issue. https://github.com/oliverturner/astro-svelte-postcss

i don't understand the magic going on! your repo works perfect. mine... after updating from b40 to b42 it doesn't crash anymore, but i can't get rid of the error that vscode shows!

i reloaded astro language server, svelte language server, reloaded editor window, closed and opened a new editor 😂

felixsanz · 2022-06-09T17:29:49Z

Could this be the issue?

Importing postcss-nesting and hovering it i get this message:

Could not find a declaration file for module 'postcss-nesting'. '.../node_modules/postcss-nesting/dist/index.cjs' implicitly has an 'any' type.
  Try `npm i --save-dev @types/postcss-nesting` if it exists or add a new declaration (.d.ts) file containing `declare module 'postcss-nesting';`ts(7016)

EDIT: probably not

I remember in sveltekit i had to add this to my vscode settings.json:

  "svelte.plugin.css.diagnostics.enable": false,

but it's not working here, no effect

oliverturner · 2022-06-09T18:08:48Z

Just to refocus on the Astro-specific aspects, here's what I think one can say

PostCSS: The documentation could be usefully enhanced with an example of how to opt in to plugin-specific options such as postcss-preset-env's.

As I said above, I'm happy to make a PR for this.
Svelte: it feels like @astrojs/svelte should automatically add the necessary preprocess config... and I've got a feeling that it (or its precursor) used to?

More research required!

oliverturner · 2022-06-09T18:27:00Z

Re the Svelte Language Server complaining about CSS syntax it doesn't recognise, that feels like a challenge that ~~needs~~ ought to be to be addressed upstream in the vscode-css-languageservice: I think users should be able to opt in to early stage features (such as nesting at Stage 1, or Custom Environment Variables at Stage 0) without getting chastised!

felixsanz · 2022-06-09T18:29:15Z

Re the Svelte Language Server complaining about CSS syntax it doesn't recognise, that feels like a challenge that needs to be addressed upstream in the vscode-css-languageservice: I think users should be able to opt in to early stage features (such as nesting at Stage 1, or Custom Environment Variables at Stage 0) without getting chastised!

but in sveltekit this works fine! maybe astro language-tools are not reading that "svelte.plugin.css.diagnostics.enable": false thing. or it's not even implemented. this is part of svete-preprocess if i'm right.

@Princesseuh you are in charge of language-tools right? Can you shed some light? (if you know)

Princesseuh · 2022-06-09T21:35:55Z

Our language tools are only running in Astro files, errors inside Svelte files are handled by the Svelte extension only.

We can't show errors inside Svelte files, they can't show errors inside Astro files

(Our language server does not even support CSS validation, so, we can't even show errors inside style tags in general)

You shouldn't actually need that setting as the Svelte language server disable validation for style tags with lang set to PostCSS (since yeah, vscode-css-languageservice does not support PostCSS)

felixsanz · 2022-06-10T12:03:34Z

Then whose fault is it? 😆

All i can say is..

I had a custom/own TS project with no frameworks and this worked fine, so not vscode's fault.
This also works fine with sveltekit, so svelte seems to be compatible and doesn't complain either.
What's left? Astro?

@Princesseuh I think it's needed! Comment from svelte's language tools author: sveltejs/language-tools#190 (comment) (and I can confirm that you NEED it on sveltekit or the error won't dissapear)

felixsanz · 2022-06-10T12:14:34Z

@oliverturner @Princesseuh I found the issue. Astro still needs a svelte.config.js file for this to work:

So Astro is missing something?

astro.config.js (does NOT fix it):

import { defineConfig } from "astro/config";
import svelte from "@astrojs/svelte";
import sveltePreprocess from "svelte-preprocess";

import nesting from 'postcss-nesting'

const postcssConfig = {
	plugins: [
		nesting,
	],
}

export default defineConfig({
  integrations: [
    svelte({
      preprocess: [
        sveltePreprocess({
          postcss: postcssConfig,
        }),
      ],
    }),
  ],
});

svelte.config.js (DOES fix it):

const sveltePreprocess = require('svelte-preprocess')
const nesting = require('postcss-nesting')

const postcssConfig = {
	plugins: [
		nesting,
	],
}

const config = {
	preprocess: [
		sveltePreprocess({
			postcss: postcssConfig,
		}),
	],
}

module.exports = config

Princesseuh · 2022-06-10T12:21:45Z

Astro pass those settings directly to Svelte, whereas the Svelte language server expect an actual Svelte config file, I don't think there's anything we can do apart from documenting that needs

(Unless the Svelte team is interested in a PR to their language tool to load our config)

Thank you for finding the issue!

felixsanz · 2022-06-10T12:22:27Z

Ah, yeah the Svelte language server load that config. Not much we can do on our side apart from documenting that need

Thank you for finding the issue!

So having this config inside astro.config.js is useless and does nothing?

  integrations: [
    svelte({
      preprocess: [
        preprocess({
          postcss: postcssConfig,
        }),
      ],
    }),

or Astro still uses it to preprocess stuff in svelte components throught vite? (a.k.a.: do i need the same code twice? 😆😆)

Princesseuh · 2022-06-10T12:26:31Z

Ah, yeah the Svelte language server load that config. Not much we can do on our side apart from documenting that need

Thank you for finding the issue!

So having this config inside astro.config.js is useless and does nothing?
  integrations: [
    svelte({
      preprocess: [
        preprocess({
          postcss: postcssConfig,
        }),
      ],
    }),
or Astro still uses it to preprocess stuff in svelte components throught vite? (a.k.a.: do i need the same code twice? 😆😆)

Yep, that config is needed for the Svelte integration to process the files, maybe we could update the integration to load a Svelte config file

felixsanz · 2022-06-10T12:30:46Z

Since svelte() accepts what svelte.config.js outputs... documentation could explain it like this:

import svelteConfig from 'svelte.config.js'

export default defineConfig({
  integrations: [
    svelte(svelteConfig),
  ],
});

Also a change to make it work automatic sounds nice. I think if Astro still depends on other framework's language tools for this kind of things, per-framework specific config file are still needed.

Thank you both for helping me debug the issue!

bholmesdev · 2022-06-21T20:29:42Z

Svelte: it feels like @astrojs/svelte should automatically add the necessary preprocess config... and I've got a feeling that it (or its precursor) used to?

@oliverturner Ah yep, it did used to autoconfigure postcss! We had to remove this after some gnarly console errors for non-postCSS users, complaining "PostCSS configuration was not passed or is invalid." See #2273

Interesting that leaving out postcss: true lets in some PostCSS rules and not others though 😕 That explains why your test suite didn't catch it. Might be worth a) documenting or b) smartly configuring postcss to true if a postcss config is present in your project!

bholmesdev · 2022-06-21T20:31:29Z

Also @oliverturner I'd love to see some beefed-up PostCSS docs there! I'll defer to your expertise but lmk if I should jump in as well.

bholmesdev · 2022-06-22T23:26:41Z

@felixsanz Found a fix for your Svelte issue! #3685 I noticed we weren't applying our generated PostCSS config to Svelte. This should apply all Post CSS config by default, including Tailwind defaults if you mix with that integration 👍

JonathonRP · 2024-10-23T20:45:35Z

@bholmesdev how can I achieve this with latest version of astrojs/svelte?

natemoo-re added - P4: important Violate documented behavior or significantly impacts performance (priority) s2-medium labels Jun 6, 2022

FredKSchott assigned bholmesdev Jun 20, 2022

bholmesdev added - P2: has workaround Bug, but has workaround (priority) and removed - P4: important Violate documented behavior or significantly impacts performance (priority) labels Jun 21, 2022

bholmesdev mentioned this issue Jun 22, 2022

Fix: pass Astro config postcss to Svelte preprocess #3685

Merged

bholmesdev closed this as completed in #3685 Jun 22, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🐛 BUG: PostCSS example from documentation does not work (and some plugins are broken) #3528

🐛 BUG: PostCSS example from documentation does not work (and some plugins are broken) #3528

felixsanz commented Jun 6, 2022 •

edited

Loading

oliverturner commented Jun 8, 2022 •

edited

Loading

felixsanz commented Jun 8, 2022 •

edited

Loading

oliverturner commented Jun 8, 2022

felixsanz commented Jun 8, 2022

oliverturner commented Jun 8, 2022 •

edited

Loading

felixsanz commented Jun 8, 2022

oliverturner commented Jun 8, 2022

oliverturner commented Jun 9, 2022

felixsanz commented Jun 9, 2022

oliverturner commented Jun 9, 2022 •

edited

Loading

felixsanz commented Jun 9, 2022

oliverturner commented Jun 9, 2022

felixsanz commented Jun 9, 2022 •

edited

Loading

felixsanz commented Jun 9, 2022 •

edited

Loading

oliverturner commented Jun 9, 2022

oliverturner commented Jun 9, 2022 •

edited

Loading

felixsanz commented Jun 9, 2022 •

edited

Loading

Princesseuh commented Jun 9, 2022 •

edited

Loading

felixsanz commented Jun 10, 2022 •

edited

Loading

felixsanz commented Jun 10, 2022 •

edited

Loading

Princesseuh commented Jun 10, 2022 •

edited

Loading

felixsanz commented Jun 10, 2022 •

edited

Loading

Princesseuh commented Jun 10, 2022

felixsanz commented Jun 10, 2022 •

edited

Loading

bholmesdev commented Jun 21, 2022

bholmesdev commented Jun 21, 2022

bholmesdev commented Jun 22, 2022

JonathonRP commented Oct 23, 2024

🐛 BUG: PostCSS example from documentation does not work (and some plugins are broken) #3528

🐛 BUG: PostCSS example from documentation does not work (and some plugins are broken) #3528

Comments

felixsanz commented Jun 6, 2022 • edited Loading

What version of astro are you using?

Are you using an SSR adapter? If so, which one?

What package manager are you using?

What operating system are you using?

Describe the Bug

Link to Minimal Reproducible Example

Participation

oliverturner commented Jun 8, 2022 • edited Loading

felixsanz commented Jun 8, 2022 • edited Loading

oliverturner commented Jun 8, 2022

felixsanz commented Jun 8, 2022

oliverturner commented Jun 8, 2022 • edited Loading

felixsanz commented Jun 8, 2022

oliverturner commented Jun 8, 2022

oliverturner commented Jun 9, 2022

felixsanz commented Jun 9, 2022

oliverturner commented Jun 9, 2022 • edited Loading

felixsanz commented Jun 9, 2022

oliverturner commented Jun 9, 2022

felixsanz commented Jun 9, 2022 • edited Loading

felixsanz commented Jun 9, 2022 • edited Loading

oliverturner commented Jun 9, 2022

oliverturner commented Jun 9, 2022 • edited Loading

felixsanz commented Jun 9, 2022 • edited Loading

Princesseuh commented Jun 9, 2022 • edited Loading

felixsanz commented Jun 10, 2022 • edited Loading

felixsanz commented Jun 10, 2022 • edited Loading

Princesseuh commented Jun 10, 2022 • edited Loading

felixsanz commented Jun 10, 2022 • edited Loading

Princesseuh commented Jun 10, 2022

felixsanz commented Jun 10, 2022 • edited Loading

bholmesdev commented Jun 21, 2022

bholmesdev commented Jun 21, 2022

bholmesdev commented Jun 22, 2022

JonathonRP commented Oct 23, 2024

felixsanz commented Jun 6, 2022 •

edited

Loading

What version of `astro` are you using?

oliverturner commented Jun 8, 2022 •

edited

Loading

felixsanz commented Jun 8, 2022 •

edited

Loading

oliverturner commented Jun 8, 2022 •

edited

Loading

oliverturner commented Jun 9, 2022 •

edited

Loading

felixsanz commented Jun 9, 2022 •

edited

Loading

felixsanz commented Jun 9, 2022 •

edited

Loading

oliverturner commented Jun 9, 2022 •

edited

Loading

felixsanz commented Jun 9, 2022 •

edited

Loading

Princesseuh commented Jun 9, 2022 •

edited

Loading

felixsanz commented Jun 10, 2022 •

edited

Loading

felixsanz commented Jun 10, 2022 •

edited

Loading

Princesseuh commented Jun 10, 2022 •

edited

Loading

felixsanz commented Jun 10, 2022 •

edited

Loading

felixsanz commented Jun 10, 2022 •

edited

Loading