From 3fdd6a14e564c4c864af614aeb0389b23ac87fe4 Mon Sep 17 00:00:00 2001
From: Adam Wathan
Date: Mon, 15 Mar 2021 16:12:17 -0400
Subject: [PATCH] Fix @font-face support
---
src/lib/collapseAdjacentRules.js | 5 +-
tests/09-collapse-adjacent-rules.test.css | 53 ++++++++++++++++++++++
tests/09-collapse-adjacent-rules.test.html | 23 ++++++++++
tests/09-collapse-adjacent-rules.test.js | 52 +++++++++++++++++++++
4 files changed, 132 insertions(+), 1 deletion(-)
create mode 100644 tests/09-collapse-adjacent-rules.test.css
create mode 100644 tests/09-collapse-adjacent-rules.test.html
create mode 100644 tests/09-collapse-adjacent-rules.test.js
diff --git a/src/lib/collapseAdjacentRules.js b/src/lib/collapseAdjacentRules.js
index 951b8c5..e2ad015 100644
--- a/src/lib/collapseAdjacentRules.js
+++ b/src/lib/collapseAdjacentRules.js
@@ -19,7 +19,10 @@ function collapseAdjacentRules(context) {
}
let property = comparisonMap[node.type]
- if (node[property] === currentRule[property]) {
+
+ if (node.type === 'atrule' && node.name === 'font-face') {
+ currentRule = node
+ } else if (node[property] === currentRule[property]) {
currentRule.append(node.nodes)
node.remove()
} else {
diff --git a/tests/09-collapse-adjacent-rules.test.css b/tests/09-collapse-adjacent-rules.test.css
new file mode 100644
index 0000000..a9672f9
--- /dev/null
+++ b/tests/09-collapse-adjacent-rules.test.css
@@ -0,0 +1,53 @@
+* {
+ --tw-shadow: 0 0 #0000;
+ --tw-ring-inset: var(--tw-empty, /*!*/ /*!*/);
+ --tw-ring-offset-width: 0px;
+ --tw-ring-offset-color: #fff;
+ --tw-ring-color: rgba(59, 130, 246, 0.5);
+ --tw-ring-offset-shadow: 0 0 #0000;
+ --tw-ring-shadow: 0 0 #0000;
+}
+@font-face {
+ font-family: 'Poppins';
+ src: url('/fonts/Poppins.woff2') format('woff2'), url('/fonts/Poppins.woff') format('woff');
+}
+@font-face {
+ font-family: 'Proxima Nova';
+ src: url('/fonts/ProximaNova.woff2') format('woff2'),
+ url('/fonts/ProximaNova.woff') format('woff');
+}
+@font-face {
+ font-family: 'Inter';
+ src: url('/fonts/Inter.woff2') format('woff2'), url('/fonts/Inter.woff') format('woff');
+}
+@font-face {
+ font-family: 'Gilroy';
+ src: url('/fonts/Gilroy.woff2') format('woff2'), url('/fonts/Gilroy.woff') format('woff');
+}
+.font-bold {
+ font-weight: 700;
+}
+@media (min-width: 640px) {
+ .sm\:text-center {
+ text-align: center;
+ }
+ .sm\:font-bold {
+ font-weight: 700;
+ }
+}
+@media (min-width: 768px) {
+ .md\:text-center {
+ text-align: center;
+ }
+ .md\:font-bold {
+ font-weight: 700;
+ }
+}
+@media (min-width: 1024px) {
+ .lg\:text-center {
+ text-align: center;
+ }
+ .lg\:font-bold {
+ font-weight: 700;
+ }
+}
diff --git a/tests/09-collapse-adjacent-rules.test.html b/tests/09-collapse-adjacent-rules.test.html
new file mode 100644
index 0000000..3b12ab4
--- /dev/null
+++ b/tests/09-collapse-adjacent-rules.test.html
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+ Title
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/09-collapse-adjacent-rules.test.js b/tests/09-collapse-adjacent-rules.test.js
new file mode 100644
index 0000000..e9c3589
--- /dev/null
+++ b/tests/09-collapse-adjacent-rules.test.js
@@ -0,0 +1,52 @@
+const postcss = require('postcss')
+const tailwind = require('../src/index.js')
+const fs = require('fs')
+const path = require('path')
+
+function run(input, config = {}) {
+ return postcss([tailwind(config)]).process(input, { from: path.resolve(__filename) })
+}
+
+test('collapse adjacent rules', () => {
+ let config = {
+ purge: [path.resolve(__dirname, './09-collapse-adjacent-rules.test.html')],
+ corePlugins: { preflight: false },
+ theme: {},
+ plugins: [],
+ }
+
+ let css = `
+ @tailwind base;
+ @font-face {
+ font-family: "Inter";
+ src: url("/fonts/Inter.woff2") format("woff2"),
+ url("/fonts/Inter.woff") format("woff");
+ }
+ @font-face {
+ font-family: "Gilroy";
+ src: url("/fonts/Gilroy.woff2") format("woff2"),
+ url("/fonts/Gilroy.woff") format("woff");
+ }
+ @tailwind components;
+ @tailwind utilities;
+ @layer base {
+ @font-face {
+ font-family: "Poppins";
+ src: url("/fonts/Poppins.woff2") format("woff2"),
+ url("/fonts/Poppins.woff") format("woff");
+ }
+ @font-face {
+ font-family: "Proxima Nova";
+ src: url("/fonts/ProximaNova.woff2") format("woff2"),
+ url("/fonts/ProximaNova.woff") format("woff");
+ }
+ }
+ `
+
+ return run(css, config).then((result) => {
+ let expectedPath = path.resolve(__dirname, './09-collapse-adjacent-rules.test.css')
+ let expected = fs.readFileSync(expectedPath, 'utf8')
+
+ expect(result.css).toMatchCss(expected)
+ })
+})