From a10d21fb369791e5d1c4c6a11e9fd0031dc36bf5 Mon Sep 17 00:00:00 2001 From: Marton Sari Date: Tue, 5 Dec 2023 19:09:56 +0100 Subject: [PATCH 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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