Improve css expectations in tests (#5819)

* use String.raw for css escapes This will allow us to write code like: ```css .mobile\:font-bold {} ``` Instead of ```css .mobile\\:font-bold {} ``` Which resembles "real" css way better in our tests. * use String.raw in integration tests as well
tailwindlabs · Oct 18, 2021 · f12c0e1 · f12c0e1
1 parent 5809c4d
commit f12c0e1
Show file tree

Hide file tree

Showing 26 changed files with 154 additions and 161 deletions.
diff --git a/integrations/parcel/tests/integration.test.js b/integrations/parcel/tests/integration.test.js
@@ -115,7 +115,7 @@ describe.skip('watcher', () => {
           font-weight: 700;
         }
         @media (min-width: 768px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }
@@ -153,7 +153,7 @@ describe.skip('watcher', () => {
           font-weight: bold;
         }
         @media (min-width: 800px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }

diff --git a/integrations/postcss-cli/tests/integration.test.js b/integrations/postcss-cli/tests/integration.test.js
@@ -95,7 +95,7 @@ describe('watcher', () => {
           font-weight: 700;
         }
         @media (min-width: 768px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }
@@ -132,7 +132,7 @@ describe('watcher', () => {
           font-weight: bold;
         }
         @media (min-width: 800px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }

diff --git a/integrations/rollup/tests/integration.test.js b/integrations/rollup/tests/integration.test.js
@@ -90,7 +90,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
           font-weight: 700;
         }
         @media (min-width: 768px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }
@@ -127,7 +127,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
           font-weight: bold;
         }
         @media (min-width: 800px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }

diff --git a/integrations/syntax.js b/integrations/syntax.js
@@ -1,6 +1,2 @@
 // Small helper to allow for css, html and JavaScript highlighting / formatting in most editors.
-function syntax(templates) {
-  return templates.join('')
-}
-
-module.exports = { css: syntax, html: syntax, javascript: syntax }
+module.exports = { css: String.raw, html: String.raw, javascript: String.raw }
diff --git a/integrations/tailwindcss-cli/tests/integration.test.js b/integrations/tailwindcss-cli/tests/integration.test.js
@@ -188,7 +188,7 @@ describe('watcher', () => {
           font-weight: 700;
         }
         @media (min-width: 768px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }
@@ -225,7 +225,7 @@ describe('watcher', () => {
           font-weight: bold;
         }
         @media (min-width: 800px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }

diff --git a/integrations/vite/tests/integration.test.js b/integrations/vite/tests/integration.test.js
@@ -121,7 +121,7 @@ describe('watcher', () => {
           font-weight: 700;
         }
         @media (min-width: 768px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }
@@ -158,7 +158,7 @@ describe('watcher', () => {
           font-weight: bold;
         }
         @media (min-width: 800px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }

diff --git a/integrations/webpack-4/tests/integration.test.js b/integrations/webpack-4/tests/integration.test.js
@@ -91,7 +91,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
           font-weight: 700;
         }
         @media (min-width: 768px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }
@@ -129,7 +129,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
           font-weight: bold;
         }
         @media (min-width: 800px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }

diff --git a/integrations/webpack-5/tests/integration.test.js b/integrations/webpack-5/tests/integration.test.js
@@ -91,7 +91,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
           font-weight: 700;
         }
         @media (min-width: 768px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }
@@ -129,7 +129,7 @@ describe.each([{ TAILWIND_MODE: 'watch' }, { TAILWIND_MODE: undefined }])('watch
           font-weight: bold;
         }
         @media (min-width: 800px) {
-          .md\\:font-medium {
+          .md\:font-medium {
             font-weight: 500;
           }
         }

diff --git a/tests/animations.test.js b/tests/animations.test.js
@@ -30,7 +30,7 @@ test('basic', () => {
           opacity: 0;
         }
       }
-      .hover\\:animate-ping:hover {
+      .hover\:animate-ping:hover {
         animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
       }
       @keyframes bounce {
@@ -44,7 +44,7 @@ test('basic', () => {
           animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
         }
       }
-      .group:hover .group-hover\\:animate-bounce {
+      .group:hover .group-hover\:animate-bounce {
         animation: bounce 1s infinite;
       }
     `)

diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
@@ -44,24 +44,24 @@ it('should support arbitrary values for various background utilities', () => {
         background-color: rgb(239 68 68 / var(--tw-bg-opacity));
       }
 
-      .bg-\\[\\#ff0000\\] {
+      .bg-\[\#ff0000\] {
         --tw-bg-opacity: 1;
         background-color: rgb(255 0 0 / var(--tw-bg-opacity));
       }
 
-      .bg-\\[color\\:var\\(--bg-color\\)\\] {
+      .bg-\[color\:var\(--bg-color\)\] {
         background-color: var(--bg-color);
       }
 
       .bg-gradient-to-r {
         background-image: linear-gradient(to right, var(--tw-gradient-stops));
       }
 
-      .bg-\\[url\\(\\'\\/image-1-0\\.png\\'\\)\\] {
+      .bg-\[url\(\'\/image-1-0\.png\'\)\] {
         background-image: url('/image-1-0.png');
       }
 
-      .bg-\\[url\\:var\\(--image-url\\)\\] {
+      .bg-\[url\:var\(--image-url\)\] {
         background-image: var(--image-url);
       }
     `)
@@ -86,15 +86,22 @@ it('should handle unknown typehints', () => {
   let config = { content: [{ raw: html`<div class="w-[length:12px]"></div>` }] }
 
   return run('@tailwind utilities', config).then((result) => {
-    return expect(result.css).toMatchFormattedCss(`
-      .w-\\[length\\:12px\\] {
+    return expect(result.css).toMatchFormattedCss(css`
+      .w-\[length\:12px\] {
         width: 12px;
       }
     `)
   })
 })
 
 it('should convert _ to spaces', () => {
+  // Using custom css function here, because otherwise with String.raw, we run
+  // into an issue with `\2c ` escapes. If we use `\2c ` then JS complains
+  // about strict mode. But `\\2c ` is not what it expected.
+  function css(templates) {
+    return templates.join('')
+  }
+
   let config = {
     content: [
       {
@@ -185,13 +192,13 @@ it('should convert _ to spaces', () => {
 
 it('should not convert escaped underscores with spaces', () => {
   let config = {
-    content: [{ raw: html` <div class="content-['snake\\_case']"></div> ` }],
+    content: [{ raw: `<div class="content-['snake\\_case']"></div>` }],
     corePlugins: { preflight: false },
   }
 
   return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
-      .content-\\[\\'snake\\\\_case\\'\\] {
+      .content-\[\'snake\\_case\'\] {
         content: 'snake_case';
       }
     `)

diff --git a/tests/color-opacity-modifiers.test.js b/tests/color-opacity-modifiers.test.js
@@ -7,7 +7,7 @@ test('basic color opacity modifier', async () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .bg-red-500\\/50 {
+      .bg-red-500\/50 {
         background-color: rgb(239 68 68 / 0.5);
       }
     `)
@@ -28,7 +28,7 @@ test('colors with slashes are matched first', async () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .bg-red-500\\/50 {
+      .bg-red-500\/50 {
         --tw-bg-opacity: 1;
         background-color: rgb(255 0 0 / var(--tw-bg-opacity));
       }
@@ -43,7 +43,7 @@ test('arbitrary color opacity modifier', async () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .bg-red-500\\/\\[var\\(--opacity\\)\\] {
+      .bg-red-500\/\[var\(--opacity\)\] {
         background-color: rgb(239 68 68 / var(--opacity));
       }
     `)
@@ -67,11 +67,9 @@ test('arbitrary color with opacity from scale', async () => {
     plugins: [],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .bg-\\[wheat\\]\\/50 {
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .bg-\[wheat\]\/50 {
         background-color: rgb(245 222 179 / 0.5);
       }
     `)
@@ -85,11 +83,9 @@ test('arbitrary color with arbitrary opacity', async () => {
     plugins: [],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
-    expect(result.css).toMatchFormattedCss(`
-      .bg-\\[\\#bada55\\]\\/\\[0\\.2\\] {
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .bg-\[\#bada55\]\/\[0\.2\] {
         background-color: rgb(186 218 85 / 0.2);
       }
     `)
@@ -103,9 +99,7 @@ test('undefined theme color with opacity from scale', async () => {
     plugins: [],
   }
 
-  let css = `@tailwind utilities`
-
-  return run(css, config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(``)
   })
 })
@@ -143,7 +137,7 @@ test('function colors are supported', async () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .bg-blue\\/50 {
+      .bg-blue\/50 {
         background-color: rgba(var(--colors-blue), 0.5);
       }
     `)
@@ -171,14 +165,14 @@ test('utilities that support any type are supported', async () => {
 
   return run('@tailwind utilities', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
-      .from-red-500\\/50 {
+      .from-red-500\/50 {
         --tw-gradient-from: rgb(239 68 68 / 0.5);
         --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgb(239 68 68 / 0));
       }
-      .fill-red-500\\/25 {
+      .fill-red-500\/25 {
         fill: rgb(239 68 68 / 0.25);
       }
-      .placeholder-red-500\\/75::placeholder {
+      .placeholder-red-500\/75::placeholder {
         color: rgb(239 68 68 / 0.75);
       }
     `)

diff --git a/tests/containerPlugin.test.js b/tests/containerPlugin.test.js
@@ -326,16 +326,16 @@ test('container can use variants', () => {
   return run('@tailwind components', config).then((result) => {
     expect(result.css).toMatchFormattedCss(css`
       @media (min-width: 1024px) {
-        .lg\\:hover\\:container:hover {
+        .lg\:hover\:container:hover {
           width: 100%;
         }
         @media (min-width: 400px) {
-          .lg\\:hover\\:container:hover {
+          .lg\:hover\:container:hover {
             max-width: 400px;
           }
         }
         @media (min-width: 500px) {
-          .lg\\:hover\\:container:hover {
+          .lg\:hover\:container:hover {
             max-width: 500px;
           }
         }