Skip to content

Commit b935654

Browse files
dgkncadgknca
authoredJun 24, 2022
Merge pull request #13 from dgknca/arbitrary-values
feat: add arbitrary value support
·
v1.1.0
2 parents 66c4702 + 4a72182 commit b935654

File tree

7 files changed

+917
-1116
lines changed

7 files changed

+917
-1116
lines changed
 

‎README.md

+17
Original file line numberDiff line numberDiff line change
@@ -81,6 +81,23 @@ There are no any `container-name` utilities by default. You should define your o
8181
}
8282
```
8383

84+
#### You can use arbitrary variants too. (You should be using v3.1.0 or higher!)
85+
86+
```html
87+
<div class="cq-w-[238px]:bg-yellow-400"></div>
88+
```
89+
90+
`.cq-w-6:bg-yellow-400` output:
91+
92+
```css
93+
@container (min-width: 238px) {
94+
.cq-w-\[238px\]\:bg-yellow-400 {
95+
--tw-bg-opacity: 1;
96+
background-color: rgb(96 165 250 / var(--tw-bg-opacity));
97+
}
98+
}
99+
```
100+
84101
## Using Container Names
85102

86103
```html

‎demo/index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</head>
1010
<body>
1111
<div class="container-type-size w-80 h-80 overflow-auto resize">
12-
<div class="bg-yellow-100 h-full w-full border-4 border-gray-100 cq-w-22:bg-blue-200 cq-h-22:border-red-400 flex justify-end items-end">
12+
<div class="bg-yellow-100 h-full w-full border-4 border-gray-100 cq-w-22:bg-blue-200 cq-h-[111px]:border-red-400 flex justify-end items-end">
1313
<div class="inline-flex items-end">
1414
<div class="pb-12">Resize the container</div>
1515
<svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="48" height="48" fill="white" fill-opacity="0.01"/><path d="M37 19V37H19" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M11.5441 11.5442L36.9999 37" stroke="#333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>

‎demo/output.css

+151-28
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
/*
2-
! tailwindcss v3.0.0 | MIT License | https://tailwindcss.com
2+
! tailwindcss v3.1.4 | MIT License | https://tailwindcss.com
33
*/
44

55
/*
@@ -16,7 +16,7 @@
1616
/* 2 */
1717
border-style: solid;
1818
/* 2 */
19-
border-color: currentColor;
19+
border-color: #e5e7eb;
2020
/* 2 */
2121
}
2222

