-
```
@@ -57,8 +87,8 @@ You can optionally name containers using a `@container/{name}` class, and then i
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
-
@@ -66,20 +96,53 @@ In addition to using one of the [container sizes](#configuration) provided by de
### Removing a container
-To stop an element from acting as a container, use the `@container-normal` class.
+To stop an element from acting as a container, use the `qc-queryable-normal` class.
-
+
+### Arbitrary container
+
+You can create container with arbitary value:
+
+```html
+
+
+
+```
+This will be compiled to:
+
+```css
+.qc-queryable-\[size\] {
+ container-type: size;
+}
+```
+
+### Fixed size container component
+
+I provided also `qc-container` similar to tailwind container component:
+
+```html
+
+
+```
+
+By default I provide [container sizes](#configuration).
+
+Containers are not default centered but you can enable this in configuration.
+
### 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:
+If you have configured Tailwind to use a prefix, make sure to prefix both the `qc-queryable` class and any classes where you are using a container query modifier:
```html
-
+
-
@@ -87,33 +150,85 @@ If you have configured Tailwind to use a prefix, make sure to prefix both the `@
## Configuration
-By default we ship with the following configured values:
+By default we ship with the following configured breakpoints:
+
+| Name | CSS | Name | CSS |
+| -------- | -------------------------------------------- | ------------ | -------------------------------------------- |
+| `qc-sm` | `@container (min-width: 640px)` | `qc-max-sm` | `@container (width < 640px)` |
+| `qc-md` | `@container (min-width: 768px)` | `qc-max-md` | `@container (width < 768px)` |
+| `qc-lg` | `@container (min-width: 1024px)` | `qc-max-lg` | `@container (width < 1024px)` |
+| `qc-xl` | `@container (min-width: 1280px)` | `qc-max-xl` | `@container (width < 1280px)` |
+| `qc-2xl` | `@container (min-width: 1536px)` | `qc-max-2xl` | `@container (width < 1536px)` |
+
+Default containers:
-| 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 */)` |
+| Breakpoint | Properties |
+| ---------- | ------------------- |
+| `none` | `width: 100%` |
+| `240px` | `max-width: 240px` |
+| `320px` | `max-width: 320px` |
+| `480px` | `max-width: 480px` |
+| `640px` | `max-width: 640px` |
+| `768px` | `max-width: 768px` |
+| `1024px` | `max-width: 1024px` |
+| `1280px` | `max-width: 1280px` |
-You can configure which values are available for this plugin under the `containers` key in your `tailwind.config.js` file:
+You can add breakpoints which are available for this plugin under the `containers` key in your `tailwind.config.js` file:
+
+It will be applied to `qc-{breakpoint}` and `qc-max-{breakpoint}`.
```js
// tailwind.config.js
module.exports = {
theme: {
extend: {
- containers: {
+ 'qc-queryables': {
'2xs': '16rem',
},
},
},
}
```
+
+Or override all breakpoints with yours:
+
+```js
+// tailwind.config.js
+module.exports = {
+ theme: {
+ 'qc-queryables': {
+ 'xs': '16rem',
+ 'md': '32rem',
+ 'lg': '48rem',
+ },
+ },
+}
+```
+
+You can also configure containers fixed sizes and their breakpoints:
+
+```js
+// tailwind.config.js
+module.exports = {
+ theme: {
+ 'qc-containers': {
+ '240px',
+ '320px',
+ '480px',
+ },
+ },
+}
+```
+
+You can enable auto centering for `qc-containers`:
+
+```js
+// tailwind.config.js
+module.exports = {
+ theme: {
+ container: {
+ center: true,
+ },
+ },
+}
+```
diff --git a/package.json b/package.json
index 6b08cb7..3028c99 100644
--- a/package.json
+++ b/package.json
@@ -1,10 +1,10 @@
{
- "name": "@tailwindcss/container-queries",
- "version": "0.1.1",
+ "name": "@krzysztof318/tw-container-queries",
+ "version": "0.3.2",
"main": "dist/index.js",
"types": "dist/index.d.ts",
"license": "MIT",
- "repository": "https://github.com/tailwindlabs/tailwindcss-container-queries",
+ "repository": "https://github.com/Krzysztof318/tailwindcss-container-queries",
"publishConfig": {
"access": "public"
},
diff --git a/src/index.ts b/src/index.ts
index 84b9869..ed37ca9 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,8 +1,10 @@
import plugin from 'tailwindcss/plugin'
+import { CSSRuleObject, KeyValuePair } from 'tailwindcss/types/config'
export = plugin(
- function containerQueries({ matchUtilities, matchVariant, theme }) {
- let values: Record
= theme('containers') ?? {}
+ function containerQueries({ matchComponents, matchUtilities, matchVariant, theme }) {
+ let queryablesValues: Record = theme('qc-queryables') ?? {}
+ let containersValues: Array = theme('qc-containers') ?? {}
function parseValue(value: string) {
let numericValue = value.match(/^(\d+\.\d+|\d+|\.\d+)\D+/)?.[1] ?? null
@@ -11,9 +13,47 @@ export = plugin(
return parseFloat(value)
}
+ function getFixedSizeContainers(modifier: string | null): CSSRuleObject {
+ let sizes = [...containersValues]
+ sizes.sort((a,b) => {
+ let aVal = parseFloat(a)
+ let bVal = parseFloat(b)
+ if (aVal === null || bVal === null) return 0
+ // Sort values themselves regardless of unit
+ if (aVal - bVal !== 0) return aVal - bVal
+ return 0
+ })
+ let rule: CSSRuleObject = {}
+ rule.width = '100%'
+ if (theme('container.center', false)) {
+ rule.marginRight = 'auto';
+ rule.marginLeft = 'auto;'
+ }
+ sizes.forEach((val) =>
+ rule[`@container ${modifier ?? ''} (min-width: ${val})`] = {
+ 'max-width': val
+ }
+ )
+ return rule
+ }
+
+ matchComponents(
+ {
+ 'qc-container': (value, { modifier }) => {
+ return getFixedSizeContainers(modifier)
+ }
+ },
+ {
+ values: {
+ DEFAULT: 'n/a'
+ },
+ modifiers: 'any'
+ }
+ )
+
matchUtilities(
{
- '@container': (value, { modifier }) => {
+ 'qc-queryable': (value, { modifier }) => {
return {
'container-type': value,
'container-name': modifier,
@@ -29,57 +69,106 @@ export = plugin(
}
)
+ const sortMin: (
+ a: { value: string; modifier: string | null },
+ b: { value: string; modifier: string | null }
+ ) => number = (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 })
+ }
+
+ const sortMax: (
+ a: { value: string; modifier: string | null },
+ b: { value: string; modifier: string | null }
+ ) => number = (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 (z - a !== 0) return z - a
+
+ 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(
- '@',
+ 'qc',
(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 ?? ''
+ values: queryablesValues,
+ sort: sortMin,
+ }
+ )
- // Explicitly move empty labels to the end
- if (aLabel === '' && zLabel !== '') {
- return 1
- } else if (aLabel !== '' && zLabel === '') {
- return -1
- }
+ matchVariant(
+ 'qc-max',
+ (value = '', { modifier }) => {
+ let parsed = parseValue(value)
- // 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 })
- },
+ return parsed !== null ? `@container ${modifier ?? ''} (width < ${value})` : []
+ },
+ {
+ values: queryablesValues,
+ sort: sortMax,
}
)
},
{
theme: {
- containers: {
- xs: '20rem',
- sm: '24rem',
- md: '28rem',
- lg: '32rem',
- xl: '36rem',
- '2xl': '42rem',
- '3xl': '48rem',
- '4xl': '56rem',
- '5xl': '64rem',
- '6xl': '72rem',
- '7xl': '80rem',
+ 'qc-queryables': {
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+ '2xl': '1536px',
},
+ 'qc-containers': [
+ '240px',
+ '320px',
+ '480px',
+ '640px',
+ '768px',
+ '1024px',
+ '1280px',
+ ]
},
}
)
diff --git a/tests/index.test.ts b/tests/index.test.ts
index 077b628..80b17ae 100644
--- a/tests/index.test.ts
+++ b/tests/index.test.ts
@@ -7,36 +7,36 @@ it('container queries', () => {
{
raw: html`
`,
},
],
theme: {
- containers: {
- sm: '320px',
+ 'qc-containers': {
+ sm: '640px',
md: '768px',
lg: '1024px',
},
@@ -50,116 +50,121 @@ it('container queries', () => {
return run(input, config).then((result) => {
expect(result.css).toMatchFormattedCss(css`
- .\@container {
+ .qc-queryable {
container-type: inline-size;
}
- .\@container-normal {
+ .qc-queryable-normal {
container-type: normal;
}
- .\@container\/sidebar {
+ .qc-queryable\/sidebar {
container-type: inline-size;
container-name: sidebar;
}
- .\@container-normal\/sidebar {
+ .qc-queryable-normal\/sidebar {
container-type: normal;
container-name: sidebar;
}
+ .qc-queryable-\[size\]\/sidebar {
+ container-type: size;
+ container-name: sidebar;
+ }
+
@container (min-width: 123px) {
- .\@\[123px\]\:underline {
+ .qc-\[123px\]\:underline {
text-decoration-line: underline;
}
}
@container (min-width: 200rem) {
- .\@\[200rem\]\:underline {
+ .qc-\[200rem\]\:underline {
text-decoration-line: underline;
}
}
@container (min-width: 312px) {
- .\@\[312px\]\:underline {
+ .qc-\[312px\]\:underline {
text-decoration-line: underline;
}
}
- @container container1 (min-width: 320px) {
- .\@sm\/container1\:underline {
+ @container container1 (min-width: 640px) {
+ .qc-sm\/container1\:underline {
text-decoration-line: underline;
}
}
- @container container2 (min-width: 320px) {
- .\@sm\/container2\:underline {
+ @container container2 (min-width: 640px) {
+ .qc-sm\/container2\:underline {
text-decoration-line: underline;
}
}
- @container container10 (min-width: 320px) {
- .\@sm\/container10\:underline {
+ @container container10 (min-width: 640px) {
+ .qc-sm\/container10\:underline {
text-decoration-line: underline;
}
}
- @container (min-width: 320px) {
- .\@sm\:underline {
+ @container (min-width: 640px) {
+ .qc-sm\:underline {
text-decoration-line: underline;
}
}
@container container1 (min-width: 768px) {
- .\@md\/container1\:underline {
+ .qc-md\/container1\:underline {
text-decoration-line: underline;
}
}
@container container2 (min-width: 768px) {
- .\@md\/container2\:underline {
+ .qc-md\/container2\:underline {
text-decoration-line: underline;
}
}
@container container10 (min-width: 768px) {
- .\@md\/container10\:underline {
+ .qc-md\/container10\:underline {
text-decoration-line: underline;
}
}
@container (min-width: 768px) {
- .\@md\:underline {
+ .qc-md\:underline {
text-decoration-line: underline;
}
}
@container container1 (min-width: 1024px) {
- .\@lg\/container1\:underline {
+ .qc-lg\/container1\:underline {
text-decoration-line: underline;
}
- .\@\[1024px\]\/container1\:underline {
+ .qc-\[1024px\]\/container1\:underline {
text-decoration-line: underline;
}
}
@container container2 (min-width: 1024px) {
- .\@lg\/container2\:underline {
+ .qc-lg\/container2\:underline {
text-decoration-line: underline;
}
}
@container container10 (min-width: 1024px) {
- .\@lg\/container10\:underline {
+ .qc-lg\/container10\:underline {
text-decoration-line: underline;
}
}
@container (min-width: 1024px) {
- .\@lg\:underline {
+ .qc-lg\:underline {
text-decoration-line: underline;
}
- .\@\[1024px\]\:underline {
+ .qc-\[1024px\]\:underline {
text-decoration-line: underline;
}
}
@@ -173,14 +178,11 @@ it('should be possible to use default container queries', () => {
{
raw: html`
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+ `,
+ },
+ ],
+ theme: {
+ 'qc-queryables': {
+ sm: '640px',
+ md: '768px',
+ lg: '1024px',
+ xl: '1280px',
+ '2xl': '1536px',
+ },
+ 'qc-containers': [
+ '240px',
+ '640px',
+ '1024px',
+ ],
+ container: {
+ center: true,
+ },
+ },
+ corePlugins: { preflight: false },
+ }
+
+ let input = css`
+ @tailwind components;
+ @tailwind utilities;
+ `
+
+ return run(input, config).then((result) => {
+ expect(result.css).toMatchFormattedCss(css`
+ .qc-container {
+ width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ @container (min-width: 240px) {
+ max-width: 240px;
+ }
+ @container (min-width: 640px) {
+ max-width: 640px;
+ }
+ @container (min-width: 1024px) {
+ max-width: 1024px;
+ }
+ }
+ `)
+ })
+})
\ No newline at end of file