diff --git a/jest/customMatchers.js b/jest/customMatchers.js
index 6349375..255a393 100644
--- a/jest/customMatchers.js
+++ b/jest/customMatchers.js
@@ -1,11 +1,11 @@
-const prettier = require("prettier");
-const { diff } = require("jest-diff");
+const prettier = require('prettier')
+const { diff } = require('jest-diff')
 
 function format(input) {
   return prettier.format(input, {
-    parser: "css",
+    parser: 'css',
     printWidth: 100,
-  });
+  })
 }
 
 expect.extend({
@@ -13,168 +13,138 @@ expect.extend({
   // This is probably naive but it's fast and works well enough.
   toMatchCss(received, argument) {
     function stripped(str) {
-      return str.replace(/\s/g, "").replace(/;/g, "");
+      return str.replace(/\s/g, '').replace(/;/g, '')
     }
 
     const options = {
-      comment: "stripped(received) === stripped(argument)",
+      comment: 'stripped(received) === stripped(argument)',
       isNot: this.isNot,
       promise: this.promise,
-    };
+    }
 
-    const pass = stripped(received) === stripped(argument);
+    const pass = stripped(received) === stripped(argument)
 
     const message = pass
       ? () => {
           return (
-            this.utils.matcherHint(
-              "toMatchCss",
-              undefined,
-              undefined,
-              options
-            ) +
-            "\n\n" +
+            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
+            '\n\n' +
             `Expected: not ${this.utils.printExpected(format(received))}\n` +
             `Received: ${this.utils.printReceived(format(argument))}`
-          );
+          )
         }
       : () => {
-          const actual = format(received);
-          const expected = format(argument);
+          const actual = format(received)
+          const expected = format(argument)
 
           const diffString = diff(expected, actual, {
             expand: this.expand,
-          });
+          })
 
           return (
-            this.utils.matcherHint(
-              "toMatchCss",
-              undefined,
-              undefined,
-              options
-            ) +
-            "\n\n" +
-            (diffString && diffString.includes("- Expect")
+            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
+            '\n\n' +
+            (diffString && diffString.includes('- Expect')
               ? `Difference:\n\n${diffString}`
               : `Expected: ${this.utils.printExpected(expected)}\n` +
                 `Received: ${this.utils.printReceived(actual)}`)
-          );
-        };
+          )
+        }
 
-    return { actual: received, message, pass };
+    return { actual: received, message, pass }
   },
   toIncludeCss(received, argument) {
     function stripped(str) {
-      return str.replace(/\s/g, "").replace(/;/g, "");
+      return str.replace(/\s/g, '').replace(/;/g, '')
     }
 
     const options = {
-      comment: "stripped(received).includes(stripped(argument))",
+      comment: 'stripped(received).includes(stripped(argument))',
       isNot: this.isNot,
       promise: this.promise,
-    };
+    }
 
-    const pass = stripped(received).includes(stripped(argument));
+    const pass = stripped(received).includes(stripped(argument))
 
     const message = pass
       ? () => {
           return (
-            this.utils.matcherHint(
-              "toIncludeCss",
-              undefined,
-              undefined,
-              options
-            ) +
-            "\n\n" +
+            this.utils.matcherHint('toIncludeCss', undefined, undefined, options) +
+            '\n\n' +
             `Expected: not ${this.utils.printExpected(format(received))}\n` +
             `Received: ${this.utils.printReceived(format(argument))}`
-          );
+          )
         }
       : () => {
-          const actual = format(received);
-          const expected = format(argument);
+          const actual = format(received)
+          const expected = format(argument)
 
           const diffString = diff(expected, actual, {
             expand: this.expand,
-          });
+          })
 
           return (
-            this.utils.matcherHint(
-              "toIncludeCss",
-              undefined,
-              undefined,
-              options
-            ) +
-            "\n\n" +
-            (diffString && diffString.includes("- Expect")
+            this.utils.matcherHint('toIncludeCss', undefined, undefined, options) +
+            '\n\n' +
+            (diffString && diffString.includes('- Expect')
               ? `Difference:\n\n${diffString}`
               : `Expected: ${this.utils.printExpected(expected)}\n` +
                 `Received: ${this.utils.printReceived(actual)}`)
-          );
-        };
+          )
+        }
 