@@ -77,7 +77,7 @@ hr {
7777
Add the correct text decoration in Chrome, Edge, and Safari.
7878
*/
7979

80-
abbr[title] {
80+
abbr:where([title]) {
8181
-webkit-text-decoration: underline dotted;
8282
text-decoration: underline dotted;
8383
}
@@ -187,6 +187,8 @@ textarea {
187187
/* 1 */
188188
font-size: 100%;
189189
/* 1 */
190+
font-weight: inherit;
191+
/* 1 */
190192
line-height: inherit;
191193
/* 1 */
192194
color: inherit;
@@ -353,13 +355,6 @@ input::-moz-placeholder, textarea::-moz-placeholder {
353355
/* 2 */
354356
}
355357

356-
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
357-
opacity: 1;
358-
/* 1 */
359-
color: #9ca3af;
360-
/* 2 */
361-
}
362-
363358
input::placeholder,
364359
textarea::placeholder {
365360
opacity: 1;
@@ -415,17 +410,145 @@ video {
415410
height: auto;
416411
}
417412

418-
/*
419-
Ensure the default browser behavior of the `hidden` attribute.
420-
*/
421-
422-
[hidden] {
423-
display: none;
424-
}
425-
426-
.border-4 {
427-
--tw-border-opacity: 1;
428-
border-color: rgb(229 231 235 / var(--tw-border-opacity));
413+
*, ::before, ::after {
414+
--tw-border-spacing-x: 0;
415+
--tw-border-spacing-y: 0;
416+
--tw-translate-x: 0;
417+
--tw-translate-y: 0;
418+
--tw-rotate: 0;
419+
--tw-skew-x: 0;
420+
--tw-skew-y: 0;
421+
--tw-scale-x: 1;
422+
--tw-scale-y: 1;
423+
--tw-pan-x: ;
424+
--tw-pan-y: ;
425+
--tw-pinch-zoom: ;
426+
--tw-scroll-snap-strictness: proximity;
427+
--tw-ordinal: ;
428+
--tw-slashed-zero: ;
429+
--tw-numeric-figure: ;
430+
--tw-numeric-spacing: ;
431+
--tw-numeric-fraction: ;
432+
--tw-ring-inset: ;
433+
--tw-ring-offset-width: 0px;
434+
--tw-ring-offset-color: #fff;
435+
--tw-ring-color: rgb(59 130 246 / 0.5);
436+
--tw-ring-offset-shadow: 0 0 #0000;
437+
--tw-ring-shadow: 0 0 #0000;
438+
--tw-shadow: 0 0 #0000;
439+
--tw-shadow-colored: 0 0 #0000;
440+
--tw-blur: ;
441+
--tw-brightness: ;
442+
--tw-contrast: ;
443+
--tw-grayscale: ;
444+
--tw-hue-rotate: ;
445+
--tw-invert: ;
446+
--tw-saturate: ;
447+
--tw-sepia: ;
448+
--tw-drop-shadow: ;
449+
--tw-backdrop-blur: ;
450+
--tw-backdrop-brightness: ;
451+
--tw-backdrop-contrast: ;
452+
--tw-backdrop-grayscale: ;
453+
--tw-backdrop-hue-rotate: ;
454+
--tw-backdrop-invert: ;
455+
--tw-backdrop-opacity: ;
456+
--tw-backdrop-saturate: ;
457+
--tw-backdrop-sepia: ;
458+
}
459+
460+
::-webkit-backdrop {
461+
--tw-border-spacing-x: 0;
462+
--tw-border-spacing-y: 0;
463+
--tw-translate-x: 0;
464+
--tw-translate-y: 0;
465+
--tw-rotate: 0;
466+
--tw-skew-x: 0;
467+
--tw-skew-y: 0;
468+
--tw-scale-x: 1;
469+
--tw-scale-y: 1;
470+
--tw-pan-x: ;
471+
--tw-pan-y: ;
472+
--tw-pinch-zoom: ;
473+
--tw-scroll-snap-strictness: proximity;
474+
--tw-ordinal: ;
475+
--tw-slashed-zero: ;
476+
--tw-numeric-figure: ;
477+
--tw-numeric-spacing: ;
478+
--tw-numeric-fraction: ;
479+
--tw-ring-inset: ;
480+
--tw-ring-offset-width: 0px;
481+
--tw-ring-offset-color: #fff;
482+
--tw-ring-color: rgb(59 130 246 / 0.5);
483+
--tw-ring-offset-shadow: 0 0 #0000;
484+
--tw-ring-shadow: 0 0 #0000;
485+
--tw-shadow: 0 0 #0000;
486+
--tw-shadow-colored: 0 0 #0000;
487+
--tw-blur: ;
488+
--tw-brightness: ;
489+
--tw-contrast: ;
490+
--tw-grayscale: ;
491+
--tw-hue-rotate: ;
492+
--tw-invert: ;
493+
--tw-saturate: ;
494+
--tw-sepia: ;
495+
--tw-drop-shadow: ;
496+
--tw-backdrop-blur: ;
497+
--tw-backdrop-brightness: ;
498+
--tw-backdrop-contrast: ;
499+
--tw-backdrop-grayscale: ;
500+
--tw-backdrop-hue-rotate: ;
501+
--tw-backdrop-invert: ;
502+
--tw-backdrop-opacity: ;
503+
--tw-backdrop-saturate: ;
504+
--tw-backdrop-sepia: ;
505+
}
506+
507+
::backdrop {
508+
--tw-border-spacing-x: 0;
509+
--tw-border-spacing-y: 0;
510+
--tw-translate-x: 0;
511+
--tw-translate-y: 0;
512+
--tw-rotate: 0;
513+
--tw-skew-x: 0;
514+
--tw-skew-y: 0;
515+
--tw-scale-x: 1;
516+
--tw-scale-y: 1;
517+
--tw-pan-x: ;
518+
--tw-pan-y: ;
519+
--tw-pinch-zoom: ;
520+
--tw-scroll-snap-strictness: proximity;
521+
--tw-ordinal: ;
522+
--tw-slashed-zero: ;
523+
--tw-numeric-figure: ;
524+
--tw-numeric-spacing: ;
525+
--tw-numeric-fraction: ;
526+
--tw-ring-inset: ;
527+
--tw-ring-offset-width: 0px;
528+
--tw-ring-offset-color: #fff;
529+
--tw-ring-color: rgb(59 130 246 / 0.5);
530+
--tw-ring-offset-shadow: 0 0 #0000;
531+
--tw-ring-shadow: 0 0 #0000;
532+
--tw-shadow: 0 0 #0000;
533+
--tw-shadow-colored: 0 0 #0000;
534+
--tw-blur: ;
535+
--tw-brightness: ;
536+
--tw-contrast: ;
537+
--tw-grayscale: ;
538+
--tw-hue-rotate: ;
539+
--tw-invert: ;
540+
--tw-saturate: ;
541+
--tw-sepia: ;
542+
--tw-drop-shadow: ;
543+
--tw-backdrop-blur: ;
544+
--tw-backdrop-brightness: ;
545+
--tw-backdrop-contrast: ;
546+
--tw-backdrop-grayscale: ;
547+
--tw-backdrop-hue-rotate: ;
548+
--tw-backdrop-invert: ;
549+
--tw-backdrop-opacity: ;
550+
--tw-backdrop-saturate: ;
551+
--tw-backdrop-sepia: ;
429552
}
430553

431554
.container {
@@ -524,16 +647,16 @@ Ensure the default browser behavior of the `hidden` attribute.
524647
container-type: size;
525648
}
526649

650+
@container (min-height: 111px) {
651+
.cq-h-\[111px\]\:border-red-400 {
652+
--tw-border-opacity: 1;
653+
border-color: rgb(248 113 113 / var(--tw-border-opacity));
654+
}
655+
}
656+
527657
@container (min-width: 352px) {
528658
.cq-w-22\:bg-blue-200 {
529659
--tw-bg-opacity: 1;
530660
background-color: rgb(191 219 254 / var(--tw-bg-opacity));
531661
}
532-
}
533-
534-
@container (min-height: 352px) {
535-
.cq-h-22\:border-red-400 {
536-
--tw-border-opacity: 1;
537-
border-color: rgb(248 113 113 / var(--tw-border-opacity));
538-
}
539662
}

‎package.json

+7-7
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "tailwindcss-container-query",
3-
"version": "1.0.1",
3+
"version": "1.1.0",
44
"description": "A plugin that provides CSS Container Queries.",
55
"main": "src/index.js",
66
"author": "Doğukan Çavuş <dgknca@gmail.com>",
@@ -22,15 +22,15 @@
2222
"prepublishOnly": "node scripts/build.js"
2323
},
2424
"peerDependencies": {
25-
"tailwindcss": ">=2.0.0 || >=3.0.0 || >=3.0.0-alpha.1"
25+
"tailwindcss": ">=3.1.0"
2626
},
2727
"devDependencies": {
28-
"autoprefixer": "^10.4.2",
29-
"clean-css": "^5.2.4",
28+
"autoprefixer": "^10.4.7",
29+
"clean-css": "^5.3.0",
3030
"gh-pages": "^3.2.3",
31-
"jest": "^27.5.1",
31+
"jest": "^28.1.1",
3232
"jest-matcher-css": "^1.1.0",
33-
"postcss": "^8.4.7",
34-
"tailwindcss": "^3.0.23"
33+
"postcss": "^8.4.14",
34+
"tailwindcss": "^3.1.4"
3535
}
3636
}

‎src/index.js

+9-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
const plugin = require('tailwindcss/plugin')
22

33
const containerQuery = plugin(
4-
function ({ addUtilities, addVariant, theme, variants, e, postcss }) {
4+
function ({ addUtilities, addVariant, matchVariant, theme, variants, e, postcss }) {
55
const containerType = theme('containerType')
66
const containerQuery = theme('containerQuery')
77
const containerName = theme('containerName')
@@ -32,6 +32,13 @@ const containerQuery = plugin(
3232
variants('containerName')
3333
)
3434

35+
matchVariant({
36+
'cq-h': (queryValue) => `@container (min-height: ${queryValue})`,
37+
})
38+
matchVariant({
39+
'cq-w': (queryValue) => `@container (min-width: ${queryValue})`,
40+
})
41+
3542
Object.entries(containerQuery).map(([key, value]) => {
3643
return addVariant(`cq-w-${key}`, ({ container, separator }) => {
3744
const cqRule = postcss.atRule({ name: 'container', params: `(min-width: ${value})` })
@@ -81,6 +88,7 @@ const containerQuery = plugin(
8188
})
8289
},
8390
{
91+
experimental: { matchVariant: true },
8492
theme: {
8593
containerQuery: {
8694
4: '64px',
@@ -98,10 +106,6 @@ const containerQuery = plugin(
98106
},
99107
containerName: {}
100108
},
101-
variants: {
102-
containerType: ['responsive'],
103-
containerName: [],
104-
},
105109
}
106110
)
107111

‎test/index.test.js

+24
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,30 @@ it('should add the container query at-rule for `.cq-h-22` class and its contents
5656
})
5757
})
5858

59+
it('should match the arbitrary values', () => {
60+
const config = {
61+
...defaultOptions,
62+
content: [{ raw: String.raw`<div class="cq-h-[450px]:bg-yellow-200 cq-w-[238px]:bg-yellow-200"></div>` }],
63+
}
64+
65+
return run('@tailwind utilities;', config).then((result) => {
66+
expect(result.css).toMatchCss(String.raw`
67+
@container (min-height: 450px) {
68+
.cq-h-\[450px\]\:bg-yellow-200 {
69+
--tw-bg-opacity: 1;
70+
background-color: rgb(254 240 138 / var(--tw-bg-opacity));
71+
}
72+
}
73+
@container (min-width: 238px) {
74+
.cq-w-\[238px\]\:bg-yellow-200 {
75+
--tw-bg-opacity: 1;
76+
background-color: rgb(254 240 138 / var(--tw-bg-opacity));
77+
}
78+
}
79+
`)
80+
})
81+
})
82+
5983
it('should add the `container-type-size` class', () => {
6084
const config = {
6185
...defaultOptions,

‎yarn.lock

+708-1,075
Large diffs are not rendered by default.

0 commit comments

Comments
 (0)
Please sign in to comment.