lightningcss-plugin-utopia

Utopia for LightningCSS

Use utopia-core to generate fluid typography and scale for LightningCSS. Largely inspired by postcss-utopia.

Configuration

This plugin does not require any configuration in JS. It provides a customAtRules object and an utopiaVisitor that should be added to your LightningCSS configuration.

import { bundleAsync } from 'lightningcss';
import { customAtRules, utopiaVisitor } from 'lightningcss-plugin-utopia';

const result = await bundleAsync({
    // … Your own LightningCSS configuration here
    // Add the customAtRules imported from `lightningcss-plugin-utopia`, plus your own rules if any
    customAtRules: {
        ...customAtRules,
    },
    // Add the utopiaVisitor imported from `lightningcss-plugin-utopia`, plus your own visitors if any
    visitor: composeVisitors([
        utopiaVisitor,
    ]),
});

Usage

In any CSS rule of your choosing, for instance :root, you can use the @utopia at-rule to generate CSS variables.

@utopia spaceScale

See all the options (except prefix) in utopia-core's documentation for calculateSpaceScale().

Source:

:root {
  /*
   * @link https://utopia.fyi/space/calculator
   */
  @utopia spaceScale {
    minWidth: 320;
    maxWidth: 1240;
    minSize: 18;
    maxSize: 20;
    positiveSteps: [1.5, 2, 3, 4, 6];
    negativeSteps: [0.75, 0.5, 0.25];
    customSizes: ['s-l', '2xl-4xl'];
    prefix: "space"; /* Optional, default "space */
  };
}

Result:

:root {
  --space-3xs: clamp(.3125rem,.3125rem + 0vw,.3125rem);
  --space-2xs: clamp(.5625rem,.5408rem + .1087vw,.625rem);
  --space-xs: clamp(.875rem,.8533rem + .1087vw,.9375rem);
  --space-s: clamp(1.125rem,1.0815rem + .2174vw,1.25rem);
  --space-m: clamp(1.6875rem,1.6223rem + .3261vw,1.875rem);
  --space-l: clamp(2.25rem,2.163rem + .4348vw,2.5rem);
  --space-xl: clamp(3.375rem,3.2446rem + .6522vw,3.75rem);
  --space-2xl: clamp(4.5rem,4.3261rem + .8696vw,5rem);
  --space-3xl: clamp(6.75rem,6.4891rem + 1.3043vw,7.5rem);
  --space-3xs-2xs: clamp(.3125rem,.2038rem + .5435vw,.625rem);
  --space-2xs-xs: clamp(.5625rem,.4321rem + .6522vw,.9375rem);
  --space-xs-s: clamp(.875rem,.7446rem + .6522vw,1.25rem);
  --space-s-m: clamp(1.125rem,.8641rem + 1.3043vw,1.875rem);
  --space-m-l: clamp(1.6875rem,1.4049rem + 1.413vw,2.5rem);
  --space-l-xl: clamp(2.25rem,1.7283rem + 2.6087vw,3.75rem);
  --space-xl-2xl: clamp(3.375rem,2.8098rem + 2.8261vw,5rem);
  --space-2xl-3xl: clamp(4.5rem,3.4565rem + 5.2174vw,7.5rem);
  --space-s-l: clamp(1.125rem,.6467rem + 2.3913vw,2.5rem)
}

@utopia typeScale

See all the options (except prefix) in utopia-core's documentation for calculateTypeScale().

Source:

:root {
  /*
   * @link https://utopia.fyi/type/calculator
   */
  @utopia typeScale {
    minWidth: 320;
    maxWidth: 1240;
    minFontSize: 18;
    maxFontSize: 20;
    minTypeScale: 1.2;
    maxTypeScale: 1.25;
    positiveSteps: 5;
    negativeSteps: 2;
    prefix: "type"; /* Optional, default "type" */
  };
}

Result:

:root {
  --type-5: clamp(2.7994rem,2.4462rem + 1.7658vw,3.8147rem);
  --type-4: clamp(2.3328rem,2.0827rem + 1.2504vw,3.0518rem);
  --type-3: clamp(1.944rem,1.771rem + .8651vw,2.4414rem);
  --type-2: clamp(1.62rem,1.5041rem + .5793vw,1.9531rem);
  --type-1: clamp(1.35rem,1.2761rem + .3696vw,1.5625rem);
  --type-0: clamp(1.125rem,1.0815rem + .2174vw,1.25rem);
  --type--1: clamp(.9375rem,.9158rem + .1087vw,1rem);
  --type--2: clamp(.7812rem,.7747rem + .0326vw,.8rem)
}

@utopia clamps

See all the options (except prefix) in utopia-core's documentation for calculateClamps().

Source:

:root {
  /*
   * @link https://utopia.fyi/clamp/calculator
   */
  @utopia clamps {
    minWidth: 320;
    maxWidth: 1240;
    pairs: [[16, 48], [32, 40]];
    prefix: "step"; /* Optional, default "step" */
  };
}

Result:

:root {
  --step-16-48: clamp(1rem,.3043rem + 3.4783vw,3rem);
  --step-32-40: clamp(2rem,1.8261rem + .8696vw,2.5rem)
}

Roadmap

This plugin fits my needs for now, I don't have further plans. I may update it occasionally; feel free to open issues or pull requests.

Some ideas if you want to contribute:

• Implement stricter parsing rules
• Add a LightningCSS function for Utopia's calculateClamp() function
• Add unit tests
• Add type declarations
• Fix the bug that causes the parent rule (like :root) to be closed and reopened