containerQuery()

containerQuery<T>(contract, query): string

Create simple or complex container queries with and/or operators.

To provide type safety and ease of use, this function accepts a generic and a contract The generic type defines the possible values for the parameters defined within the contract

Ex: containerQuery<{ foo: boolean }>({ foo: 'var(--foo)' }, { foo: true })

By providing the type constraint and contract, the query parameters will have intellisense on which parameters exist and what their possible values can be

Type Parameters

• T extends CssVarValues = CssVarValues

Parameters

contract

MapLeafNodes<Omit<T, keyof ContainerQueryOptions>, CSSVarFunction>

query

ContainerQueryValues<T> | MultiContainerQuery<T>

Returns

string

Examples

containerQuery(contract, { a: true })
// returns (a: true)

containerQuery(contract, { a: true, b: true })
// returns (a: true) and (b: true)

containerQuery(contract, { operator: 'or', a: true, b: true })
// returns (a: true) or (b: true)

containerQuery(contract, { groups: [{ a: true }, { b: true }] })
// returns (a: true) or (b: true)

containerQuery(contract, { a: ['foo', 'bar'] })
// returns (a: 'foo') or (a: 'bar')

containerQuery(contract, { a: ['foo', 'bar'], b: true })
// returns ((a: 'foo') or (a: 'bar')) and (b: true)

containerQuery(contract, { operator: 'or', a: ['foo', 'bar'], b: true })
// returns ((a: 'foo') or (a: 'bar')) or (b: true)

containerQuery(contract, { groups: [{ a: true, b: true }, { c: true, d: true }] })
// returns ((a: true) and (b: true)) or ((c: true) and (d: true))

containerQuery(contract, { operator: 'and', groups: [{ operator: 'or', a: true, b: true }, { c: true, d: true }] })
// returns ((a: true) or (b: true)) and ((c: true) and (d: true))

containerQuery(contract, { operator: 'and', groups: [{ operator: 'or', a: true, b: true }, { operator: 'or', c: true, d: true }] })
// returns ((a: true) or (b: true)) and ((c: true) or (d: true))