[postcss-logical] Add logical units

[thewilkybarkid]

What would you want to propose?

Add support for the vb and vi units from the CSS Values and Units Module Level 4 spec (the logical equivalents of vh and vw).

This would allow for the likes of block-size: 100vb.

Suggested solution

Expand postcss-logical to support logical units.

Additional context

No response

Validations

• Follow our Code of Conduct
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• I'm willing to open a PR

[romainmenke]

This can be done at a token level for both at-rules and declaration values.

• tokenize with @csstools/css-tokenizer
• iterate over all tokens
• replace dimension token units when needed

[romainmenke]

Hi @thewilkybarkid

There is now a dedicated plugin for this feature : https://www.npmjs.com/package/@csstools/postcss-logical-viewport-units

It will be part of the upcoming major release of postcss-preset-env.

Thank you again for requesting this.

[niklasgrewe]

@romainmenke

It will be part of the upcoming major release of postcss-preset-env

do you mean 8.0.0 or 9.0.0? I am currently using 8.0.1 and can confirm that the additional plugin postcss-logical-viewport-units is not yet part of postcss-preset-env

[romainmenke]

@niklasgrewe that is weird 🤔
It definitely is part of postcss-preset-env : https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/scripts/plugins-data.json#L148-L150

You can also see this on the playground : https://preset-env.cssdb.org/playground/

body {
	width: 20vi
}

---

Can you check a few things?

1. the result of npm why to check if the plugin is present:

npm why @csstools/postcss-logical-viewport-units

2. running postcss-preset-env with the debug flag.

const postcssPresetEnv = require('postcss-preset-env');

module.exports = {
	plugins: [
		postcssPresetEnv({
			"debug": true,
			"browsers": [
				"> 0.2% and not dead"
			]
		})
	]
}

---

side note :
It is always better to open a new issue :)
Closed issues are hard to keep track of and GitHub automatically cross links issues.

[niklasgrewe]

@romainmenke

the result of npm why to check if the plugin is present:

@csstools/postcss-logical-viewport-units@1.0.2 dev
node_modules/@csstools/postcss-logical-viewport-units
  @csstools/postcss-logical-viewport-units@"^1.0.0" from postcss-preset-env@8.0.1
  node_modules/postcss-preset-env
    dev postcss-preset-env@"^8.0.1" from the root project

running postcss-preset-env with the debug flag.

i get the following output:

Using features from Stage 2 (default) [postcss-preset-env]
⚠    font-format-keywords with stage 1 has been disabled [postcss-preset-env]
⚠    prefers-color-scheme-query has been disabled by "enableClientSidePolyfills: false". [postcss-preset-env]
⚠    nesting-rules with stage 1 has been disabled [postcss-preset-env]
⚠    custom-selectors with stage 1 has been disabled [postcss-preset-env]
⚠    focus-visible-pseudo-class has been disabled by "enableClientSidePolyfills: false". [postcss-preset-env]
⚠    focus-within-pseudo-class has been disabled by "enableClientSidePolyfills: false". [postcss-preset-env]
⚠    blank-pseudo-class has been disabled by "enableClientSidePolyfills: false". [postcss-preset-env]
⚠    has-pseudo-class has been disabled by "enableClientSidePolyfills: false". [postcss-preset-env]
⚠  Adding area[href] fallbacks for ":any-link" support in Edge and IE. [postcss-preset-env]
⚠  Enabling the following feature(s): [postcss-preset-env]
⚠    all-property [postcss-preset-env]
⚠    any-link-pseudo-class [postcss-preset-env]
⚠    autoprefixer [postcss-preset-env]
⚠    break-properties [postcss-preset-env]
⚠    cascade-layers [postcss-preset-env]
⚠    case-insensitive-attributes [postcss-preset-env]
⚠    clamp [postcss-preset-env]
⚠    color-function [postcss-preset-env]
⚠    color-functional-notation [postcss-preset-env]
⚠    custom-media-queries [postcss-preset-env]
⚠    custom-properties [postcss-preset-env]
⚠    dir-pseudo-class [postcss-preset-env]
⚠    display-two-values [postcss-preset-env]
⚠    double-position-gradients [postcss-preset-env]
⚠    float-clear-logical-values [postcss-preset-env]
⚠    font-variant-property [postcss-preset-env]
⚠    gap-properties [postcss-preset-env]
⚠    hexadecimal-alpha-notation [postcss-preset-env]
⚠    hwb-function [postcss-preset-env]
⚠    ic-unit [postcss-preset-env]
⚠    image-set-function [postcss-preset-env]
⚠    is-pseudo-class [postcss-preset-env]
⚠    lab-function [postcss-preset-env]
⚠    logical-properties-and-values [postcss-preset-env]
⚠    logical-resize [postcss-preset-env]
⚠    logical-viewport-units [postcss-preset-env]
⚠    media-queries-aspect-ratio-number-values [postcss-preset-env]
⚠    media-query-ranges [postcss-preset-env]
⚠    nested-calc [postcss-preset-env]
⚠    not-pseudo-class [postcss-preset-env]
⚠    oklab-function [postcss-preset-env]
⚠    opacity-percentage [postcss-preset-env]
⚠    overflow-property [postcss-preset-env]
⚠    overflow-wrap-property [postcss-preset-env]
⚠    place-properties [postcss-preset-env]
⚠    rebeccapurple-color [postcss-preset-env]
⚠    scope-pseudo-class [postcss-preset-env]
⚠    stepped-value-functions [postcss-preset-env]
⚠    system-ui-font-family [postcss-preset-env]
⚠    text-decoration-shorthand [postcss-preset-env]
⚠    trigonometric-functions [postcss-preset-env]
⚠    unset-value [postcss-preset-env]

i created a global.css test file with:

.foo {
  height: 70svh;
  background-color: black;
}

output:

.foo {
  height: 70svh;
  background-color: black;
}

expected output:

.foo {
  height: 70svh;
  height: 70vh;
  background-color: black;
}

[romainmenke]

@niklasgrewe svh is not a logical unit :)
Only vi and vb are logical units.

[niklasgrewe]

@romainmenke sorry my mistake, but does postcss-present-env already support svh and dvh? Is there already a postcss-plugin for this?

[romainmenke]

No it does not, but I don't think this is possible either.
There is no way to provide a meaningful and correct fallback value for this that will work for all users of postcss-preset-env