Converting inset to top, right, bottom, left breaks with custom properties

[craftedsystems]

Bug description

If a custom property is used for inset that represents the value for multiple offsets, the converted CSS is broken.

Actual CSS showing the translated custom property value:

p {
  top: 0 1rem 2rem 1rem;
  right: 0 1rem 2rem 1rem;
  bottom: 0 1rem 2rem 1rem;
  left: 0 1rem 2rem 1rem;
}

Source CSS

p {
--offset: 0 1rem 2rem 1rem;
inset: var(--offset);
}

Expected CSS

p {
--offset: 0 1rem 2rem 1rem;
inset: var(--offset);
}

Actual CSS

p {
--offset: 0 1rem 2rem 1rem;
top: var(--offset);
right: var(--offset);
bottom: var(--offset);
left: var(--offset);
}

Playgound example

playground example

Does it happen with npx @csstools/csstools-cli <plugin-name> minimal-example.css?

None

Debug output

No response

Extra config

This is the browserslist we use: ["> 1%", "last 3 versions", "not IE < 12", "not dead"]

What plugin are you experiencing this issue on?

No response

Plugin version

10.1.4

What OS are you experiencing this on?

No response

Node Version

23.7.0

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 bug?

• I'm willing to open a PR

[romainmenke]

Hi @craftedsystems,

Thank you for reporting this.
I fear too many people depend on the current behavior and that we can't change this.

However we might be able to add some heuristic and/or config.

We could for example scan the CSS for the --offset custom prop and check if it has 1 or more values. When it has more than 1 value we could ignore it. This only works when the --offset prop is part of the same bundle and processed at the same time as the logical prop.

A config option might be added to ignore all logical props that contain values with custom props.

Both options will leave you with broken CSS in the older browser versions you are still targeting.

The only way to have working fallbacks for those older versions is to only use a single value in --offset or to write inset: var(--a) var(--b) var(--c) var(--d).

[craftedsystems]

Thanks @romainmenke!
FYI - we were able to fix this in our project by removing some browsers from the supported browsers list. Now they all support inset. ✅