PostCSS Usage Clarification

[alessio-libardi]

Hello everyone, I'm trying to use this amazing project for my personal website and wanted to use PostCSS but couldn't find the resources to get it working.

Some clarification on how to use PostCSS would be really appreciated, I'm trying to use two simple plugins but it's not working as I expected it would be, can someone help me out? 🍣

Following my web-dev-server.config.js, thanks anyone 🙌

import { fromRollup } from '@web/dev-server-rollup';
import rollupPostcss from 'rollup-plugin-postcss';
import postcssPresetEnv from 'postcss-preset-env'
import postcssNano from 'cssnano'

const postcss = fromRollup(rollupPostcss);

export default {
    rootDir: 'src',
    open: true,
    watch: true,
    plugins: [
        postcss({ 
            include: ['src/**/*.css'],
            plugins: [
                postcssPresetEnv({
                    stage: 1,
                }),
                postcssNano({
                    preset: 'default'
                })
            ] 
        })
    ]
};

With this configuration I would expect my css to get prefixed and minified.

[LarsDenBakker]

Rollup plugins only process javascript files. If you're importing CSS into JS, you will need to tell the server to serve your files as JS:

export default {
    rootDir: 'src',
    open: true,
    watch: true,
    mimeTypes: {
      'src/**/*.css': 'js',
    },
    plugins: [
        postcss({ 
            include: ['src/**/*.css'],
            plugins: [
                postcssPresetEnv({
                    stage: 1,
                }),
                postcssNano({
                    preset: 'default'
                })
            ] 
        })
    ]
};

[LarsDenBakker]

Closing this due to inactivity, feel free to reopen if you have further questions.

[alessio-libardi]

Closing this due to inactivity, feel free to reopen if you have further questions.

Thanks @LarsDenBakker you resolved my issue with PostCSS usage! 🔝