feat: add lightningcss-plugin-pxtorem

Author: felixicaza

packages/pxtorem/README.md

@@ -0,0 +1,59 @@
+# ⚡ lightningcss-plugin-pxtorem
+
+The `lightningcss-plugin-pxtorem` plugin is designed to convert pixel units to rem units in your CSS, making it easier to maintain responsive and scalable designs.
+
+> [!NOTE]
+> WIP - This plugin is still a work in progress.
+
+## ✨ Features
+
+- ✅ Converts pixel units to rem units.
+- ✅ Helps maintain responsive and scalable designs.
+- ✅ Customizable options for root value, precision, properties, and more.
+
+## ⬇️ Installation
+
+You can install the `lightningcss-plugin-pxtorem` plugin using npm or yarn:
+
+```sh
+npm install lightningcss-plugin-pxtorem
+```
+
+or
+
+```sh
+pnpm add lightningcss-plugin-pxtorem
+```
+
+## 🚀 Usage
+
+To use the `lightningcss-plugin-pxtorem` you need to include it in your `vite.config.js` file:
+
+```js
+import { defineConfig } from "vite";
+import { composeVisitors } from "lightningcss";
+import pxtorem from "lightningcss-plugin-pxtorem";
+
+export default defineConfig({
+  css: {
+    transformer: "lightningcss",
+    lightningcss: {
+      visitor: composeVisitors([pxtorem()]),
+    },
+  },
+});
+```
+
+This plugin also is compatible with others tools that use Vite.
+
+## 🤝 Contributing
+
+If you wish to contribute to this project, you can do so by reading the [contribution guide](../../CONTRIBUTING.md).
+
+## 🙌 Credits
+
+This plugin was highly inspired by [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem).
+
+## 📄 License
+
+This project is licensed under the MIT License. See the [license file](../../LICENSE) for more details.

packages/pxtorem/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "lightningcss-plugin-pxtorem",
+  "version": "0.0.1",
+  "description": "Convert px to rem in css files with LightningCSS.",
+  "keywords": [
+    "lightningcss",
+    "lightningcss-plugin",
+    "css",
+    "plugin",
+    "pxtorem",
+    "px",
+    "rem"
+  ],
+  "homepage": "https://github.com/felixicaza/lightningcss-plugins/packages/pxtorem#readme",
+  "bugs": {
+    "url": "https://github.com/felixicaza/lightningcss-plugins/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/felixicaza/lightningcss-plugins.git"
+  },
+  "license": "MIT",
+  "author": "Felix Icaza <fx.joliett17@gmail.com>",
+  "sideEffects": false,
+  "type": "module",
+  "exports": {
+    ".": "./dist/index.js"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "pnpm build",
+    "start": "tsx src/index.ts"
+  },
+  "packageManager": "pnpm@10.5.2"
+}

packages/pxtorem/src/index.ts

@@ -0,0 +1,11 @@
+import { type LengthValue, type LengthUnit } from 'lightningcss'
+
+export default () => {
+  return {
+    Length({ unit, value }: LengthValue): { unit: LengthUnit, value: number } | undefined {
+      if (unit === 'px') {
+        return { unit: 'rem', value: value / 16 }
+      }
+    }
+  }
+}

packages/pxtorem/test/__snapshots__/index.test.ts.snap

@@ -0,0 +1,11 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`pxtorem plugin > should convert px to rem 1`] = `"div{margin:1rem}"`;
+
+exports[`pxtorem plugin > should convert px to rem in custom properties 1`] = `":root{--margin:1rem}div{margin:var(--margin)}"`;
+
+exports[`pxtorem plugin > should convert px to rem in keyframes 1`] = `"@keyframes fadeIn{0%{margin:1rem}to{margin:2rem}}"`;
+
+exports[`pxtorem plugin > should convert px to rem in media queries 1`] = `"@media (width>=48rem){div{margin:1rem}}"`;
+
+exports[`pxtorem plugin > should not convert other units 1`] = `"div{margin:1em}"`;

packages/pxtorem/test/index.test.ts

@@ -0,0 +1,82 @@
+import { describe, expect, it } from 'vitest'
+import { composeVisitors, transform } from 'lightningcss'
+import pxtorem from '../dist/index'
+
+describe('pxtorem plugin', () => {
+  it('should convert px to rem', () => {
+    const css = 'div { margin: 16px; }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem()])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('should not convert other units', () => {
+    const css = 'div { margin: 1em; }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      drafts: {
+        customMedia: true
+      },
+      nonStandard: {
+        deepSelectorCombinator: true
+      },
+      errorRecovery: true,
+      visitor: composeVisitors([pxtorem()])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('should convert px to rem in media queries', () => {
+    const css = '@media (min-width: 768px) { div { margin: 16px; } }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem()])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('should convert px to rem in keyframes', () => {
+    const css = '@keyframes fadeIn { from { margin: 16px; } to { margin: 32px; } }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem()])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+
+  it('should convert px to rem in custom properties', () => {
+    const css = ':root { --margin: 16px; } div { margin: var(--margin); }'
+
+    const output = transform({
+      filename: 'input.css',
+      code: Buffer.from(css),
+      minify: true,
+      sourceMap: false,
+      visitor: composeVisitors([pxtorem()])
+    }).code.toString()
+
+    expect(output).toMatchSnapshot()
+  })
+})

packages/pxtorem/tsup.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'tsup'
+
+export default defineConfig([
+  {
+    entry: ['src/index.ts'],
+    format: ['esm'],
+    dts: true,
+    clean: true,
+    target: 'esnext'
+  }
+
+])