-    return { actual: received, message, pass };
+    return { actual: received, message, pass }
   },
-});
+})
 
 expect.extend({
   // Compare two CSS strings with all whitespace removed
   // This is probably naive but it's fast and works well enough.
   toMatchFormattedCss(received, argument) {
     function format(input) {
-      return prettier.format(input.replace(/\n/g, ""), {
-        parser: "css",
+      return prettier.format(input.replace(/\n/g, ''), {
+        parser: 'css',
         printWidth: 100,
-      });
+      })
     }
     const options = {
-      comment: "stripped(received) === stripped(argument)",
+      comment: 'stripped(received) === stripped(argument)',
       isNot: this.isNot,
       promise: this.promise,
-    };
+    }
 
-    let formattedReceived = format(received);
-    let formattedArgument = format(argument);
+    let formattedReceived = format(received)
+    let formattedArgument = format(argument)
 
-    const pass = formattedReceived === formattedArgument;
+    const pass = formattedReceived === formattedArgument
 
     const message = pass
       ? () => {
           return (
-            this.utils.matcherHint(
-              "toMatchCss",
-              undefined,
-              undefined,
-              options
-            ) +
-            "\n\n" +
+            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
+            '\n\n' +
             `Expected: not ${this.utils.printExpected(formattedReceived)}\n` +
             `Received: ${this.utils.printReceived(formattedArgument)}`
-          );
+          )
         }
       : () => {
-          const actual = formattedReceived;
-          const expected = formattedArgument;
+          const actual = formattedReceived
+          const expected = formattedArgument
 
           const diffString = diff(expected, actual, {
             expand: this.expand,
-          });
+          })
 
           return (
-            this.utils.matcherHint(
-              "toMatchCss",
-              undefined,
-              undefined,
-              options
-            ) +
-            "\n\n" +
-            (diffString && diffString.includes("- Expect")
+            this.utils.matcherHint('toMatchCss', undefined, undefined, options) +
+            '\n\n' +
+            (diffString && diffString.includes('- Expect')
               ? `Difference:\n\n${diffString}`
               : `Expected: ${this.utils.printExpected(expected)}\n` +
                 `Received: ${this.utils.printReceived(actual)}`)
-          );
-        };
+          )
+        }
 
-    return { actual: received, message, pass };
+    return { actual: received, message, pass }
   },
-});
+})
diff --git a/prettier.config.js b/prettier.config.js
index b6ae8be..987f7d8 100644
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -2,18 +2,18 @@ module.exports = {
   // These settings are duplicated in .editorconfig:
   tabWidth: 2, // indent_size = 2
   useTabs: false, // indent_style = space
-  endOfLine: "lf", // end_of_line = lf
+  endOfLine: 'lf', // end_of_line = lf
   semi: false, // default: true
   singleQuote: true, // default: false
   printWidth: 100, // default: 80
-  trailingComma: "es5",
+  trailingComma: 'es5',
   bracketSpacing: true,
   overrides: [
     {
-      files: "*.js",
+      files: '*.js',
       options: {
-        parser: "flow",
+        parser: 'flow',
       },
     },
   ],
-};
+}
diff --git a/src/plugin.js b/src/plugin.js
index d19d53e..2217301 100644
--- a/src/plugin.js
+++ b/src/plugin.js
@@ -1,72 +1,72 @@
-const _ = require("lodash");
-const extractGridAreaNames = require("./util/extractGridAreaNames");
+const _ = require('lodash')
+const extractGridAreaNames = require('./util/extractGridAreaNames')
 
 module.exports = function ({ addUtilities, matchUtilities, theme, variants }) {
-  const gridAreaNames = extractGridAreaNames(theme("gridTemplateAreas"));
+  const gridAreaNames = extractGridAreaNames(theme('gridTemplateAreas'))
 
   const templateAreas = _.reduce(
-    theme("gridTemplateAreas"),
+    theme('gridTemplateAreas'),
     (templates, area, name) => {
       return {
         ...templates,
         [`.grid-areas-${name}`]: {
-          "grid-template-areas": area
+          'grid-template-areas': area
             .map((row) => {
-              return `"${row}"`;
+              return `"${row}"`
             })
-            .join("\n"),
+            .join('\n'),
         },
-      };
+      }
     },
     {}
-  );
+  )
 
