#Postcss & Autoprefixer not working

5 messages · Page 1 of 1 (latest)

tight wave
#

Hello

I cannot add vendor prefixes to my styles using autoprefixer and postcss.
It seems like autoprefixer and postcss are not working at all.

I'm using NextJS 14.1.4 with app router. I'm writing my css using modules.
I have added a browserlist entry in my package.json file.
I have also installed autoprefixer and postcss (along with some plugins)
In fact here's my configuration.

package.json

    ....
        "next": "^14.1.4",        
        "react": "^18.2.0",
        "react-dom": "^18.2.0",
    },
    "devDependencies": {
        "@types/node": "^20",        
        "@types/react": "^18",
        "@types/react-dom": "^18",
        "autoprefixer": "^10.4.19",
        "eslint": "^8",
        "eslint-config-next": "^14.1.4",
        "postcss": "^8.4.38",
        "postcss-flexbugs-fixes": "^5.0.2",
        "postcss-preset-env": "^9.5.4",
        "prettier": "^3.2.1",
        "typescript": "^5"
    },
    "browserslist": [
        "defaults and fully supports es6-module",
        "maintained node versions"
    ]
}

postcss.config.js

module.exports = {
    plugins: {
        'postcss-flexbugs-fixes': {},
        'postcss-preset-env': {
            autoprefixer: {
                flexbox: 'no-2009',
            },
            stage: 3,
            features: {
                'custom-properties': false,
            },
        },
    },
}

To test this i am doing npm run build and then I'm looking for vendor prefixed flex entries such as this one:

display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

Can someone please help me.
Thank you !!

unreal rivetBOT
#
Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

tight wave
#

Postcss & Autoprefixer not working

scarlet latch
#

you may bump the post to make it float up to the top of the channel once per day (by sending any messages here). please don't repost the question

tight wave