Handling multi-levels variables?

[dtvn]

I have this vars:

const vars = {
	fontset: {
		size: '14px',
		body: '"Mali", cursive',
		head: '"Itim", cursive'
	}
}

module.exports = {
	plugins: {
		'postcss-advanced-variables': {
			variables: vars
		}
	}
}

How do I use fontset in css files? More exactly, does PAV supports this feature?

I think it's called map in SASS.

[cliffordp]

Yes, I want this as well.

[gael-boyenval]

@dtvn : did you tried to add the rest as a string or a template ?

const vars = {
	fontset: `(
		size: '14px',
		body: '"Mali", cursive',
		head: '"Itim", cursive'
	)`
}

module.exports = {
	plugins: {
		'postcss-advanced-variables': {
			variables: vars
		}
	}
}

[cliffordp]

FYI: I used Tailwind's theme to do this instead: https://tailwindcss.com/docs/theme/