-  addUtilities([templateAreas], variants("gridTemplateAreas"));
+  addUtilities([templateAreas], variants('gridTemplateAreas'))
 
   const namedAreas = gridAreaNames.reduce((areas, name) => {
     return {
       ...areas,
       [`.grid-in-${name}`]: {
-        "grid-area": name,
+        'grid-area': name,
       },
-    };
-  }, {});
+    }
+  }, {})
 
-  addUtilities([namedAreas], []);
+  addUtilities([namedAreas], [])
 
   const namedLines = gridAreaNames.reduce((lines, name) => {
     return {
       ...lines,
       [`.row-start-${name}`]: {
-        "grid-row-start": `${name}-start`,
+        'grid-row-start': `${name}-start`,
       },
       [`.row-end-${name}`]: {
-        "grid-row-end": `${name}-end`,
+        'grid-row-end': `${name}-end`,
       },
       [`.col-start-${name}`]: {
-        "grid-column-start": `${name}-start`,
+        'grid-column-start': `${name}-start`,
       },
       [`.col-end-${name}`]: {
-        "grid-column-end": `${name}-end`,
+        'grid-column-end': `${name}-end`,
       },
-    };
-  }, {});
+    }
+  }, {})
 
-  addUtilities([namedLines], []);
+  addUtilities([namedLines], [])
 
   // allow arbitrary values
   matchUtilities({
-    "grid-areas": (value) => {
-      value = `"${value}"`;
-      value = value.replace(/ *, */g, '" "');
+    'grid-areas': (value) => {
+      value = `"${value}"`
+      value = value.replace(/ *, */g, '" "')
       return {
-        "grid-template-areas": `${value}`,
-      };
+        'grid-template-areas': `${value}`,
+      }
     },
-    "grid-in": (value) => {
+    'grid-in': (value) => {
       return {
-        "grid-area": `${value}`,
-      };
+        'grid-area': `${value}`,
+      }
     },
-  });
-};
+  })
+}
diff --git a/src/util/extractGridAreaNames.js b/src/util/extractGridAreaNames.js
index a894063..03ca754 100644
--- a/src/util/extractGridAreaNames.js
+++ b/src/util/extractGridAreaNames.js
@@ -1,4 +1,4 @@
-const _ = require("lodash");
+const _ = require('lodash')
 
 module.exports = function (gridTemplateAreas) {
   return _.uniq(
@@ -6,12 +6,12 @@ module.exports = function (gridTemplateAreas) {
       return _.flatMap(row, (area) => {
         // extract grid area names from the gridTemplate
         return _.flatMap(area.match(/[^\s]+/g), (match) => {
-          if (match !== ".") {
-            return match;
+          if (match !== '.') {
+            return match
           }
-          return [];
-        });
-      });
+          return []
+        })
+      })
     })
-  );
-};
+  )
+}
diff --git a/test/arbitrary-values.test.js b/test/arbitrary-values.test.js
index a5247ae..1316ba2 100644
--- a/test/arbitrary-values.test.js
+++ b/test/arbitrary-values.test.js
@@ -1,79 +1,79 @@
-import path from "path";
-import postcss from "postcss";
-import tailwind from "tailwindcss";
-import gridAreasPlugin from "../src/plugin";
+import path from 'path'
+import postcss from 'postcss'
+import tailwind from 'tailwindcss'
+import gridAreasPlugin from '../src/plugin'
 
