feat(preset-rem-to-px): new preset

alias.ts

@@ -18,6 +18,7 @@ export const alias: Record<string, string> = {
   '@unocss/preset-uno': r('./packages/preset-uno/src/'),
   '@unocss/preset-web-fonts': r('./packages/preset-web-fonts/src/'),
   '@unocss/preset-wind': r('./packages/preset-wind/src/'),
+  '@unocss/preset-rem-to-px': r('./packages/preset-rem-to-px/src/'),
   '@unocss/transformer-directives': r('./packages/transformer-directives/src/'),
   '@unocss/transformer-variant-group': r('./packages/transformer-variant-group/src/'),
   '@unocss/transformer-compile-class': r('./packages/transformer-compile-class/src/'),

interactive/guides/packages.md

@@ -11,7 +11,8 @@
 | [@unocss/preset-tagify](https://github.com/unocss/unocss/tree/main/packages/preset-tagify) | Enables Tagify Mode for other rules |
 | [@unocss/preset-icons](https://github.com/unocss/unocss/tree/main/packages/preset-icons) | Pure CSS Icons solution powered by Iconify | 
 | [@unocss/preset-web-fonts](https://github.com/unocss/unocss/tree/main/packages/preset-web-fonts) | Web fonts (Google Fonts, etc.) support | 
-| [@unocss/preset-typography](https://github.com/unocss/unocss/tree/main/packages/preset-typography) | The typography preset | 
+| [@unocss/preset-typography](https://github.com/unocss/unocss/tree/main/packages/preset-typography) | The typography preset |
+| [@unocss/preset-rem-to-px](https://github.com/unocss/unocss/tree/main/packages/preset-rem-to-px) | Coverts rem to px for utils |
 | [@unocss/transformer-variant-group](https://github.com/unocss/unocss/tree/main/packages/transformer-variant-group) | Transformer for Windi CSS's variant group feature | 
 | [@unocss/transformer-directives](https://github.com/unocss/unocss/tree/main/packages/transformer-directives) | Transformer for CSS directives like `@apply` | 
 | [@unocss/extractor-pug](https://github.com/unocss/unocss/tree/main/packages/extractor-pug) | Extractor for Pug | 

packages/README.md

@@ -13,6 +13,7 @@
 | [@unocss/preset-icons](./preset-icons) | Pure CSS Icons solution powered by Iconify | ✅ | No |
 | [@unocss/preset-web-fonts](./preset-web-fonts) | Web fonts (Google Fonts, etc.) support | ✅ | No |
 | [@unocss/preset-typography](./preset-typography) | The typography preset | ✅ | No |
+| [@unocss/preset-rem-to-px](./preset-rem-to-px) | Coverts rem to px for utils | No | No |
 | [@unocss/transformer-variant-group](./transformer-variant-group) | Transformer for Windi CSS's variant group feature | ✅ | No |
 | [@unocss/transformer-directives](./transformer-directives) | Transformer for CSS directives like `@apply` | ✅ | No |
 | [@unocss/transformer-compile-class](./transformer-compile-class) | Compile group of classes into one class | ✅ | No |

packages/preset-rem-to-px/README.md

@@ -0,0 +1,53 @@
+# @unocss/preset-rem-to-px
+
+Coverts rem to px for utils.
+
+## Installation
+
+```bash
+npm i -D @unocss/preset-rem-to-px
+```
+
+```ts
+import presetUno from '@unocss/preset-uno'
+import presetRemToPx from '@unocss/preset-rem-to-px'
+
+Unocss({
+  presets: [
+    presetUno(),
+    presetRemToPx()
+  ],
+})
+```
+
+## Usage
+
+```html
+<div class="m-2"></div>
+```
+
+<table><tr><td width="500px" valign="top">
+
+### without
+
+```css
+.m-2 {
+  margin: 0.5rem;
+}
+```
+
+</td><td width="500px" valign="top">
+
+### with
+
+```css
+.m-2 {
+  margin: 8px;
+}
+```
+
+</td></tr></table>
+
+## License
+
+MIT License &copy; 2022-PRESENT [Anthony Fu](https://github.com/antfu)

packages/preset-rem-to-px/build.config.ts

@@ -0,0 +1,12 @@
+import { defineBuildConfig } from 'unbuild'
+
+export default defineBuildConfig({
+  entries: [
+    'src/index',
+  ],
+  clean: true,
+  declaration: true,
+  rollup: {
+    emitCJS: true,
+  },
+})

packages/preset-rem-to-px/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@unocss/preset-rem-to-px",
+  "version": "0.36.0",
+  "description": "Convert all rem to px in utils",
+  "author": "Anthony Fu <anthonyfu117@hotmail.com>",
+  "license": "MIT",
+  "funding": "https://github.com/sponsors/antfu",
+  "homepage": "https://github.com/unocss/unocss/tree/main/packages/preset-rem-to-px#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unocss/unocss.git",
+    "directory": "packages/preset-rem-to-px"
+  },
+  "bugs": {
+    "url": "https://github.com/unocss/unocss/issues"
+  },
+  "keywords": [
+    "unocss",
+    "unocss-preset"
+  ],
+  "sideEffects": false,
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "stub": "unbuild --stub"
+  },
+  "dependencies": {
+    "@unocss/core": "workspace:*"
+  }
+}

packages/preset-rem-to-px/src/index.ts

@@ -0,0 +1,28 @@
+import type { Preset } from '@unocss/core'
+
+const remRE = /^-?[\.\d]+rem$/
+
+export interface RemToPxOptions {
+  /**
+   * 1rem = n px
+   * @default 16
+   */
+  baseFontSize?: number
+}
+
+export default (options: RemToPxOptions = {}): Preset => {
+  const {
+    baseFontSize = 16,
+  } = options
+
+  return {
+    name: '@unocss/preset-rem-to-px',
+    postprocess: (util) => {
+      util.entries.forEach((i) => {
+        const value = i[1]
+        if (value && typeof value === 'string' && remRE.test(value))
+          i[1] = `${+value.slice(0, -3) * baseFontSize}px`
+      })
+    },
+  }
+}

test/preset-rem-to-px.test.ts

@@ -0,0 +1,26 @@
+import { createGenerator } from '@unocss/core'
+import { describe, expect, test } from 'vitest'
+import presetRemToPx from '@unocss/preset-rem-to-px'
+import presetMini from '@unocss/preset-mini'
+
+describe('rem-to-px', () => {
+  const uno = createGenerator({
+    presets: [
+      presetMini(),
+      presetRemToPx(),
+    ],
+  })
+
+  test('should works', async () => {
+    expect((await uno.generate(
+      new Set(['m4', 'mx2', '-p2', 'gap2']),
+      { preflights: false })).css)
+      .toMatchInlineSnapshot(`
+        "/* layer: default */
+        .-p2{padding:-8px;}
+        .m4{margin:16px;}
+        .mx2{margin-left:8px;margin-right:8px;}
+        .gap2{grid-gap:8px;gap:8px;}"
+      `)
+  })
+})

tsconfig.json

@@ -31,6 +31,7 @@
       "@unocss/preset-uno": ["./packages/preset-uno/src/index.ts"],
       "@unocss/preset-web-fonts": ["./packages/preset-web-fonts/src/index.ts"],
       "@unocss/preset-wind": ["./packages/preset-wind/src/index.ts"],
+      "@unocss/preset-rem-to-px": ["./packages/preset-rem-to-px/src/index.ts"],
       "@unocss/shared-integration": ["./packages/shared-integration/src/index.ts"],
       "@unocss/shared-docs": ["./packages/shared-docs/src/index.ts"],
       "@unocss/shared-common": ["./packages/shared-common/src/index.ts"],