thedutchcoder / postcss-rem-to-px Goto Github PK

Hey, this plugin works for me (Vue3, Tailwind3, Vite...).

Thx for the work. I appreciate it's easier than the other rem-to-px plugins out there.

However the following were hiccups:

1. The Github readme still seems to have an error?

Wrong:
npm install --save-dev postcss postcss-rem-to-px

Correct:
npm install --save-dev postcss @thedutchcoder/postcss-rem-to-px

2. My postcss.config.js is different:

I don't use:
require('@thedutchcoder/postcss-rem-to-px')

This works:

module.exports = {
    plugins: {
        tailwindcss: {},
        autoprefixer: {},
        '@thedutchcoder/postcss-rem-to-px': {}
    }
}

Finally, if it helps, my package.json, for reference:

{
  "name": "my-cool-chrome-extension",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build && npx tailwindcss -i ./src/assets/main.css -o ./dist/assets/main.css",
    "preview": "vite preview",
    "test:unit": "vitest --environment jsdom --root src/"
  },
  "dependencies": {
    "vue": "^3.2.45"
  },
  "devDependencies": {
    "@thedutchcoder/postcss-rem-to-px": "^0.0.2",
    "@vitejs/plugin-vue": "^4.0.0",
    "@vue/test-utils": "^2.2.6",
    "autoprefixer": "^10.4.13",
    "jsdom": "^20.0.3",
    "postcss": "^8.4.20",
    "tailwindcss": "^3.2.4",
    "vite": "^4.0.0",
    "vite-plugin-chrome-extension": "^0.0.7",
    "vitest": "^0.25.6"
  }
}

I've spent countless hours trying to figure out how to over come

html { 
   font-size: 62.5%;
}

when building universal ShadowDOM based custom elements. It's been since 2023 Spring that I've been putting work arounds that would bite me in the butt during maintenance and thanks to some luck, deeper debugging and fellow developers, I came across that using rem was the issue which doesn't seem to be discussed a lot.

This plugin magically made everything work and I feel so damn happy that it's hard to put in the words.

Seriously, I hope you have a good one reading this. Thank you!

Titel says it all :)

Went here because of this comment: tailwindlabs/tailwindcss#1232 (comment)