Skip to content
This repository was archived by the owner on Apr 6, 2021. It is now read-only.

Commit 9ca89f6

Browse files
adamwathanadamwathan
committed
Add container options and complex media query support
1 parent 9243dd3 commit 9ca89f6

File tree

6 files changed

+61
-45
lines changed

6 files changed

+61
-45
lines changed

‎src/corePlugins/container.js

Lines changed: 2 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,3 @@
1-
module.exports = function ({ jit: { theme, addComponents, e } }) {
2-
let screens = theme.screens
1+
const container = require('tailwindcss/lib/plugins/container')
32

4-
addComponents({
5-
container: [
6-
[
7-
'.container',
8-
{
9-
width: '100%',
10-
},
11-
],
12-
...Object.entries(screens).map(([screen, width]) => {
13-
return [
14-
`@media (min-width: ${width})`,
15-
[
16-
[
17-
'.container',
18-
{
19-
'max-width': width,
20-
},
21-
],
22-
],
23-
]
24-
}),
25-
],
26-
})
27-
}
3+
module.exports = container()

‎src/corePlugins/index.js

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
const nameClass = require('tailwindcss/lib/util/nameClass').default
2+
const buildMediaQuery = require('tailwindcss/lib/util/buildMediaQuery').default
23
const transformThemeValue = require('tailwindcss/lib/util/transformThemeValue').default
34
const {
45
updateLastClasses,
@@ -111,12 +112,13 @@ module.exports = {
111112

112113
for (let screen in theme.screens) {
113114
let size = theme.screens[screen]
115+
let query = buildMediaQuery(size)
114116

115117
addVariant(
116118
screen,
117119
transformLastClasses((className) => {
118120
return `${screen}:${className}`
119-
}, `@media (min-width: ${size})`)
121+
}, `@media ${query}`)
120122
)
121123
}
122124
},

‎src/index.js

Lines changed: 23 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -408,20 +408,36 @@ function toPath(value) {
408408
return parts
409409
}
410410

411+
function toRuleTuple(node) {
412+
if (node.type === 'atrule') {
413+
return [`@${node.name} ${node.params}`, node.nodes.map(toRuleTuple)]
414+
}
415+
416+
if (node.type === 'rule') {
417+
let decls = Object.fromEntries(
418+
node.nodes.map(({ prop, value }) => {
419+
return [prop, value]
420+
})
421+
)
422+
return [node.selector, decls]
423+
}
424+
}
425+
411426
// { .foo { color: black } }
412427
// => [ ['foo', ['.foo', { color: 'black' }] ]
413428
function toStaticRuleArray(legacyStyles) {
414429
return parseLegacyStyles(legacyStyles).flatMap((node) => {
415430
let nodeMap = new Map()
416-
let classes = getClasses(node.selector)
431+
let classes = node.type === 'rule' ? getClasses(node.selector) : []
432+
433+
if (node.type === 'atrule') {
434+
node.walkRules((rule) => {
435+
classes = [...classes, ...getClasses(rule.selector)]
436+
})
437+
}
417438
return classes.map((c) => {
418439
if (!nodeMap.has(node)) {
419-
let decls = Object.fromEntries(
420-
node.nodes.map(({ prop, value }) => {
421-
return [prop, value]
422-
})
423-
)
424-
nodeMap.set(node, [node.selector, decls])
440+
nodeMap.set(node, toRuleTuple(node))
425441
}
426442
return [c, nodeMap.get(node)]
427443
})

‎src/index.test.css

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,29 +37,29 @@
3737
margin-left: auto;
3838
margin-right: auto;
3939
}
40-
@media (min-width: 1536px) {
40+
@media (min-width: 640px) {
4141
.apply-components {
42-
max-width: 1536px;
42+
max-width: 640px;
4343
}
4444
}
45-
@media (min-width: 1280px) {
45+
@media (min-width: 768px) {
4646
.apply-components {
47-
max-width: 1280px;
47+
max-width: 768px;
4848
}
4949
}
5050
@media (min-width: 1024px) {
5151
.apply-components {
5252
max-width: 1024px;
5353
}
5454
}
55-
@media (min-width: 768px) {
55+
@media (min-width: 1280px) {
5656
.apply-components {
57-
max-width: 768px;
57+
max-width: 1280px;
5858
}
5959
}
60-
@media (min-width: 640px) {
60+
@media (min-width: 1536px) {
6161
.apply-components {
62-
max-width: 640px;
62+
max-width: 1536px;
6363
}
6464
}
6565
.drop-empty-rules:hover {
@@ -505,3 +505,18 @@ div {
505505
}
506506
}
507507
}
508+
@media (orientation: portrait) {
509+
.portrait\:text-center {
510+
text-align: center;
511+
}
512+
}
513+
@media (min-width: 1280px) and (max-width: 1535px) {
514+
.range\:text-right {
515+
text-align: right;
516+
}
517+
}
518+
@media (min-width: 640px) and (max-width: 767px), (max-width: 868px) {
519+
.multi\:text-left {
520+
text-align: left;
521+
}
522+
}

‎src/index.test.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="stylesheet" href="./tailwind.css" />
99
</head>
1010
<body>
11+
<div class="portrait:text-center range:text-right multi:text-left"></div>
1112
<div
1213
class="container hover:container sm:container md:container text-center sm:text-center md:text-center"
1314
></div>

‎src/index.test.js

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,8 +13,15 @@ test('it works', () => {
1313
let config = {
1414
darkMode: 'class',
1515
purge: [path.resolve(__dirname, './index.test.html')],
16-
corePlugins: {
17-
preflight: false,
16+
corePlugins: { preflight: false },
17+
theme: {
18+
extend: {
19+
screens: {
20+
portrait: { raw: '(orientation: portrait)' },
21+
range: { min: '1280px', max: '1535px' },
22+
multi: [{ min: '640px', max: '767px' }, { max: '868px' }],
23+
},
24+
},
1825
},
1926
plugins: [
2027
require('@tailwindcss/aspect-ratio'),
@@ -28,7 +35,6 @@ test('it works', () => {
2835
},
2936
},
3037
})
31-
3238
addUtilities(
3339
{
3440
'.filter-none': {

0 commit comments

Comments
 (0)