From a9f18ccdd1af34def43ea42791f3a79b359f20bf Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Sun, 3 Nov 2024 12:18:39 +0100 Subject: [PATCH 01/14] init fork commit --- .gitignore | 1 + package.json | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.gitignore b/.gitignore index 34c6b93..b606ae9 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,4 @@ node_modules dist yarn.lock package-lock.json +.idea diff --git a/package.json b/package.json index 4d103fb..d261fcc 100644 --- a/package.json +++ b/package.json @@ -1,10 +1,10 @@ { - "name": "@tailwindcss/container-queries", - "version": "0.1.1", + "name": "container-queries-2d", + "version": "1.0.0", "main": "dist/index.js", "types": "dist/index.d.ts", "license": "MIT", - "repository": "https://github.com/tailwindlabs/tailwindcss-container-queries", + "repository": "https://github.com/abrajeux/tailwindcss-container-queries-2d", "publishConfig": { "access": "public" }, From d0f1caeb59004a4b85322157b4f184f79af57b67 Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Sun, 3 Nov 2024 18:54:25 +0100 Subject: [PATCH 02/14] update index --- .gitignore | 2 + src/index.ts | 103 ++++++++++++++++++++++++++++----------------------- 2 files changed, 59 insertions(+), 46 deletions(-) diff --git a/.gitignore b/.gitignore index b606ae9..bfbeaa9 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,5 @@ dist yarn.lock package-lock.json .idea +.yarn +.pnp* \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index 84b9869..390b5ef 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,73 +1,84 @@ import plugin from 'tailwindcss/plugin' -export = plugin( +export default plugin( function containerQueries({ matchUtilities, matchVariant, theme }) { - let values: Record = theme('containers') ?? {} + const values: Record = theme('containers') ?? {} function parseValue(value: string) { - let numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null + const numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null if (numericValue === null) return null 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 }) => { return { 'container-type': value, - 'container-name': modifier, + 'container-name': modifier } - }, + } }, { values: { - DEFAULT: 'inline-size', - normal: 'normal', + DEFAULT: 'size', + 'inline-size': 'inline-size', + normal: 'normal' }, - modifiers: 'any', + 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('@w', cbFor('min-width'), options) + matchVariant('@h', cbFor('min-height'), options) }, { theme: { containers: { + '5xs': '4rem', + '4xs': '8rem', + '3xs': '12rem', + '2xs': '16rem', xs: '20rem', sm: '24rem', md: '28rem', @@ -78,8 +89,8 @@ export = plugin( '4xl': '56rem', '5xl': '64rem', '6xl': '72rem', - '7xl': '80rem', - }, - }, + '7xl': '80rem' + } + } } ) From c0d7f1e66d0e2ca001191bcda7ce85ed4adf5c20 Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Sun, 3 Nov 2024 22:44:27 +0100 Subject: [PATCH 03/14] update README.md --- README.md | 53 +++++++++++++++++++++++++++++++++++++++-------------- 1 file changed, 39 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index ad19156..347add9 100644 --- a/README.md +++ b/README.md @@ -1,13 +1,18 @@ # @tailwindcss/container-queries -A plugin for Tailwind CSS v3.2+ that provides utilities for container queries. +A plugin for Tailwind CSS v3.2+ that provides utilities for container queries both for X and Y values. + +Forked from [tailwindcss/container-queries](https://github.com/tailwindlabs/tailwindcss-container-queries). + +Heavily inspired by [this PR](https://github.com/tailwindlabs/tailwindcss-container-queries/pull/7) from [@kieranm](https://github.com/kieranm). + ## Installation Install the plugin from npm: ```sh -npm install @tailwindcss/container-queries +npm install container-queries-2d ``` Then add the plugin to your `tailwind.config.js` file: @@ -19,7 +24,7 @@ module.exports = { // ... }, plugins: [ - require('@tailwindcss/container-queries'), + require('container-queries-2d'), // ... ], } @@ -27,39 +32,59 @@ module.exports = { ## Usage -Start by marking an element as a container using the `@container` class, and then applying styles based on the size of that container using the container variants like `@md:`, `@lg:`, and `@xl:`: +Start by marking an element as a container using the `@container` class. You can now apply styles based on the container’s width or height using the new `@w-*` and `@h-*` modifiers, in addition to the width-based container breakpoints like `@md:`, `@lg:`, and `@xl:`. + +### Applying Width and Height Breakpoints + +With this version, you can target styles based on either the width or height of the container. Use `@w-*` for width-based breakpoints and `@h-*` for height-based breakpoints. This allows for more granular control over responsive design. + +#### Width-Based Breakpoints +For width-based styles, use the `@w-` prefix: + +```html +
+
+ +
+
+``` + +#### Height-Based Breakpoints +For height-based styles, use the `@h-` prefix: ```html
-
- +
+
``` -By default we provide [container sizes](#configuration) from `@xs` (`20rem`) to `@7xl` (`80rem`). +By default we provide [container sizes](#configuration) from `@5xs` (`4rem`) to `@7xl` (`80rem`). ### Named containers -You can optionally name containers using a `@container/{name}` class, and then include that name in the container variants using classes like `@lg/{name}:underline`: +You can optionally name containers using the `@container/{name}` class and use that name in container variants. With the new width- and height-based prefixes, you can specify named containers as well, such as `@w-lg/{name}` and `@h-lg/{name}`: ```html
-
- +
+ +
``` ### Arbitrary container sizes -In addition to using one of the [container sizes](#configuration) provided by default, you can also create one-off sizes using any arbitrary value: +In addition to using one of the [container sizes](#configuration) provided by default, you can also create one-off sizes using any arbitrary value for the container width or height: ```html
-
- +
+ +
``` @@ -79,7 +104,7 @@ If you have configured Tailwind to use a prefix, make sure to prefix both the `@ ```html
-
+
From 1a4a27ebfa3f7e436b1e83c48b99824aa49fad72 Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Sun, 3 Nov 2024 22:44:38 +0100 Subject: [PATCH 04/14] change package name --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index d261fcc..cf7c1d3 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "container-queries-2d", + "name": "tailwind-container-queries-2d", "version": "1.0.0", "main": "dist/index.js", "types": "dist/index.d.ts", From 0e6a43a196a63e5545b41b95f4689407e764f1d4 Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Sun, 3 Nov 2024 22:55:08 +0100 Subject: [PATCH 05/14] README : add credits section --- README.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 347add9..a706ee9 100644 --- a/README.md +++ b/README.md @@ -1,11 +1,6 @@ # @tailwindcss/container-queries -A plugin for Tailwind CSS v3.2+ that provides utilities for container queries both for X and Y values. - -Forked from [tailwindcss/container-queries](https://github.com/tailwindlabs/tailwindcss-container-queries). - -Heavily inspired by [this PR](https://github.com/tailwindlabs/tailwindcss-container-queries/pull/7) from [@kieranm](https://github.com/kieranm). - +A plugin for Tailwind CSS v3.2+ that provides utilities for container queries both for width and height values. ## Installation @@ -142,3 +137,10 @@ module.exports = { }, } ``` + +## Credits + +This plugin is based on the original work in [tailwindcss/container-queries](https://github.com/tailwindlabs/tailwindcss-container-queries) by [Tailwind Labs](https://github.com/tailwindlabs). + +Special thanks to [@kieranm](https://github.com/kieranm) for the [initial PR](https://github.com/tailwindlabs/tailwindcss-container-queries/pull/7) that inspired height-based queries. + From 95791c004914ea31af8f3aeefd0391c2bc2cf5e9 Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Sun, 3 Nov 2024 22:55:19 +0100 Subject: [PATCH 06/14] package : add credits section --- package.json | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/package.json b/package.json index cf7c1d3..7a03a9c 100644 --- a/package.json +++ b/package.json @@ -4,6 +4,18 @@ "main": "dist/index.js", "types": "dist/index.d.ts", "license": "MIT", + "author": "Alexandre Brajeux", + "description": "Tailwind CSS plugin to enable tailwind container queries for both width and height", + "contributors": [ + { + "name": "Kieran McHugh", + "url": "https://github.com/kieranm" + }, + { + "name": "Alexandre Brajeux", + "url": "https://https://github.com/abrajeux" + } + ], "repository": "https://github.com/abrajeux/tailwindcss-container-queries-2d", "publishConfig": { "access": "public" From 1755258b8f3f243d1ea4b13fc1fe04be90bbda24 Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Sun, 3 Nov 2024 23:09:37 +0100 Subject: [PATCH 07/14] README : breakpoints --- README.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index a706ee9..95eda09 100644 --- a/README.md +++ b/README.md @@ -110,7 +110,11 @@ If you have configured Tailwind to use a prefix, make sure to prefix both the `@ By default we ship with the following configured values: | Name | CSS | -| ------ | -------------------------------------------- | +| ------ |----------------------------------------------| +| `@5xs` | `@container (min-width: 4rem /* 64px */)` | +| `@4xs` | `@container (min-width: 8rem /* 128px */)` | +| `@3xs` | `@container (min-width: 12rem /* 192px */)` | +| `@2xs` | `@container (min-width: 16rem /* 256px */)` | | `@xs` | `@container (min-width: 20rem /* 320px */)` | | `@sm` | `@container (min-width: 24rem /* 384px */)` | | `@md` | `@container (min-width: 28rem /* 448px */)` | @@ -131,7 +135,7 @@ module.exports = { theme: { extend: { containers: { - '2xs': '16rem', + '8xl': '88rem', }, }, }, From b99fba0f3871791a2cbeca16f3a4907441a3844a Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Sun, 3 Nov 2024 23:10:35 +0100 Subject: [PATCH 08/14] 1.0.1 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7a03a9c..a2a2151 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwind-container-queries-2d", - "version": "1.0.0", + "version": "1.0.1", "main": "dist/index.js", "types": "dist/index.d.ts", "license": "MIT", From 4fa1c07332f83290e5dad30e4ed1c582e111e28a Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Sun, 3 Nov 2024 23:13:25 +0100 Subject: [PATCH 09/14] README : name --- README.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 95eda09..639308e 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,7 @@ -# @tailwindcss/container-queries +# Tailwind Container Queries 2D + +[![npm](https://img.shields.io/npm/v/container-queries-2d.svg)](https://www.npmjs.com/package/tailwind-container-queries-2d) +[![npm](https://img.shields.io/npm/dt/container-queries-2d.svg)](https://www.npmjs.com/package/tailwind-container-queries-2d) A plugin for Tailwind CSS v3.2+ that provides utilities for container queries both for width and height values. From a23bdf362c2e32809db1ce4c35d8bc435f572d9c Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Sun, 3 Nov 2024 23:13:34 +0100 Subject: [PATCH 10/14] 1.0.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a2a2151..156b161 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwind-container-queries-2d", - "version": "1.0.1", + "version": "1.0.2", "main": "dist/index.js", "types": "dist/index.d.ts", "license": "MIT", From 26da10acd8bafa7a2fa61b96cef56efa7f5e04ef Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Sun, 3 Nov 2024 23:15:26 +0100 Subject: [PATCH 11/14] 1.0.3 --- README.md | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 639308e..c2eace0 100644 --- a/README.md +++ b/README.md @@ -1,7 +1,7 @@ # Tailwind Container Queries 2D -[![npm](https://img.shields.io/npm/v/container-queries-2d.svg)](https://www.npmjs.com/package/tailwind-container-queries-2d) -[![npm](https://img.shields.io/npm/dt/container-queries-2d.svg)](https://www.npmjs.com/package/tailwind-container-queries-2d) +[![npm](https://img.shields.io/npm/v/tailwind-container-queries-2d.svg)](https://www.npmjs.com/package/tailwind-container-queries-2d) +[![npm](https://img.shields.io/npm/dt/tailwind-container-queries-2d.svg)](https://www.npmjs.com/package/tailwind-container-queries-2d) A plugin for Tailwind CSS v3.2+ that provides utilities for container queries both for width and height values. diff --git a/package.json b/package.json index 156b161..a1a55a3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwind-container-queries-2d", - "version": "1.0.2", + "version": "1.0.3", "main": "dist/index.js", "types": "dist/index.d.ts", "license": "MIT", From bf4329ab02aef21f8456ffb805f136aed48594f1 Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Mon, 4 Nov 2024 11:05:38 +0100 Subject: [PATCH 12/14] 1.0.4 --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c2eace0..4d7d9a0 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ A plugin for Tailwind CSS v3.2+ that provides utilities for container queries bo Install the plugin from npm: ```sh -npm install container-queries-2d +npm install tailwind-container-queries-2d ``` Then add the plugin to your `tailwind.config.js` file: @@ -22,7 +22,7 @@ module.exports = { // ... }, plugins: [ - require('container-queries-2d'), + require('tailwind-container-queries-2d'), // ... ], } From 246503fb2ce6c5caf01833ce3958f72cbbccbcdf Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Mon, 4 Nov 2024 11:05:40 +0100 Subject: [PATCH 13/14] 1.0.4 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index a1a55a3..90d4570 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "tailwind-container-queries-2d", - "version": "1.0.3", + "version": "1.0.4", "main": "dist/index.js", "types": "dist/index.d.ts", "license": "MIT", From 95134b4507206ff9fb2117aebe72515bad4d4b9f Mon Sep 17 00:00:00 2001 From: Alexandre BRAJEUX Date: Thu, 7 Nov 2024 09:46:58 +0100 Subject: [PATCH 14/14] 1.0.5 --- package.json | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 90d4570..8571a10 100644 --- a/package.json +++ b/package.json @@ -1,11 +1,23 @@ { "name": "tailwind-container-queries-2d", - "version": "1.0.4", + "version": "1.0.5", "main": "dist/index.js", "types": "dist/index.d.ts", "license": "MIT", "author": "Alexandre Brajeux", "description": "Tailwind CSS plugin to enable tailwind container queries for both width and height", + "keywords": [ + "tailwindcss", + "tailwind", + "css", + "container-queries", + "container", + "queries", + "2d", + "width", + "height", + "responsive" + ], "contributors": [ { "name": "Kieran McHugh",