diff --git a/alias.ts b/alias.ts index 1110c09ccb..b7ad39d9c7 100644 --- a/alias.ts +++ b/alias.ts @@ -18,6 +18,7 @@ export const alias: Record = { '@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/'), diff --git a/interactive/guides/packages.md b/interactive/guides/packages.md index 21d5487e73..fa93e0b824 100644 --- a/interactive/guides/packages.md +++ b/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 | diff --git a/packages/README.md b/packages/README.md index 0048121f03..5b06eb9bef 100644 --- a/packages/README.md +++ b/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 | diff --git a/packages/preset-rem-to-px/README.md b/packages/preset-rem-to-px/README.md new file mode 100644 index 0000000000..c04dbd9cf5 --- /dev/null +++ b/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 +
+``` + +
+ +### without + +```css +.m-2 { + margin: 0.5rem; +} +``` + + + +### with + +```css +.m-2 { + margin: 8px; +} +``` + +
+ +## License + +MIT License © 2022-PRESENT [Anthony Fu](https://github.com/antfu) diff --git a/packages/preset-rem-to-px/build.config.ts b/packages/preset-rem-to-px/build.config.ts new file mode 100644 index 0000000000..868e79fab0 --- /dev/null +++ b/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, + }, +}) diff --git a/packages/preset-rem-to-px/package.json b/packages/preset-rem-to-px/package.json new file mode 100644 index 0000000000..012b714d4b --- /dev/null +++ b/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 ", + "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:*" + } +} diff --git a/packages/preset-rem-to-px/src/index.ts b/packages/preset-rem-to-px/src/index.ts new file mode 100644 index 0000000000..e4763d98fc --- /dev/null +++ b/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` + }) + }, + } +} diff --git a/test/preset-rem-to-px.test.ts b/test/preset-rem-to-px.test.ts new file mode 100644 index 0000000000..26101097a9 --- /dev/null +++ b/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;}" + `) + }) +}) diff --git a/tsconfig.json b/tsconfig.json index 57538f032b..e7a0d7e08d 100644 --- a/tsconfig.json +++ b/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"],