Support “custom units”

[nicksrandall]

CSS Custom Units proposal was recently accepted and it would be awesome if parcel CSS allowed us to use that syntax today and then compile it down to what is currently supported by browsers.

See: w3c/csswg-drafts#7379 (comment)

[devongovett]

Interesting. Perhaps a bit early to implement, but I look forward to seeing the spec.

[devongovett]

This could be implemented as a custom transform now: https://lightningcss.dev/transforms.html. There's an example of this in the tests:

lightningcss/node/test/visitor.test.mjs

Lines 34 to 86 in 6fb7729

	test('custom units', () => {
	// https://github.com/csstools/custom-units
	let res = transform({
	filename: 'test.css',
	minify: true,
	code: Buffer.from(`
	.foo {
	--step: .25rem;
	font-size: 3--step;
	}
	`),
	visitor: {
	Token: {
	dimension(token) {
	if (token.unit.startsWith('--')) {
	return {
	type: 'function',
	value: {
	name: 'calc',
	arguments: [
	{
	type: 'token',
	value: {
	type: 'number',
	value: token.value
	}
	},
	{
	type: 'token',
	value: {
	type: 'delim',
	value: '*'
	}
	},
	{
	type: 'var',
	value: {
	name: {
	ident: token.unit
	}
	}
	}
	]
	}
	}
	}
	}
	}
	}
	});
	assert.equal(res.code.toString(), '.foo{--step:.25rem;font-size:calc(3*var(--step))}');
	});

.

I'll leave this open to implement natively once it appears in a spec though.