Merge pull request #30 from tailwindlabs/fix-font-face-support

Fix @font-face support
tailwindlabs · Mar 15, 2021 · ac518ac · ac518ac
2 parents 34e7be7 + 3fdd6a1
commit ac518ac
Show file tree

Hide file tree

Showing 4 changed files with 132 additions and 1 deletion.
diff --git 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
@@ -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
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Title</title>
+    <link rel="stylesheet" href="./tailwind.css" />
+  </head>
+  <body>
+    <div class="custom-component"></div>
+    <div class="sm:custom-component"></div>
+    <div class="md:custom-component"></div>
+    <div class="lg:custom-component"></div>
+    <div class="font-bold"></div>
+    <div class="sm:font-bold"></div>
+    <div class="sm:text-center"></div>
+    <div class="md:font-bold"></div>
+    <div class="md:text-center"></div>
+    <div class="lg:font-bold"></div>
+    <div class="lg:text-center"></div>
+  </body>
+</html>
diff --git a/tests/09-collapse-adjacent-rules.test.js 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)
+  })
+})