-let css = String.raw;
-let html = String.raw;
+let css = String.raw
+let html = String.raw
 
 function run(input, config) {
-  let { currentTestName } = expect.getState();
+  let { currentTestName } = expect.getState()
 
   config = {
     ...{ plugins: [gridAreasPlugin], corePlugins: { preflight: false } },
     ...config,
-  };
+  }
 
   return postcss(tailwind(config)).process(input, {
     from: `${path.resolve(__filename)}?test=${currentTestName}`,
-  });
+  })
 }
 
-it("should generate grid-template-areas", () => {
+it('should generate grid-template-areas', () => {
   let config = {
     content: [
       {
         raw: html` <div class="grid-areas-[left]"></div> `,
       },
     ],
-  };
+  }
 
-  return run("@tailwind utilities", config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
       .grid-areas-\[left\] {
-        grid-template-areas: "left";
+        grid-template-areas: 'left';
       }
-    `);
-  });
-});
+    `)
+  })
+})
 
-it("should generate grid-template-areas with multiple columns", () => {
+it('should generate grid-template-areas with multiple columns', () => {
   let config = {
     content: [
       {
         raw: html` <div class="grid-areas-[left_right]"></div> `,
       },
     ],
-  };
+  }
 
-  return run("@tailwind utilities", config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
       .grid-areas-\[left_right\] {
-        grid-template-areas: "left right";
+        grid-template-areas: 'left right';
       }
-    `);
-  });
-});
+    `)
+  })
+})
 
-it("should generate grid-template-areas with multiple rows", () => {
+it('should generate grid-template-areas with multiple rows', () => {
   let config = {
     content: [
       {
         raw: html` <div class="grid-areas-[left_right,left_right]"></div> `,
       },
     ],
-  };
+  }
 
-  return run("@tailwind utilities", config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
       .grid-areas-\[left_right\2c left_right\] {
-        grid-template-areas: "left right" "left right";
+        grid-template-areas: 'left right' 'left right';
       }
-    `);
-  });
-});
+    `)
+  })
+})
 
-it("ignores underscores/spaces around the comma", () => {
+it('ignores underscores/spaces around the comma', () => {
   let config = {
     content: [
       {
@@ -84,39 +84,39 @@ it("ignores underscores/spaces around the comma", () => {
         `,
       },
     ],
-  };
+  }
 
-  return run("@tailwind utilities", config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
       .grid-areas-\[left_right\2c _left_right\] {
-        grid-template-areas: "left right" "left right";
+        grid-template-areas: 'left right' 'left right';
       }
-      
+
       .grid-areas-\[left_right_\2c left_right\] {
-        grid-template-areas: "left right" "left right";
+        grid-template-areas: 'left right' 'left right';
       }
-      
+
       .grid-areas-\[left_right_\2c _\._right\] {
-        grid-template-areas: "left right" ". right";
+        grid-template-areas: 'left right' '. right';
       }
-    `);
-  });
-});
+    `)
+  })
+})
 
-it("generates grid-area", () => {
+it('generates grid-area', () => {
   let config = {
     content: [
       {
         raw: html` <div class="grid-in-[left]"></div> `,
       },
     ],
-  };
+  }
 
-  return run("@tailwind utilities", config).then((result) => {
+  return run('@tailwind utilities', config).then((result) => {
     return expect(result.css).toMatchFormattedCss(css`
       .grid-in-\[left\] {
         grid-area: left;
       }
-    `);
-  });
-});
+    `)
+  })
+})
diff --git a/test/plugin.test.js b/test/plugin.test.js
index 3ae3ee2..62eb179 100644
--- a/test/plugin.test.js
+++ b/test/plugin.test.js
@@ -1,65 +1,63 @@
-import _ from "lodash";
-import escapeClassName from "tailwindcss/lib/util/escapeClassName";
-import plugin from "../src/plugin";
+import _ from 'lodash'
+import escapeClassName from 'tailwindcss/lib/util/escapeClassName'
+import plugin from '../src/plugin'
 
