unocss-preset-calc

unocss-preset-calc is a UnoCSS plugin for working with the CSS calc property.

1<!-- Your html -->
2<section>
3  <div class="w-256 h-322 rounded-21 bg-sky-400 ...">
4    <!-- another html tag -->
5  </div>
6  <div class="w-256 h-322 rounded-21 ...">
7    <!-- another html tag -->
8  </div>
9</section>

1/* css output */
2.w-256 {
3  width: calc(256 * clamp(0px, 100vw, 1920px) / var(--width-screen));
4}
5.h-322 {
6  height: calc(322 * clamp(0px, 100vw, 1920px) / var(--width-screen));
7}
8.rounded-21 {
9  border-radius: calc(21 * clamp(0px, 100vw, 1920px) / var(--width-screen));
10}

Instalation

1npm i unocss-preset-calc -D # with npm
2yarn add unocss-preset-calc -D # with yarn
3pnpm add unocss-preset-calc -D # with pnpm

1// unocss.config.js
2import { presetUno, defineConfig } from "unocss";
3import { presetCalc } from "unocss-preset-calc";
4
5export default defineConfig({
6  presets: [
7    presetUno(),
8    presetCalc({
9      /** options */
10    }),
11  ],
12});

Preset Options

1interface Options {
2  /**
3   * @default 0
4   */
5  min?: number;
6  /**
7   * @default 1920
8   */
9  max?: number;
10  /**
11   * @default '--width-screen'
12   */
13  CSSglobalVar?: string;
14
15  /**
16   * @default 375
17   */
18  mobileWidth?: number;
19
20  /**
21   * @default 768
22   */
23  desktopWidth?: number;
24
25  /**
26   * @default {}
27   */
28  container: {
29    padding?: {
30      DEFAULT?: string;
31      sm?: number;
32      md?: number;
33      lg?: number;
34      xl?: number;
35      "2xl"?: number;
36    };
37  };
38}