From c996d7d75cbd138e3f6687b2499bffe7abfe8067 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Mon, 24 Apr 2023 15:32:06 +0200 Subject: [PATCH 1/9] Add pixel equivalent to default values table (#15) * add pixels conversation * inline pixel equivalent --------- Co-authored-by: Royer Adames --- README.md | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/README.md b/README.md index 634ca32..886f640 100644 --- a/README.md +++ b/README.md @@ -76,19 +76,19 @@ To stop an element from acting as a container, use the `@container-normal` class By default we ship with the following configured values: -| Name | CSS | -| ------ | ------------------------------- | -| `@xs` | `@container (min-width: 20rem)` | -| `@sm` | `@container (min-width: 24rem)` | -| `@md` | `@container (min-width: 28rem)` | -| `@lg` | `@container (min-width: 32rem)` | -| `@xl` | `@container (min-width: 36rem)` | -| `@2xl` | `@container (min-width: 42rem)` | -| `@3xl` | `@container (min-width: 48rem)` | -| `@4xl` | `@container (min-width: 56rem)` | -| `@5xl` | `@container (min-width: 64rem)` | -| `@6xl` | `@container (min-width: 72rem)` | -| `@7xl` | `@container (min-width: 80rem)` | +| Name | CSS | +| ------ | -------------------------------------------- | +| `@xs` | `@container (min-width: 20rem /* 320px */)` | +| `@sm` | `@container (min-width: 24rem /* 384px */)` | +| `@md` | `@container (min-width: 28rem /* 448px */)` | +| `@lg` | `@container (min-width: 32rem /* 512px */)` | +| `@xl` | `@container (min-width: 36rem /* 576px */)` | +| `@2xl` | `@container (min-width: 42rem /* 672px */)` | +| `@3xl` | `@container (min-width: 48rem /* 768px */)` | +| `@4xl` | `@container (min-width: 56rem /* 896px */)` | +| `@5xl` | `@container (min-width: 64rem /* 1024px */)` | +| `@6xl` | `@container (min-width: 72rem /* 1152px */)` | +| `@7xl` | `@container (min-width: 80rem /* 1280px */)` | You can configure which values are available for this plugin under the `containers` key in your `tailwind.config.js` file: From e53d76e6c5fd45005e30029417feb45683f0de2c Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Tue, 9 May 2023 18:37:37 -0400 Subject: [PATCH 2/9] Create LICENSE --- LICENSE | 21 +++++++++++++++++++++ 1 file changed, 21 insertions(+) create mode 100644 LICENSE diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..f5f9341 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2023 Tailwind Labs + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. From c287ac75d50ad71f7f4813c9007e33029a50358e Mon Sep 17 00:00:00 2001 From: Scott Mebberson <74628+smebberson@users.noreply.github.com> Date: Fri, 28 Jul 2023 20:26:54 +0930 Subject: [PATCH 3/9] Added a note about prefixes (#19) * Added a note about prefixes * Update README.md --------- Co-authored-by: Adam Wathan --- README.md | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/README.md b/README.md index 886f640..0538d51 100644 --- a/README.md +++ b/README.md @@ -72,6 +72,19 @@ To stop an element from acting as a container, use the `@container-normal` class +### With a prefix + +If you have configured Tailwind to use a prefix, make sure to prefix both the `@container` class and any classes where you are using a container query modifier: + +```html +
+ +
+ +
+
+``` + ## Configuration By default we ship with the following configured values: From a10d21fb369791e5d1c4c6a11e9fd0031dc36bf5 Mon Sep 17 00:00:00 2001 From: Marton Sari Date: Tue, 5 Dec 2023 19:09:56 +0100 Subject: [PATCH 4/9] Add missing test (#23) * Add missing test Test result check is missing a class which makes the test give a false negative (false pass). * Update test * Tweak matcher * Update to latest insiders version --------- Co-authored-by: Jordan Pittman --- jest/custom-matchers.js | 7 +++- package.json | 2 +- tests/index.test.ts | 74 +++++++++++++++++++++-------------------- 3 files changed, 45 insertions(+), 38 deletions(-) diff --git a/jest/custom-matchers.js b/jest/custom-matchers.js index 385faf7..1c62850 100644 --- a/jest/custom-matchers.js +++ b/jest/custom-matchers.js @@ -107,6 +107,11 @@ expect.extend({ printWidth: 100, }) } + + function stripped(str) { + return str.replace(/\/\* ! tailwindcss .* \*\//, '').replace(/\s/g, '').replace(/;/g, '') + } + const options = { comment: 'stripped(received) === stripped(argument)', isNot: this.isNot, @@ -116,7 +121,7 @@ expect.extend({ let formattedReceived = format(received) let formattedArgument = format(argument) - const pass = formattedReceived === formattedArgument + const pass = stripped(formattedReceived) === stripped(formattedArgument) const message = pass ? () => { diff --git a/package.json b/package.json index 6b08cb7..4d103fb 100644 --- a/package.json +++ b/package.json @@ -49,7 +49,7 @@ "jest": "^29.1.2", "postcss": "^8.4.17", "prettier": "^2.7.1", - "tailwindcss": "0.0.0-insiders.3011f46", + "tailwindcss": "0.0.0-insiders.7385373", "typescript": "^4.8.4" } } diff --git a/tests/index.test.ts b/tests/index.test.ts index 077b628..8e1f82f 100644 --- a/tests/index.test.ts +++ b/tests/index.test.ts @@ -7,7 +7,7 @@ it('container queries', () => { { raw: html`
@@ -54,111 +54,113 @@ it('container queries', () => { container-type: inline-size; } + .\@container-\[size\] { + container-type: size; + } + + .\@container-\[size\]\/sidebar { + container: sidebar / size; + } + .\@container-normal { container-type: normal; } - .\@container\/sidebar { - container-type: inline-size; - container-name: sidebar; + .\@container-normal\/sidebar { + container: sidebar; } - .\@container-normal\/sidebar { - container-type: normal; - container-name: sidebar; + .\@container\/sidebar { + container: sidebar / inline-size; } - @container (min-width: 123px) { + @container (width >= 123px) { .\@\[123px\]\:underline { text-decoration-line: underline; } } - @container (min-width: 200rem) { + @container (width >= 200rem) { .\@\[200rem\]\:underline { text-decoration-line: underline; } } - @container (min-width: 312px) { + @container (width >= 312px) { .\@\[312px\]\:underline { text-decoration-line: underline; } } - @container container1 (min-width: 320px) { + @container container1 (width >= 320px) { .\@sm\/container1\:underline { text-decoration-line: underline; } } - @container container2 (min-width: 320px) { + @container container2 (width >= 320px) { .\@sm\/container2\:underline { text-decoration-line: underline; } } - @container container10 (min-width: 320px) { + @container container10 (width >= 320px) { .\@sm\/container10\:underline { text-decoration-line: underline; } } - @container (min-width: 320px) { + @container (width >= 320px) { .\@sm\:underline { text-decoration-line: underline; } } - @container container1 (min-width: 768px) { + @container container1 (width >= 768px) { .\@md\/container1\:underline { text-decoration-line: underline; } } - @container container2 (min-width: 768px) { + @container container2 (width >= 768px) { .\@md\/container2\:underline { text-decoration-line: underline; } } - @container container10 (min-width: 768px) { + @container container10 (width >= 768px) { .\@md\/container10\:underline { text-decoration-line: underline; } } - @container (min-width: 768px) { + @container (width >= 768px) { .\@md\:underline { text-decoration-line: underline; } } - @container container1 (min-width: 1024px) { - .\@lg\/container1\:underline { - text-decoration-line: underline; - } + @container container1 (width >= 1024px) { + .\@lg\/container1\:underline, .\@\[1024px\]\/container1\:underline { text-decoration-line: underline; } } - @container container2 (min-width: 1024px) { + @container container2 (width >= 1024px) { .\@lg\/container2\:underline { text-decoration-line: underline; } } - @container container10 (min-width: 1024px) { + @container container10 (width >= 1024px) { .\@lg\/container10\:underline { text-decoration-line: underline; } } - @container (min-width: 1024px) { - .\@lg\:underline { - text-decoration-line: underline; - } + @container (width >= 1024px) { + .\@lg\:underline, .\@\[1024px\]\:underline { text-decoration-line: underline; } @@ -195,49 +197,49 @@ it('should be possible to use default container queries', () => { return run(input, config).then((result) => { expect(result.css).toMatchFormattedCss(css` - @container (min-width: 20rem) { + @container (width >= 20rem) { .\@xs\:underline { text-decoration-line: underline; } } - @container (min-width: 24rem) { + @container (width >= 24rem) { .\@sm\:underline { text-decoration-line: underline; } } - @container (min-width: 28rem) { + @container (width >= 28rem) { .\@md\:underline { text-decoration-line: underline; } } - @container (min-width: 32rem) { + @container (width >= 32rem) { .\@lg\:underline { text-decoration-line: underline; } } - @container (min-width: 48rem) { + @container (width >= 48rem) { .\@3xl\:underline { text-decoration-line: underline; } } - @container (min-width: 64rem) { + @container (width >= 64rem) { .\@5xl\:underline { text-decoration-line: underline; } } - @container (min-width: 72rem) { + @container (width >= 72rem) { .\@6xl\:underline { text-decoration-line: underline; } } - @container (min-width: 80rem) { + @container (width >= 80rem) { .\@7xl\:underline { text-decoration-line: underline; } From 000b61b1ecc0d48ca0aaeffee05a90be18a805c1 Mon Sep 17 00:00:00 2001 From: ti777777 Date: Mon, 22 Jan 2024 19:15:52 +0800 Subject: [PATCH 5/9] Remove redundant end tag (#24) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 0538d51..ad19156 100644 --- a/README.md +++ b/README.md @@ -58,7 +58,7 @@ In addition to using one of the [container sizes](#configuration) provided by de ```html
-
+
From f8d4307afdd3d913c3ddd406334c1a07f427c5b3 Mon Sep 17 00:00:00 2001 From: saibotk Date: Fri, 22 Mar 2024 18:16:49 +0100 Subject: [PATCH 6/9] ci: add provenance to all published packages (#25) This commit adds provenance for all published packages. See the NPM documentation [0]. Provenance will allow people to verify that the packages were actually built on GH Actions and with the content of the corresponding commit. This will help with supply chain security. For this to work, the `id-token` permission was added only where necessary. [0]: https://docs.npmjs.com/generating-provenance-statements --- .github/workflows/release-insiders.yml | 6 +++++- .github/workflows/release.yml | 3 ++- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/.github/workflows/release-insiders.yml b/.github/workflows/release-insiders.yml index 4a91bf2..e0ddd7e 100644 --- a/.github/workflows/release-insiders.yml +++ b/.github/workflows/release-insiders.yml @@ -4,6 +4,10 @@ on: push: branches: [main] +permissions: + contents: read + id-token: write + jobs: build: runs-on: ubuntu-latest @@ -45,6 +49,6 @@ jobs: run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version - name: Publish - run: npm publish --tag insiders + run: npm publish --provenance --tag insiders env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 2b133f8..7108a9a 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -6,6 +6,7 @@ on: permissions: contents: read + id-token: write jobs: build: @@ -44,6 +45,6 @@ jobs: echo "RELEASE_CHANNEL=$(npm run release-channel --silent)" >> $GITHUB_ENV - name: Publish - run: npm publish --tag ${{ env.RELEASE_CHANNEL }} + run: npm publish --provenance --tag ${{ env.RELEASE_CHANNEL }} env: NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} From ef92eba7a7df60659da1ab8dd584346f00efae73 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ra=C3=BAl=20R=20Pearson?= Date: Fri, 27 Dec 2024 05:08:03 +0700 Subject: [PATCH 7/9] Update README.md (#33) All other plugin README's instruct installation as dev dependency, so I assume that's also considered best practice with this one. --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index ad19156..310cc99 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ A plugin for Tailwind CSS v3.2+ that provides utilities for container queries. Install the plugin from npm: ```sh -npm install @tailwindcss/container-queries +npm install -D @tailwindcss/container-queries ``` Then add the plugin to your `tailwind.config.js` file: From 802c5d86295b6195e9d9634ea5ca36715fc52150 Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 13 Feb 2025 06:40:45 -0500 Subject: [PATCH 8/9] Update README.md --- README.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/README.md b/README.md index 310cc99..8b4ab56 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,6 @@ +> [!NOTE] +> Tailwind CSS v4.0+ supports container queries out of the box, so this plugin is only necessary in earlier versions of the framework. + # @tailwindcss/container-queries A plugin for Tailwind CSS v3.2+ that provides utilities for container queries. From 3c3dd3c69944ac48b8cbcb6d537062a0124501bf Mon Sep 17 00:00:00 2001 From: Adam Wathan Date: Thu, 13 Feb 2025 06:42:01 -0500 Subject: [PATCH 9/9] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8b4ab56..fa38a2b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ > [!NOTE] -> Tailwind CSS v4.0+ supports container queries out of the box, so this plugin is only necessary in earlier versions of the framework. +> As of Tailwind CSS v4.0, container queries are supported in the framework by default and this plugin is no longer required. # @tailwindcss/container-queries