rollup-plugin-postcss not working

[JadedBlueEyes]

I can't seem to get postcss to work properly and extract my css like it does in pure svelte.
With css extract option on it generates:

export default undefined;
export default undefined;
/* sourceMappingURL=./chunk.e3537e20.css.map */

but with it off, it generates:

var css = "a.link.svelte-131civd{color:#d3d3d3}";
export default css;
import styleInject from 'C:/Users/admin/Code/domainhax/node_modules/style-inject/dist/style-inject.es.js';
styleInject(css);
var css = "main.svelte-1joomdn{padding-right:15px;padding-left:15px;margin-right:auto;margin-left:auto;width:64em}input.svelte-1joomdn{width:100%}#description.svelte-1joomdn>div.svelte-1joomdn{width:50%;padding:0;float:left}header.svelte-1joomdn{text-align:center}p.svelte-1joomdn{margin-top:0}a.svelte-1joomdn{color:#959595}h1.svelte-1joomdn a.svelte-1joomdn{color:#dfdfdf}";
export default css;
import styleInject from 'C:/Users/admin/Code/domainhax/node_modules/style-inject/dist/style-inject.es.js';
styleInject(css);
/* sourceMappingURL=./chunk.e3537e20.css.map */

In normal svelte when I do import './global.css', it generates a inlined bit of js with it off, and the processed file with it on, and does the same for svelte's generated CSS.
I can't figure out what's going wrong, but I would like my css minified and prefixed.

[maxmilton]

For general support questions, you'll find https://stackoverflow.com/questions/tagged/svelte is probably a more appropriate place.

---

You need to give a bit more context for someone to understand your use case.

1. What version of Svelte and Sapper?
2. Which build tool, Webpack or Rollup?
3. Are you trying to import that CSS file in a component or in a JS file?
4. Are you using a Svelte preprocessor?
5. How have you configured PostCSS?
6. Are there any errors in your console?
7. etc.

[JadedBlueEyes]

1. This is sapper 0.26 with svelte 3.
2. Rollup
3. The CSS is both the css generated by svelte from the components and imported css, aka all the css that passes through rollup.
4. No.
5. postcss.config.js:

   module.exports = {
     extract: true,
     sourceMap: false,
     plugins: [
       require('@csstools/postcss-sass')(/* node-sass options */),
       require("postcss-import"),
       require("postcss-preset-env")({ stage: 4 }),
       require("autoprefixer")(),
       require("postcss-csso")
     ],
     parser: 'postcss-scss',
   }

   General standard across my projects.
6. No - it's silent apart from babel telling me to specify core-js version

[maxmilton]

To process PostCSS in Svelte <style> blocks you need to set up a preprocessor such as https://github.com/TehShrike/svelte-preprocess-postcss or https://github.com/kaisermann/svelte-preprocess.

To process PostCSS imported in JS files you need to use a Rollup plugin such as https://github.com/egoist/rollup-plugin-postcss. Sapper will take care of emitting the CSS assets but you do need to process it first. The order of your Rollup plugins can also be important.

[JadedBlueEyes]

@maxmilton As far as i'm aware, Svelte outputs the CSS file(s) to rollup, for rollup-plugin-postcss to take care of. This works fine with svelte by itself, but not with sapper!
That's what I'm trying to say here, is sapper is somehow forcing the CSS files to be JS.

[maxmilton]

Svelte first parses the <style> blocks with css-tree in order to find any unused CSS selectors. Because of this the styles inside any <style> block must be valid CSS. Only then does it pass the styles through.

If you want your <style> blocks processed with PostCSS you need to use a preprocessor. See this comment for an example with SASS — the same thing applies using a PostCSS preprocessor.

If it's just the CSS files imported in JS that you're having issues with I suggest looking over your rollup PostCSS plugins docs.

[JadedBlueEyes]

I made a repo to demonstrate my issue. https://github.com/JoelEllis/sapper-postcss-issue

Quick side note - sapper seems to not work in Git Bash - if you run it in a fresh repo, it give some kind of error about can't find undefined\client.js. Possibly to do with git bash making windows paths POSIX so \ is an escape character rather than the path seperator in git bash?

[dephiros]

I run into this issues as well.
What I am trying to do is to use the preprocessor to process svelte css
Use rollup-plugin-postcss to process css imported by js
Maybe if there is a way to make rollup-plugin-postcss ignore files emitted by svelte

Adding these to svelte rollup config fix it for me:

        emitCss: false,
        css: true,

[JadedBlueEyes]

@dephiros That works great. Thanks.
TBH, this seems really unintuitive though - what makes it behave like this? @maxmilton

[JadedBlueEyes]

In some of my projects it doesn't work though. I'm working around that by removing psotcss form the build, getting sapper to output css seperately and running postcss __sapper__/build/client/**/*.css --dir __sapper__/build/client --base __sapper__/build/client.

@JoelEllis This is based on the official template https://github.com/nhristov/sapper-template-rollup. It adds postcss, purgecss, cssnano, tailwindcss and svelte-preprocess without having to modify the build script in your package.json

[JadedBlueEyes]

Just reposting here what I replied to @nhristov's email with:

It seems to work great (excluding that it doesn't minify global.css automatically, but that can be fixed by importing it in the JS rather than the HTML IIRC).

Just to note now, I'm not really in the same environment as I was when I made that issue - I used to be on windows (10 home), I've moved to a Linux system full-time now.
I went back and tested the repo I made for the bug and it does seem to have similar/the same behaviour as before, with the same configurations being broken.

[JadedBlueEyes]

After some testing, I figured out how the repo works, and it seems a bit weird to have a ganerated & minifed style comitted to git?

[JadedBlueEyes]

Dispite this solving my problem, I don't think this really solves the bug (or incompatibility). It's a workaround, in my opinion. The issue is what causes the incompatibility with postcss, and how do we fix it without requiring a non-obvious workaround. This could be a bug in rollup, but I've only seen it occur with sapper.

If this is going to be a WONTFIX bug, can we get it documented?

[antony]

@JoelEllis I'm struggling to determine from this reading issue, because it's not clear:

• What is the bug that you're having trouble with
• What is the workaround you are using
• What is the proposed solution (a documentation update, perhaps?)

Regarding the third point - from what I can ascertain, your problem stems from using postCSS in Sapper. Sapper doesn't natively support PostCSS, so we wouldn't necessarily document a solution for PostCSS in the main Sapper docs.

If this is a problem with Rollup then we can raise the issue / fix the issue there.

Also I notice your reproduction is archived. Do you have a new, simplified reproduction so that we can see the issue for ourselves?

Thanks!