-test("returns all utilities for grid areas", () => {
-  const addedUtilities = [];
+test('returns all utilities for grid areas', () => {
+  const addedUtilities = []
 
   const config = {
     theme: {
       gridTemplateAreas: {
-        layout: ["first .", "second second"],
+        layout: ['first .', 'second second'],
       },
     },
     variants: {
-      gridTemplateAreas: ["responsive"],
+      gridTemplateAreas: ['responsive'],
     },
-  };
+  }
 
-  const getConfigValue = (path, defaultValue) =>
-    _.get(config, path, defaultValue);
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
   const pluginApi = {
     config: getConfigValue,
     e: escapeClassName,
-    theme: (path, defaultValue) =>
-      getConfigValue(`theme.${path}`, defaultValue),
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
     variants: (path, defaultValue) => {
       if (_.isArray(config.variants)) {
-        return config.variants;
+        return config.variants
       }
 
-      return getConfigValue(`variants.${path}`, defaultValue);
+      return getConfigValue(`variants.${path}`, defaultValue)
     },
     addUtilities(utilities, variants) {
       addedUtilities.push({
         utilities,
         variants,
-      });
+      })
     },
     matchUtilities() {},
-  };
+  }
 
-  plugin(pluginApi);
+  plugin(pluginApi)
 
   expect(addedUtilities).toEqual([
     {
       utilities: [
         {
-          ".grid-areas-layout": {
-            "grid-template-areas": '"first ."\n"second second"',
+          '.grid-areas-layout': {
+            'grid-template-areas': '"first ."\n"second second"',
           },
         },
       ],
-      variants: ["responsive"],
+      variants: ['responsive'],
     },
     {
       utilities: [
         {
-          ".grid-in-first": {
-            "grid-area": "first",
+          '.grid-in-first': {
+            'grid-area': 'first',
           },
-          ".grid-in-second": {
-            "grid-area": "second",
+          '.grid-in-second': {
+            'grid-area': 'second',
           },
         },
       ],
@@ -68,99 +66,97 @@ test("returns all utilities for grid areas", () => {
     {
       utilities: [
         {
-          ".row-start-first": {
-            "grid-row-start": "first-start",
+          '.row-start-first': {
+            'grid-row-start': 'first-start',
           },
-          ".row-end-first": {
-            "grid-row-end": "first-end",
+          '.row-end-first': {
+            'grid-row-end': 'first-end',
           },
-          ".col-start-first": {
-            "grid-column-start": "first-start",
+          '.col-start-first': {
+            'grid-column-start': 'first-start',
           },
-          ".col-end-first": {
-            "grid-column-end": "first-end",
+          '.col-end-first': {
+            'grid-column-end': 'first-end',
           },
-          ".row-start-second": {
-            "grid-row-start": "second-start",
+          '.row-start-second': {
+            'grid-row-start': 'second-start',
           },
-          ".row-end-second": {
-            "grid-row-end": "second-end",
+          '.row-end-second': {
+            'grid-row-end': 'second-end',
           },
-          ".col-start-second": {
-            "grid-column-start": "second-start",
+          '.col-start-second': {
+            'grid-column-start': 'second-start',
           },
-          ".col-end-second": {
-            "grid-column-end": "second-end",
+          '.col-end-second': {
+            'grid-column-end': 'second-end',
           },
         },
       ],
       variants: [],
     },
-  ]);
-});
+  ])
+})
 
-test("works for multiple grid templates", () => {
-  const addedUtilities = [];
+test('works for multiple grid templates', () => {
+  const addedUtilities = []
 
   const config = {
     theme: {
       gridTemplateAreas: {
-        default: ["first .", "second second"],
-        slim: ["first", "second"],
+        default: ['first .', 'second second'],
+        slim: ['first', 'second'],
       },
     },
     variants: {
-      gridTemplateAreas: ["responsive"],
+      gridTemplateAreas: ['responsive'],
     },
-  };
+  }
 
-  const getConfigValue = (path, defaultValue) =>
-    _.get(config, path, defaultValue);
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
   const pluginApi = {
     config: getConfigValue,
     e: escapeClassName,
-    theme: (path, defaultValue) =>
-      getConfigValue(`theme.${path}`, defaultValue),
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
     variants: (path, defaultValue) => {
       if (_.isArray(config.variants)) {
-        return config.variants;
+        return config.variants
       }
 
-      return getConfigValue(`variants.${path}`, defaultValue);
+      return getConfigValue(`variants.${path}`, defaultValue)
     },
     addUtilities(utilities, variants) {
       addedUtilities.push({
         utilities,
         variants,
-      });
+      })
     },
     matchUtilities() {},
-  };
+  }
 
-  plugin(pluginApi);
+  plugin(pluginApi)
 
   expect(addedUtilities).toEqual([
     {
       utilities: [
         {
-          ".grid-areas-default": {
-            "grid-template-areas": '"first ."\n"second second"',
+          '.grid-areas-default': {
+            'grid-template-areas': '"first ."\n"second second"',
           },
-          ".grid-areas-slim": {
-            "grid-template-areas": '"first"\n"second"',
+          '.grid-areas-slim': {
+            'grid-template-areas': '"first"\n"second"',
           },
         },
       ],
-      variants: ["responsive"],
+      variants: ['responsive'],
     },
     {
       utilities: [
         {
-          ".grid-in-first": {
-            "grid-area": "first",
+          '.grid-in-first': {
+            'grid-area': 'first',
           },
-          ".grid-in-second": {
-            "grid-area": "second",
+          '.grid-in-second': {
+            'grid-area': 'second',
           },
         },
       ],
@@ -169,98 +165,96 @@ test("works for multiple grid templates", () => {
     {
       utilities: [
         {
-          ".row-start-first": {
-            "grid-row-start": "first-start",
+          '.row-start-first': {
+            'grid-row-start': 'first-start',
           },
-          ".row-end-first": {
-            "grid-row-end": "first-end",
+          '.row-end-first': {
+            'grid-row-end': 'first-end',
           },
-          ".col-start-first": {
-            "grid-column-start": "first-start",
+          '.col-start-first': {
+            'grid-column-start': 'first-start',
           },
-          ".col-end-first": {
-            "grid-column-end": "first-end",
+          '.col-end-first': {
+            'grid-column-end': 'first-end',
           },
-          ".row-start-second": {
-            "grid-row-start": "second-start",
+          '.row-start-second': {
+            'grid-row-start': 'second-start',
           },
-          ".row-end-second": {
-            "grid-row-end": "second-end",
+          '.row-end-second': {
+            'grid-row-end': 'second-end',
           },
-          ".col-start-second": {
-            "grid-column-start": "second-start",
+          '.col-start-second': {
+            'grid-column-start': 'second-start',
           },
-          ".col-end-second": {
-            "grid-column-end": "second-end",
+          '.col-end-second': {
+            'grid-column-end': 'second-end',
           },
         },
       ],
       variants: [],
     },
-  ]);
-});
+  ])
+})
 
-test("works for more than two rows", () => {
-  const addedUtilities = [];
+test('works for more than two rows', () => {
+  const addedUtilities = []
 
   const config = {
     theme: {
       gridTemplateAreas: {
-        layout: ["first .", "second second", "third third"],
+        layout: ['first .', 'second second', 'third third'],
       },
     },
     variants: {
-      gridTemplateAreas: ["responsive"],
+      gridTemplateAreas: ['responsive'],
     },
-  };
+  }
 
-  const getConfigValue = (path, defaultValue) =>
-    _.get(config, path, defaultValue);
+  const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue)
   const pluginApi = {
     config: getConfigValue,
     e: escapeClassName,
-    theme: (path, defaultValue) =>
-      getConfigValue(`theme.${path}`, defaultValue),
+    theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue),
     variants: (path, defaultValue) => {
       if (_.isArray(config.variants)) {
-        return config.variants;
+        return config.variants
       }
 
-      return getConfigValue(`variants.${path}`, defaultValue);
+      return getConfigValue(`variants.${path}`, defaultValue)
     },
     addUtilities(utilities, variants) {
       addedUtilities.push({
         utilities,
         variants,
-      });
+      })
     },
     matchUtilities() {},
-  };
+  }
 
-  plugin(pluginApi);
+  plugin(pluginApi)
 
   expect(addedUtilities).toEqual([
     {
       utilities: [
         {
-          ".grid-areas-layout": {
-            "grid-template-areas": '"first ."\n"second second"\n"third third"',
+          '.grid-areas-layout': {
+            'grid-template-areas': '"first ."\n"second second"\n"third third"',
           },
         },
       ],
-      variants: ["responsive"],
+      variants: ['responsive'],
     },
     {
       utilities: [
         {
-          ".grid-in-first": {
-            "grid-area": "first",
+          '.grid-in-first': {
+            'grid-area': 'first',
           },
-          ".grid-in-second": {
-            "grid-area": "second",
+          '.grid-in-second': {
+            'grid-area': 'second',
           },
-          ".grid-in-third": {
-            "grid-area": "third",
+          '.grid-in-third': {
+            'grid-area': 'third',
           },
         },
       ],
@@ -269,45 +263,45 @@ test("works for more than two rows", () => {
     {
       utilities: [
         {
-          ".row-start-first": {
-            "grid-row-start": "first-start",
+          '.row-start-first': {
+            'grid-row-start': 'first-start',
           },
-          ".row-end-first": {
-            "grid-row-end": "first-end",
+          '.row-end-first': {
+            'grid-row-end': 'first-end',
           },
-          ".col-start-first": {
-            "grid-column-start": "first-start",
+          '.col-start-first': {
+            'grid-column-start': 'first-start',
           },
-          ".col-end-first": {
-            "grid-column-end": "first-end",
+          '.col-end-first': {
+            'grid-column-end': 'first-end',
           },
-          ".row-start-second": {
-            "grid-row-start": "second-start",
+          '.row-start-second': {
+            'grid-row-start': 'second-start',
           },
-          ".row-end-second": {
-            "grid-row-end": "second-end",
+          '.row-end-second': {
+            'grid-row-end': 'second-end',
           },
-          ".col-start-second": {
-            "grid-column-start": "second-start",
+          '.col-start-second': {
+            'grid-column-start': 'second-start',
           },
-          ".col-end-second": {
-            "grid-column-end": "second-end",
+          '.col-end-second': {
+            'grid-column-end': 'second-end',
           },
-          ".row-start-third": {
-            "grid-row-start": "third-start",
+          '.row-start-third': {
+            'grid-row-start': 'third-start',
           },
-          ".row-end-third": {
-            "grid-row-end": "third-end",
+          '.row-end-third': {
+            'grid-row-end': 'third-end',
           },
-          ".col-start-third": {
-            "grid-column-start": "third-start",
+          '.col-start-third': {
+            'grid-column-start': 'third-start',
           },
-          ".col-end-third": {
-            "grid-column-end": "third-end",
+          '.col-end-third': {
+            'grid-column-end': 'third-end',
           },
         },
       ],
       variants: [],
     },
-  ]);
-});
+  ])
+})
diff --git a/test/util/extractGridAreaNames.test.js b/test/util/extractGridAreaNames.test.js
index a5f7d83..07d21ce 100644
--- a/test/util/extractGridAreaNames.test.js
+++ b/test/util/extractGridAreaNames.test.js
@@ -1,70 +1,66 @@
-import extractGridAreaNames from "../../src/util/extractGridAreaNames";
+import extractGridAreaNames from '../../src/util/extractGridAreaNames'
 
-test("passing nothing gives you an empty list", () => {
-  expect(extractGridAreaNames()).toEqual([]);
-});
+test('passing nothing gives you an empty list', () => {
+  expect(extractGridAreaNames()).toEqual([])
+})
 
-test("passing an empty object gives you an empty list", () => {
-  expect(extractGridAreaNames({})).toEqual([]);
-});
+test('passing an empty object gives you an empty list', () => {
+  expect(extractGridAreaNames({})).toEqual([])
+})
 
-test("passing an empty definition gives you an empty list", () => {
+test('passing an empty definition gives you an empty list', () => {
   const gridTemplateAreas = {
     layout: [],
-  };
+  }
 
-  expect(extractGridAreaNames(gridTemplateAreas)).toEqual([]);
-});
+  expect(extractGridAreaNames(gridTemplateAreas)).toEqual([])
+})
 
-test("single grid area", () => {
+test('single grid area', () => {
   const gridTemplateAreas = {
-    layout: ["abc"],
-  };
+    layout: ['abc'],
+  }
 
-  expect(extractGridAreaNames(gridTemplateAreas)).toEqual(["abc"]);
-});
+  expect(extractGridAreaNames(gridTemplateAreas)).toEqual(['abc'])
+})
 
-test("deduplicates names", () => {
+test('deduplicates names', () => {
   const gridTemplateAreas = {
-    layout: ["abc abc"],
-  };
+    layout: ['abc abc'],
+  }
 
-  expect(extractGridAreaNames(gridTemplateAreas)).toEqual(["abc"]);
-});
+  expect(extractGridAreaNames(gridTemplateAreas)).toEqual(['abc'])
+})
 
-test("multiple areas", () => {
+test('multiple areas', () => {
   const gridTemplateAreas = {
-    layout: ["abc def"],
-  };
+    layout: ['abc def'],
+  }
 
-  expect(extractGridAreaNames(gridTemplateAreas)).toEqual(["abc", "def"]);
-});
+  expect(extractGridAreaNames(gridTemplateAreas)).toEqual(['abc', 'def'])
+})
 
-test("multiple rows", () => {
+test('multiple rows', () => {
   const gridTemplateAreas = {
-    layout: ["abc", "def"],
-  };
+    layout: ['abc', 'def'],
+  }
 
-  expect(extractGridAreaNames(gridTemplateAreas)).toEqual(["abc", "def"]);
-});
+  expect(extractGridAreaNames(gridTemplateAreas)).toEqual(['abc', 'def'])
+})
 
-test("excludes . (empty cell)", () => {
+test('excludes . (empty cell)', () => {
   const gridTemplateAreas = {
-    layout: ["abc abc", "def ."],
-  };
+    layout: ['abc abc', 'def .'],
+  }
 
-  expect(extractGridAreaNames(gridTemplateAreas)).toEqual(["abc", "def"]);
-});
+  expect(extractGridAreaNames(gridTemplateAreas)).toEqual(['abc', 'def'])
+})
 
-test("multiple layouts", () => {
+test('multiple layouts', () => {
   const gridTemplateAreas = {
-    default: ["abc abc", "def ."],
-    large: ["abc abc abc", "def hij hij"],
-  };
-
-  expect(extractGridAreaNames(gridTemplateAreas)).toEqual([
-    "abc",
-    "def",
-    "hij",
-  ]);
-});
+    default: ['abc abc', 'def .'],
+    large: ['abc abc abc', 'def hij hij'],
+  }
+
+  expect(extractGridAreaNames(gridTemplateAreas)).toEqual(['abc', 'def', 'hij'])
+})