From 806591e849e05ecba2e3aa0d8b863e6d35d8a176 Mon Sep 17 00:00:00 2001 From: Jonathan Reinink Date: Wed, 19 Oct 2022 14:13:47 -0400 Subject: [PATCH 1/7] Improve documentation in readme --- README.md | 84 +++++++++++++++++++++++++++++++++---------------------- 1 file changed, 50 insertions(+), 34 deletions(-) diff --git a/README.md b/README.md index 85fe116..3672d4b 100644 --- a/README.md +++ b/README.md @@ -27,47 +27,68 @@ 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:`: + ```html -
- -
-
+
+ +
+``` + +By default we provide [container sizes](#configuration) from `@xs` (`20rem`) 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/main:underline`: + +```html +
+ +
+ +
``` -### Container types +### Arbitrary container sizes -| Class | css | -| --------------------------- | ------------------------------------------------------- | -| `@container` | `container-type: inline-size;` | -| `@container/sidebar` | `container-type: inline-size; container-name: sidebar;` | -| `@container-normal` | `container-type: normal;` | -| `@container-normal/sidebar` | `container-type: inline-size; container-name: sidebar;` | +In addition to using one of the [container sizes](#configuration) provided by default, you can also create one-off sizes using any arbitrary value: + +```html +
+
+ +
+
+``` + +### Removing a container + +To stop an element from acting as a container, use the `@container-normal` class. + +
+ +
## Configuration By default we ship with the following configured values: -| Name | Value | -| ----- | ------- | -| `xs` | `20rem` | -| `sm` | `24rem` | -| `md` | `28rem` | -| `lg` | `32rem` | -| `xl` | `36rem` | -| `2xl` | `42rem` | -| `3xl` | `48rem` | -| `4xl` | `56rem` | -| `5xl` | `64rem` | -| `6xl` | `72rem` | -| `7xl` | `80rem` | +| 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)` | You can configure which values are available for this plugin under the `containers` key in your `tailwind.config.js` file: @@ -77,12 +98,7 @@ module.exports = { theme: { extend: { containers: { - xs: '20rem', - sm: '24rem', - md: '28rem', - lg: '32rem', - xl: '36rem', - // etc... + `2xs`: '16rem', }, }, }, From 493e1f05d79a6ed09f20e8580296ed1a20f89724 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ba=C5=9Far=20=C3=96zcan?= Date: Thu, 20 Oct 2022 00:32:11 +0200 Subject: [PATCH 2/7] change example class name to variable name (#2) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 3672d4b..f23e277 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ By default we provide [container sizes](#configuration) from `@xs` (`20rem`) to ### 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/main:underline`: +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`: ```html
From fc4417130271ef6213ae52789907fc247ce7b965 Mon Sep 17 00:00:00 2001 From: Mohit Yadav Date: Thu, 5 Jan 2023 00:02:36 +0530 Subject: [PATCH 3/7] Fix json syntax for customizing container size example (#6) --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f23e277..634ca32 100644 --- a/README.md +++ b/README.md @@ -98,7 +98,7 @@ module.exports = { theme: { extend: { containers: { - `2xs`: '16rem', + '2xs': '16rem', }, }, }, From 3a793f827358adfa17b0f385a8b80eff6c9c6b6a Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 31 Mar 2023 16:32:11 +0200 Subject: [PATCH 4/7] Ensure types are published to npm (#11) * improve CI - Ensure that we use a the cache modules consistently - Ensure that `npm run build` is executed (which generates the types) - Make CI jobs consistent between workflows * update changelog --- .github/workflows/nodejs.yml | 13 +++------ .github/workflows/prepare-release.yml | 40 +++++++++++--------------- .github/workflows/release-insiders.yml | 19 ++++++------ .github/workflows/release.yml | 25 ++++++---------- CHANGELOG.md | 4 ++- 5 files changed, 42 insertions(+), 59 deletions(-) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 9be3c9c..9882461 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -28,21 +28,16 @@ jobs: node-version: ${{ matrix.node-version }} - name: Use cached node_modules - id: cache uses: actions/cache@v3 with: path: node_modules - key: nodeModules-${{ hashFiles('./package.json') }}-${{ matrix.node-version }} - restore-keys: | - nodeModules- + key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }} - name: Install dependencies - if: steps.cache.outputs.cache-hit != 'true' run: npm install - env: - CI: true + + - name: Build + run: npm run build - name: Test run: npm test - env: - CI: true diff --git a/.github/workflows/prepare-release.yml b/.github/workflows/prepare-release.yml index 0ec76a4..bf796a7 100644 --- a/.github/workflows/prepare-release.yml +++ b/.github/workflows/prepare-release.yml @@ -15,7 +15,7 @@ permissions: jobs: prepare: permissions: - contents: write # for softprops/action-gh-release to create GitHub release + contents: write # for softprops/action-gh-release to create GitHub release runs-on: ubuntu-latest @@ -31,16 +31,21 @@ jobs: with: node-version: ${{ matrix.node-version }} registry-url: 'https://registry.npmjs.org' - # cache: 'npm' - # - # - name: Use cached node_modules - # id: cache - # uses: actions/cache@v3 - # with: - # path: node_modules - # key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }} - # restore-keys: | - # nodeModules- + + - name: Use cached node_modules + uses: actions/cache@v3 + with: + path: node_modules + key: nodeModules-${{ hashFiles('**/package.json') }}-${{ matrix.node-version }} + + - name: Install dependencies + run: npm install + + - name: Build + run: npm run build + + - name: Test + run: npm test - name: Resolve version id: vars @@ -54,20 +59,9 @@ jobs: echo "$RELEASE_NOTES" >> $GITHUB_ENV echo "EOF" >> $GITHUB_ENV - - name: Install dependencies - # if: steps.cache.outputs.cache-hit != 'true' - run: npm install - env: - CI: true - - - name: Test - run: npm test - env: - CI: true - - name: Release uses: softprops/action-gh-release@v1 with: draft: true tag_name: ${{ env.TAG_NAME }} - body: ${{ env.RELEASE_NOTES }} + body: ${{ env.RELEASE_NOTES }} diff --git a/.github/workflows/release-insiders.yml b/.github/workflows/release-insiders.yml index c6ced95..e50ab5d 100644 --- a/.github/workflows/release-insiders.yml +++ b/.github/workflows/release-insiders.yml @@ -22,30 +22,29 @@ jobs: registry-url: 'https://registry.npmjs.org' - name: Use cached node_modules - id: cache uses: actions/cache@v3 with: path: node_modules - key: nodeModules-${{ hashFiles('**/package.json') }}-${{ matrix.node-version }} - restore-keys: | - nodeModules- + key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }} - name: Install dependencies - if: steps.cache.outputs.cache-hit != 'true' run: npm install - env: - CI: true + + - name: Build + run: npm run build + + - name: Test + run: npm test - name: Resolve version id: vars - run: | + run: | echo "SHA_SHORT=$(git rev-parse --short HEAD)" >> $GITHUB_ENV - - name: "Version based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}" + - name: 'Version based on commit: 0.0.0-insiders.${{ env.SHA_SHORT }}' run: npm version 0.0.0-insiders.${{ env.SHA_SHORT }} --force --no-git-tag-version - name: Publish run: npm publish --tag insiders env: - CI: true NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 67d7f37..be9b2b9 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -23,27 +23,21 @@ jobs: with: node-version: ${{ matrix.node-version }} registry-url: 'https://registry.npmjs.org' - # cache: 'npm' - # - # - name: Use cached node_modules - # id: cache - # uses: actions/cache@v3 - # with: - # path: node_modules - # key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }} - # restore-keys: | - # nodeModules- + + - name: Use cached node_modules + uses: actions/cache@v3 + with: + path: node_modules + key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }} - name: Install dependencies - # if: steps.cache.outputs.cache-hit != 'true' run: npm install - env: - CI: true + + - name: Build + run: npm run build - name: Test run: npm test - env: - CI: true - name: Calculate environment variables run: | @@ -52,5 +46,4 @@ jobs: - name: Publish run: npm publish --tag ${{ env.RELEASE_CHANNEL }} env: - CI: true NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/CHANGELOG.md b/CHANGELOG.md index 57071b4..74426e5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,7 +7,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] -- Nothing yet! +### Fixed + +- Ensure types are published to npm ([#11](https://github.com/tailwindlabs/tailwindcss-container-queries/pull/11)) ## [0.1.0] - 2022-10-19 From 7404e48ed336e835ab704b193116f0f9b7c9c256 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 31 Mar 2023 16:35:16 +0200 Subject: [PATCH 5/7] fix `hashFiles` arguments in CI --- .github/workflows/nodejs.yml | 2 +- .github/workflows/prepare-release.yml | 2 +- .github/workflows/release-insiders.yml | 2 +- .github/workflows/release.yml | 2 +- 4 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml index 9882461..743aafe 100644 --- a/.github/workflows/nodejs.yml +++ b/.github/workflows/nodejs.yml @@ -31,7 +31,7 @@ jobs: uses: actions/cache@v3 with: path: node_modules - key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }} + key: nodeModules-${{ hashFiles('./package-lock.json') }}-${{ matrix.node-version }} - name: Install dependencies run: npm install diff --git a/.github/workflows/prepare-release.yml b/.github/workflows/prepare-release.yml index bf796a7..ddfa3a2 100644 --- a/.github/workflows/prepare-release.yml +++ b/.github/workflows/prepare-release.yml @@ -36,7 +36,7 @@ jobs: uses: actions/cache@v3 with: path: node_modules - key: nodeModules-${{ hashFiles('**/package.json') }}-${{ matrix.node-version }} + key: nodeModules-${{ hashFiles('./package-lock.json') }}-${{ matrix.node-version }} - name: Install dependencies run: npm install diff --git a/.github/workflows/release-insiders.yml b/.github/workflows/release-insiders.yml index e50ab5d..4a91bf2 100644 --- a/.github/workflows/release-insiders.yml +++ b/.github/workflows/release-insiders.yml @@ -25,7 +25,7 @@ jobs: uses: actions/cache@v3 with: path: node_modules - key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }} + key: nodeModules-${{ hashFiles('./package-lock.json') }}-${{ matrix.node-version }} - name: Install dependencies run: npm install diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index be9b2b9..2b133f8 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -28,7 +28,7 @@ jobs: uses: actions/cache@v3 with: path: node_modules - key: nodeModules-${{ hashFiles('**/package-lock.json') }}-${{ matrix.node-version }} + key: nodeModules-${{ hashFiles('./package-lock.json') }}-${{ matrix.node-version }} - name: Install dependencies run: npm install From 005fbc3e5da4e15de38aed6cf337e9ed6d575aa7 Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 31 Mar 2023 16:44:39 +0200 Subject: [PATCH 6/7] format `files` a bit differently --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 448d3bc..043b6fc 100644 --- a/package.json +++ b/package.json @@ -36,7 +36,7 @@ } }, "files": [ - "./dist/*" + "dist" ], "peerDependencies": { "tailwindcss": ">=3.2.0" From f8b51dd8530fa63a284374ba026a44931a8cd57f Mon Sep 17 00:00:00 2001 From: Robin Malfait Date: Fri, 31 Mar 2023 16:48:42 +0200 Subject: [PATCH 7/7] 0.1.1 --- CHANGELOG.md | 7 ++++++- package.json | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 74426e5..f239b0a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [Unreleased] +- Nothing yet! + +## [0.1.1] - 2023-03-31 + ### Fixed - Ensure types are published to npm ([#11](https://github.com/tailwindlabs/tailwindcss-container-queries/pull/11)) @@ -18,5 +22,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Add new `@container`, `@container-normal` utilities. - Add new `@xs`, `@sm`, ..., `@[400px]`, variants. -[unreleased]: https://github.com/tailwindlabs/tailwindcss-container-queries/compare/v0.1.0...HEAD +[unreleased]: https://github.com/tailwindlabs/tailwindcss-container-queries/compare/v0.1.1...HEAD +[0.1.1]: https://github.com/tailwindlabs/tailwindcss-container-queries/compare/v0.1.0...v0.1.1 [0.1.0]: https://github.com/tailwindlabs/tailwindcss-container-queries/releases/tag/v0.1.0 diff --git a/package.json b/package.json index 043b6fc..6b08cb7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@tailwindcss/container-queries", - "version": "0.1.0", + "version": "0.1.1", "main": "dist/index.js", "types": "dist/index.d.ts", "license": "MIT",