Skip to content

📐 Add support for min-height container queries #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 3 commits into from
Closed

📐 Add support for min-height container queries #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e12c062
Add support for min-height container queries
kieranm Jan 14, 2023
e695e26
Switch to container-type: size by default
kieranm Jan 15, 2023
c8eae38
Remove @ prefix from new variants
kieranm Jan 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
80 changes: 44 additions & 36 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,45 @@ export = plugin(
return parseFloat(value)
}

const cbFor =
(selector: string) =>
(value = '', extra: { modifier: string | null }) => {
const parsed = parseValue(value)

return parsed !== null ? `@container ${extra.modifier ?? ''} (${selector}: ${value})` : []
}

const options = {
values,
sort(
aVariant: { value: string; modifier: string | null },
zVariant: { value: string; modifier: string | null }
) {
const a = parseFloat(aVariant.value)
const z = parseFloat(zVariant.value)

if (a === null || z === null) return 0

// Sort values themselves regardless of unit
if (a - z !== 0) return a - z

const aLabel = aVariant.modifier ?? ''
const zLabel = zVariant.modifier ?? ''

// Explicitly move empty labels to the end
if (aLabel === '' && zLabel !== '') {
return 1
} else if (aLabel !== '' && zLabel === '') {
return -1
}

// Sort labels alphabetically in the English locale
// We are intentionally overriding the locale because we do not want the sort to
// be affected by the machine's locale (be it a developer or CI environment)
return aLabel.localeCompare(zLabel, 'en', { numeric: true })
},
}

