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

Commit 3fdd6a1

Browse files
adamwathanadamwathan
committed
Fix @font-face support
1 parent c0f01a6 commit 3fdd6a1

File tree

4 files changed

+132
-1
lines changed

4 files changed

+132
-1
lines changed

‎src/lib/collapseAdjacentRules.js

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ function collapseAdjacentRules(context) {
1919
}
2020

2121
let property = comparisonMap[node.type]
22-
if (node[property] === currentRule[property]) {
22+
23+
if (node.type === 'atrule' && node.name === 'font-face') {
24+
currentRule = node
25+
} else if (node[property] === currentRule[property]) {
2326
currentRule.append(node.nodes)
2427
node.remove()
2528
} else {

‎tests/09-collapse-adjacent-rules.test.css

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
* {
2+
--tw-shadow: 0 0 #0000;
3+
--tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
4+
--tw-ring-offset-width: 0px;
5+
--tw-ring-offset-color: #fff;
6+
--tw-ring-color: rgba(59, 130, 246, 0.5);
7+
--tw-ring-offset-shadow: 0 0 #0000;
8+
--tw-ring-shadow: 0 0 #0000;
9+
}
10+
@font-face {
11+
font-family: 'Poppins';
12+
src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff');
13+
}
14+
@font-face {
15+
font-family: 'Proxima Nova';
16+
src: url('/fonts/ProximaNova.woff2') format('woff2'),
17+
url('/fonts/ProximaNova.woff') format('woff');
18+
}
19+
@font-face {
20+
font-family: 'Inter';
21+
src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff');
22+
}
23+
@font-face {
24+
font-family: 'Gilroy';
25+
src: url('/fonts/Gilroy.woff2') format('woff2'), url('/fonts/Gilroy.woff') format('woff');
26+
}
27+
.font-bold {
28+
font-weight: 700;
29+
}
30+
@media (min-width: 640px) {
31+
.sm\:text-center {
32+
text-align: center;
33+
}
34+
.sm\:font-bold {
35+
font-weight: 700;
36+
}
37+
}
38+
@media (min-width: 768px) {
39+
.md\:text-center {
40+
text-align: center;
41+
}
42+
.md\:font-bold {
43+
font-weight: 700;
44+
}
45+
}
46+
@media (min-width: 1024px) {
47+
.lg\:text-center {
48+
text-align: center;
49+
}
50+
.lg\:font-bold {
51+
font-weight: 700;
52+
}
53+
}

‎tests/09-collapse-adjacent-rules.test.html

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Title</title>
8+
<link rel="stylesheet" href="./tailwind.css" />
9+
</head>
10+
<body>
11+
<div class="custom-component"></div>
12+
<div class="sm:custom-component"></div>
13+
<div class="md:custom-component"></div>
14+
<div class="lg:custom-component"></div>
15+
<div class="font-bold"></div>
16+
<div class="sm:font-bold"></div>
17+
<div class="sm:text-center"></div>
18+
<div class="md:font-bold"></div>
19+
<div class="md:text-center"></div>
20+
<div class="lg:font-bold"></div>
21+
<div class="lg:text-center"></div>
22+
</body>
23+
</html>

‎tests/09-collapse-adjacent-rules.test.js

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
const postcss = require('postcss')
2+
const tailwind = require('../src/index.js')
3+
const fs = require('fs')
4+
const path = require('path')
5+
6+
function run(input, config = {}) {
7+
return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
8+
}
9+
10+
test('collapse adjacent rules', () => {
11+
let config = {
12+
purge: [path.resolve(__dirname, './09-collapse-adjacent-rules.test.html')],
13+
corePlugins: { preflight: false },
14+
theme: {},
15+
plugins: [],
16+
}
17+
18+
let css = `
19+
@tailwind base;
20+
@font-face {
21+
font-family: "Inter";
22+
src: url("/fonts/Inter.woff2") format("woff2"),
23+
url("/fonts/Inter.woff") format("woff");
24+
}
25+
@font-face {
26+
font-family: "Gilroy";
27+
src: url("/fonts/Gilroy.woff2") format("woff2"),
28+
url("/fonts/Gilroy.woff") format("woff");
29+
}
30+
@tailwind components;
31+
@tailwind utilities;
32+
@layer base {
33+
@font-face {
34+
font-family: "Poppins";
35+
src: url("/fonts/Poppins.woff2") format("woff2"),
36+
url("/fonts/Poppins.woff") format("woff");
37+
}
38+
@font-face {
39+
font-family: "Proxima Nova";
40+
src: url("/fonts/ProximaNova.woff2") format("woff2"),
41+
url("/fonts/ProximaNova.woff") format("woff");
42+
}
43+
}
44+
`
45+
46+
return run(css, config).then((result) => {
47+
let expectedPath = path.resolve(__dirname, './09-collapse-adjacent-rules.test.css')
48+
let expected = fs.readFileSync(expectedPath, 'utf8')
49+
50+
expect(result.css).toMatchCss(expected)
51+
})
52+
})

0 commit comments

Comments
 (0)