matchUtilities(
{
'@container': (value, { modifier }) => {
Expand All @@ -22,48 +61,17 @@ export = plugin(
},
{
values: {
DEFAULT: 'inline-size',
DEFAULT: 'size',
Copy link
Author

@kieranm kieranm Jan 15, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Height-based queries will not work unless using container-type: size. I think it would be confusing if height-based queries didn't work out of the box, so I would propose changing the default to size.

My understanding is that inline-size tells the browser only to consider the inline (width) axis, but size tells it to consider both axes. I'm not sure why this distinction is necessary.

I can't think of a good reason not to use size as the default - and I don't think this change is breaking (size feels like a superset of inline-size), but my knowledge is limited.

If this will be a problem then maybe we need another approach.

'inline-size': 'inline-size',
normal: 'normal',
},
modifiers: 'any',
}
)

matchVariant(
'@',
(value = '', { modifier }) => {
let parsed = parseValue(value)

return parsed !== null ? `@container ${modifier ?? ''} (min-width: ${value})` : []
},
{
values,
sort(aVariant, zVariant) {
let a = parseFloat(aVariant.value)
let z = parseFloat(zVariant.value)

if (a === null || z === null) return 0

// Sort values themselves regardless of unit
if (a - z !== 0) return a - z

let aLabel = aVariant.modifier ?? ''
let zLabel = zVariant.modifier ?? ''

// Explicitly move empty labels to the end
if (aLabel === '' && zLabel !== '') {
return 1
} else if (aLabel !== '' && zLabel === '') {
return -1
}

// Sort labels alphabetically in the English locale
// We are intentionally overriding the locale because we do not want the sort to
// be affected by the machine's locale (be it a developer or CI environment)
return aLabel.localeCompare(zLabel, 'en', { numeric: true })
},
}
)
matchVariant<string>('@', cbFor('min-width'), options)
matchVariant<string>('container-min-w', cbFor('min-width'), options)
matchVariant<string>('container-min-h', cbFor('min-height'), options)
},
{
theme: {
Expand Down
236 changes: 233 additions & 3 deletions tests/index.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,23 @@ it('container queries', () => {
{
raw: html`
<div
class="@container @container-normal @container/sidebar @container-normal/sidebar @container-[size]/sidebar"
class="@container @container-normal @container/sidebar @container-normal/sidebar @container-[inline-size]/sidebar"
>
<div class="@md:underline"></div>
<div class="@md/container1:underline"></div>
<div class="@md/container2:underline"></div>
<div class="@md/container10:underline"></div>

<div class="container-min-w-md:underline"></div>
<div class="container-min-w-md/container1:underline"></div>
<div class="container-min-w-md/container2:underline"></div>
<div class="container-min-w-md/container10:underline"></div>

<div class="container-min-h-md:underline"></div>
<div class="container-min-h-md/container1:underline"></div>
<div class="container-min-h-md/container2:underline"></div>
<div class="container-min-h-md/container10:underline"></div>

<div class="@sm:underline"></div>
<div class="@sm/container1:underline"></div>
<div class="@sm/container2:underline"></div>
Expand All @@ -30,6 +40,16 @@ it('container queries', () => {
<div class="@[312px]:underline"></div>
<div class="@[200rem]:underline"></div>
<div class="@[123px]:underline"></div>

<div class="container-min-w-[312px]:underline"></div>
<div class="container-min-w-[200rem]:underline"></div>
<div class="container-min-w-[123px]:underline"></div>
<div class="container-min-w-[123px]/container1:underline"></div>

<div class="container-min-h-[312px]:underline"></div>
<div class="container-min-h-[200rem]:underline"></div>
<div class="container-min-h-[123px]:underline"></div>
<div class="container-min-h-[123px]/container1:underline"></div>
</div>
`,
},
Expand All @@ -51,15 +71,15 @@ it('container queries', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
.\@container {
container-type: inline-size;
container-type: size;
}

.\@container-normal {
container-type: normal;
}

.\@container\/sidebar {
container-type: inline-size;
container-type: size;
container-name: sidebar;
}

Expand Down Expand Up @@ -163,6 +183,102 @@ it('container queries', () => {
text-decoration-line: underline;
}
}

@container container1 (min-width: 123px) {
.container-min-w-\[123px\]\/container1\:underline {
text-decoration-line: underline;
}
}

@container (min-width: 123px) {
.container-min-w-\[123px\]\:underline {
text-decoration-line: underline;
}
}

@container (min-width: 200rem) {
.container-min-w-\[200rem\]\:underline {
text-decoration-line: underline;
}
}

@container (min-width: 312px) {
.container-min-w-\[312px\]\:underline {
text-decoration-line: underline;
}
}

@container container1 (min-width: 768px) {
.container-min-w-md\/container1\:underline {
text-decoration-line: underline;
}
}

@container container2 (min-width: 768px) {
.container-min-w-md\/container2\:underline {
text-decoration-line: underline;
}
}

@container container10 (min-width: 768px) {
.container-min-w-md\/container10\:underline {
text-decoration-line: underline;
}
}

@container (min-width: 768px) {
.container-min-w-md\:underline {
text-decoration-line: underline;
}
}

@container container1 (min-height: 123px) {
.container-min-h-\[123px\]\/container1\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 123px) {
.container-min-h-\[123px\]\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 200rem) {
.container-min-h-\[200rem\]\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 312px) {
.container-min-h-\[312px\]\:underline {
text-decoration-line: underline;
}
}

@container container1 (min-height: 768px) {
.container-min-h-md\/container1\:underline {
text-decoration-line: underline;
}
}

@container container2 (min-height: 768px) {
.container-min-h-md\/container2\:underline {
text-decoration-line: underline;
}
}

@container container10 (min-height: 768px) {
.container-min-h-md\/container10\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 768px) {
.container-min-h-md\:underline {
text-decoration-line: underline;
}
}
`)
})
})
Expand All @@ -181,6 +297,24 @@ it('should be possible to use default container queries', () => {
<div class="@6xl:underline"></div>
<div class="@3xl:underline"></div>
<div class="@5xl:underline"></div>

<div class="container-min-w-md:underline"></div>
<div class="container-min-w-lg:underline"></div>
<div class="container-min-w-sm:underline"></div>
<div class="container-min-w-xs:underline"></div>
<div class="container-min-w-7xl:underline"></div>
<div class="container-min-w-6xl:underline"></div>
<div class="container-min-w-3xl:underline"></div>
<div class="container-min-w-5xl:underline"></div>

<div class="container-min-h-md:underline"></div>
<div class="container-min-h-lg:underline"></div>
<div class="container-min-h-sm:underline"></div>
<div class="container-min-h-xs:underline"></div>
<div class="container-min-h-7xl:underline"></div>
<div class="container-min-h-6xl:underline"></div>
<div class="container-min-h-3xl:underline"></div>
<div class="container-min-h-5xl:underline"></div>
</div>
`,
},
Expand Down Expand Up @@ -242,6 +376,102 @@ it('should be possible to use default container queries', () => {
text-decoration-line: underline;
}
}

@container (min-width: 20rem) {
.container-min-w-xs\:underline {
text-decoration-line: underline;
}
}

@container (min-width: 24rem) {
.container-min-w-sm\:underline {
text-decoration-line: underline;
}
}

@container (min-width: 28rem) {
.container-min-w-md\:underline {
text-decoration-line: underline;
}
}

@container (min-width: 32rem) {
.container-min-w-lg\:underline {
text-decoration-line: underline;
}
}

@container (min-width: 48rem) {
.container-min-w-3xl\:underline {
text-decoration-line: underline;
}
}

@container (min-width: 64rem) {
.container-min-w-5xl\:underline {
text-decoration-line: underline;
}
}

@container (min-width: 72rem) {
.container-min-w-6xl\:underline {
text-decoration-line: underline;
}
}

@container (min-width: 80rem) {
.container-min-w-7xl\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 20rem) {
.container-min-h-xs\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 24rem) {
.container-min-h-sm\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 28rem) {
.container-min-h-md\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 32rem) {
.container-min-h-lg\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 48rem) {
.container-min-h-3xl\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 64rem) {
.container-min-h-5xl\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 72rem) {
.container-min-h-6xl\:underline {
text-decoration-line: underline;
}
}

@container (min-height: 80rem) {
.container-min-h-7xl\:underline {
text-decoration-line: underline;
}
}
`)
})
})