From 7fcb89697d656c3d751841e441f1ce5c4d3cdac6 Mon Sep 17 00:00:00 2001
From: Dennis Jauernig <dennis@factorial.io>
Date: Sun, 18 Sep 2022 22:05:06 +0200
Subject: [PATCH 1/8] feature(prettier): optionally respect local prettier
 rules

---
 README.md       |  43 +++++++++++-------
 lib/index.js    | 117 ++++++++++++++++++++++++++++++++----------------
 lib/messages.js |   1 +
 lib/types.d.ts  |   6 +++
 4 files changed, 112 insertions(+), 55 deletions(-)

diff --git a/README.md b/README.md
index 14af92f..6661d69 100644
--- a/README.md
+++ b/README.md
@@ -24,34 +24,43 @@ npm install --sav-dev `@factorial-io/drupal-breakpoints-css`
 
 In your themes root folder, besides your already defined breakpoints file from Drupal, add a `breakpoints.config.yml` configuration file. The following properties are mandatory:
 
-```js
+```typescript
 // ./lib/types.d.ts
-export interface UserConfig {
+export interface Config {
   drupal: {
-    path: string,
-    themeName: string,
+    path: string;
+    themeName: string;
+  };
+  prettier?: {
+    path: string;
   };
-  js?: {
-    enabled?: boolean,
-    path?: string,
-    es6?: "commonjs" | "module",
+  js: {
+    enabled: boolean;
+    path: string;
+    type: commonjs | module;
   };
-  css?: {
-    enabled?: boolean,
-    path?: string,
-    element?: string,
+  css: {
+    enabled: boolean;
+    path: string;
+    element: string;
   };
-  options?: {
-    mediaQuery?: boolean,
-    resolution?: boolean,
-    minWidth?: boolean,
-    maxWidth?: boolean,
+  options: {
+    mediaQuery: boolean;
+    resolution: boolean;
+    minWidth: boolean;
+    maxWidth: boolean;
   };
 }
 ```
 
+### Schema Validation
+
 You could validate your configuration files with the help of [JSON Schema Store](https://www.schemastore.org/json) and e.g [Visual Studio Code](https://code.visualstudio.com/) [YAML Extension](https://marketplace.visualstudio.com/items?itemName=redhat.vscode-yaml).
 
+### Prettier
+
+To respect your local prettier formatting rules please add the path to the configuration file to `prettier.path`.
+
 ## Usage
 
 Just run `yarn drupal-breakpoints-css start` or `npm run drupal-breakpoints-css start`. Thats it :)
diff --git a/lib/index.js b/lib/index.js
index a1469f2..bb0ea7a 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -55,8 +55,10 @@ module.exports = class Breakpoints {
 
   /**
    * Calls all necessary methods
+   *
+   * @async
    */
-  #init() {
+  async #init() {
     this.#getUserConfig();
     const isValid = this.#isValidUserConfig();
     if (!isValid) {
@@ -67,10 +69,10 @@ module.exports = class Breakpoints {
     this.#setGroupedBreakpoints();
     this.#generateCustomProperties();
     if (this.#config.css?.enabled) {
-      this.#generateAndWriteCSS();
+      await this.#generateAndWriteCSS();
     }
     if (this.#config.js?.enabled) {
-      this.#generateAndWriteJS();
+      await this.#generateAndWriteJS();
     }
   }
 
@@ -82,7 +84,7 @@ module.exports = class Breakpoints {
     try {
       this.#config = deepmerge(
         this.#defaultConfig,
-        Breakpoints.readYamlFile(userConfigPath)
+        Breakpoints.readAndParseYamlConfiguration(userConfigPath)
       );
     } catch (error) {
       console.error(MESSAGES.userConfig(userConfigPath));
@@ -92,7 +94,7 @@ module.exports = class Breakpoints {
   /**
    * Checks if config is valid
    *
-   * @returns {boolean}
+   * @returns {boolean} - true if this is a valid userConfig
    */
   #isValidUserConfig() {
     if (
@@ -118,7 +120,8 @@ module.exports = class Breakpoints {
       this.#config.drupal.path
     );
     try {
-      this.#breakpoints = Breakpoints.readYamlFile(breakpointsPath);
+      this.#breakpoints =
+        Breakpoints.readAndParseYamlConfiguration(breakpointsPath);
     } catch (error) {
       console.error(MESSAGES.breakpoints(breakpointsPath));
     }
@@ -208,58 +211,93 @@ module.exports = class Breakpoints {
 
   /**
    * Generate, format and write the CSS file
+   *
+   * @async
    */
-  #generateAndWriteCSS() {
+  async #generateAndWriteCSS() {
     const filePath = path.resolve(process.cwd(), this.#config.css.path);
     let string = "";
     this.#customProperties.forEach((customProperty) => {
       string += `--${customProperty.identifier}: "${customProperty.value}";`;
     });
-    Breakpoints.writeFile(
+    let prettierConfig = {};
+    if (this.#config.prettier?.path) {
+      prettierConfig = await Breakpoints.getPrettierConfig(
+        this.#config.prettier?.path
+      );
+    }
+    await Breakpoints.writeFile(
       filePath,
       prettier.format(`${this.#config.css.element} {${string}}`, {
+        ...prettierConfig,
         parser: "css",
-      }),
-      () => console.error(MESSAGES.writeCSSFile(filePath))
+      })
     );
   }
 
   /**
    * Generate, format and write the JS file
+   *
+   * @async
    */
-  #generateAndWriteJS() {
+  async #generateAndWriteJS() {
     const filePath = path.resolve(process.cwd(), this.#config.js.path);
     const strings = this.#customProperties.map(
       (customProperty) =>
         `"${customProperty.identifier}": "${customProperty.value}"`
     );
+    let prettierConfig = {};
+    if (this.#config.prettier?.path) {
+      prettierConfig = await Breakpoints.getPrettierConfig(
+        this.#config.prettier?.path
+      );
+    }
     if (this.#config.js.type === "module") {
-      Breakpoints.writeFile(
+      await Breakpoints.writeFile(
         filePath,
         prettier.format(
           `const BREAKPOINTS = {${strings.join(
             ","
           )}}; export default BREAKPOINTS;`,
-          { parser: "babel" }
-        ),
-        () => console.error(MESSAGES.writeJSFile(filePath))
+          {
+            ...prettierConfig,
+            parser: "babel",
+          }
+        )
       );
     } else {
-      Breakpoints.writeFile(
+      await Breakpoints.writeFile(
         filePath,
         prettier.format(`module.exports = {${strings.join(",")}};`, {
+          ...prettierConfig,
           parser: "babel",
-        }),
-        () => console.error(MESSAGES.writeJSFile(filePath))
+        })
       );
     }
   }
 
+  /**
+   *
+   * @static
+   * @async
+   * @param {string} filePath - Path to prettier config relative to the themes root folder
+   * @returns {Promise} - Prettier Config Promise
+   */
+  static async getPrettierConfig(filePath) {
+    try {
+      return await prettier.resolveConfig(filePath, { useCache: false });
+    } catch (error) {
+      console.error(MESSAGES.prettierConfig(filePath));
+    }
+    return false;
+  }
+
   /**
    * Parse mediaQuery to extract min-widths values
    *
-   * @param {object} option -
-   * @returns {string}
+   * @static
+   * @param {object} option - Breakpoints media query
+   * @returns {string} - Min-Width or empty string
    */
   static getMinWidths(option) {
     const regex = new RegExp(
@@ -279,8 +317,9 @@ module.exports = class Breakpoints {
   /**
    * Parse mediaQuery to extract max-widths values
    *
-   * @param {object} option
-   * @returns {string}
+   * @static
+   * @param {object} option - Breakpoints media query
+   * @returns {string} - Max-Width or empty string
    */
   static getMaxWidths(option) {
     const regex = new RegExp(
@@ -301,8 +340,9 @@ module.exports = class Breakpoints {
    * Read multipliers and return last one or 1x
    * Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution#units
    *
-   * @param {object} option
-   * @returns {string} -
+   * @static
+   * @param {object} option - Breakpoints media query
+   * @returns {string} - Actual defined resolution or 1x
    */
   static getResolutions(option) {
     if (!option.multipliers || !option.multipliers.length) {
@@ -327,8 +367,9 @@ module.exports = class Breakpoints {
    * Convert a given string to a PascalCaseish format (without using a
    * dictionary is basically impossible)
    *
-   * @param {string} string -
-   * @returns {string}
+   * @static
+   * @param {string} string - String to convert to pascalish
+   * @returns {string} - Pascalish string
    */
   static convertToPascalCaseish(string) {
     return string
@@ -348,26 +389,26 @@ module.exports = class Breakpoints {
   /**
    * Writes the css/js file
    *
-   * @param {string} filePath -
-   * @param {string} content -
-   * @param {Function} handleError -
+   * @static
+   * @async
+   * @param {string} filePath - FilePath
+   * @param {string} content - Content to write to file
+   * @returns {Promise} - Promise
    */
-  static writeFile(filePath, content, handleError) {
-    fs.writeFile(filePath, content, (error) => {
-      if (error !== null) {
-        handleError();
-      }
-    });
+  static async writeFile(filePath, content) {
+    await fs.promises.mkdir(path.dirname(filePath), { recursive: true });
+    return fs.promises.writeFile(filePath, content);
   }
 
   /**
    * Load yaml file
    *
-   * @param {string} filePath
-   * @returns {object}
+   * @static
+   * @param {string} filePath - Path to load the configuration from
+   * @returns {object} - The parsed configuration
    */
   // eslint-disable-next-line consistent-return
-  static readYamlFile(filePath) {
+  static readAndParseYamlConfiguration(filePath) {
     try {
       return yaml.load(fs.readFileSync(filePath, "utf-8"));
     } catch (error) {
diff --git a/lib/messages.js b/lib/messages.js
index 78327b8..cd30779 100644
--- a/lib/messages.js
+++ b/lib/messages.js
@@ -5,6 +5,7 @@ module.exports = {
     `Missing "userConfig.drupal.themeName". Will use "${name}" for now.`,
   noOutput: (config) =>
     `No output with this configuration:\n${JSON.stringify(config)}`,
+  prettierConfig: (path) => `Couldn't read prettier config from ${path}!`,
   readFile: (path) => `Couldn't read from ${path} file!`,
   resolutionRangeError: (option) =>
     `There is a problem parsing the resolution values from: ${JSON.stringify(
diff --git a/lib/types.d.ts b/lib/types.d.ts
index f540c12..6e355f9 100644
--- a/lib/types.d.ts
+++ b/lib/types.d.ts
@@ -3,6 +3,9 @@ export interface Config {
     path: string;
     themeName: string;
   };
+  prettier?: {
+    path: string;
+  };
   js: {
     enabled: boolean;
     path: string;
@@ -26,6 +29,9 @@ export interface UserConfig {
     path: string;
     themeName: string;
   };
+  prettier?: {
+    path: string;
+  };
   js?: {
     enabled?: boolean;
     path?: string;

From f77a7d625578010ae7e2363b0259c71dbb28b53f Mon Sep 17 00:00:00 2001
From: Dennis Jauernig <dennis@factorial.io>
Date: Sun, 18 Sep 2022 22:09:29 +0200
Subject: [PATCH 2/8] fix(userConfig): fix enum

---
 README.md      | 28 ++++++++++++++--------------
 lib/types.d.ts |  2 +-
 2 files changed, 15 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index 6661d69..cf4c073 100644
--- a/README.md
+++ b/README.md
@@ -26,7 +26,7 @@ In your themes root folder, besides your already defined breakpoints file from D
 
 ```typescript
 // ./lib/types.d.ts
-export interface Config {
+export interface UserConfig {
   drupal: {
     path: string;
     themeName: string;
@@ -34,21 +34,21 @@ export interface Config {
   prettier?: {
     path: string;
   };
-  js: {
-    enabled: boolean;
-    path: string;
-    type: commonjs | module;
+  js?: {
+    enabled?: boolean;
+    path?: string;
+    type?: commonjs | module;
   };
-  css: {
-    enabled: boolean;
-    path: string;
-    element: string;
+  css?: {
+    enabled?: boolean;
+    path?: string;
+    element?: string;
   };
-  options: {
-    mediaQuery: boolean;
-    resolution: boolean;
-    minWidth: boolean;
-    maxWidth: boolean;
+  options?: {
+    mediaQuery?: boolean;
+    resolution?: boolean;
+    minWidth?: boolean;
+    maxWidth?: boolean;
   };
 }
 ```
diff --git a/lib/types.d.ts b/lib/types.d.ts
index 6e355f9..2c2c642 100644
--- a/lib/types.d.ts
+++ b/lib/types.d.ts
@@ -35,7 +35,7 @@ export interface UserConfig {
   js?: {
     enabled?: boolean;
     path?: string;
-    type?: "commonjs" | "module";
+    type?: commonjs | module;
   };
   css?: {
     enabled?: boolean;

From 189383a51c46734fc1323f20b5b681e1aa5c7482 Mon Sep 17 00:00:00 2001
From: Dennis Jauernig <dennis@factorial.io>
Date: Sun, 18 Sep 2022 22:18:50 +0200
Subject: [PATCH 3/8] refactor: simplify prettierConfig call

---
 lib/index.js | 18 ++++++------------
 1 file changed, 6 insertions(+), 12 deletions(-)

diff --git a/lib/index.js b/lib/index.js
index bb0ea7a..92a7d9b 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -220,12 +220,9 @@ module.exports = class Breakpoints {
     this.#customProperties.forEach((customProperty) => {
       string += `--${customProperty.identifier}: "${customProperty.value}";`;
     });
-    let prettierConfig = {};
-    if (this.#config.prettier?.path) {
-      prettierConfig = await Breakpoints.getPrettierConfig(
-        this.#config.prettier?.path
-      );
-    }
+    const prettierConfig = this.#config.prettier?.path
+      ? await Breakpoints.getPrettierConfig(this.#config.prettier?.path)
+      : {};
     await Breakpoints.writeFile(
       filePath,
       prettier.format(`${this.#config.css.element} {${string}}`, {
@@ -246,12 +243,9 @@ module.exports = class Breakpoints {
       (customProperty) =>
         `"${customProperty.identifier}": "${customProperty.value}"`
     );
-    let prettierConfig = {};
-    if (this.#config.prettier?.path) {
-      prettierConfig = await Breakpoints.getPrettierConfig(
-        this.#config.prettier?.path
-      );
-    }
+    const prettierConfig = this.#config.prettier?.path
+      ? await Breakpoints.getPrettierConfig(this.#config.prettier?.path)
+      : {};
     if (this.#config.js.type === "module") {
       await Breakpoints.writeFile(
         filePath,

From 8eb1cc4c0fe1a7fbfa4b24fc8f184ae05758d841 Mon Sep 17 00:00:00 2001
From: Dennis Jauernig <dennis@factorial.io>
Date: Sun, 18 Sep 2022 22:20:58 +0200
Subject: [PATCH 4/8] refactor: simplify prettier.format call

---
 lib/index.js | 36 ++++++++++++++++++------------------
 1 file changed, 18 insertions(+), 18 deletions(-)

diff --git a/lib/index.js b/lib/index.js
index 92a7d9b..5f96cf2 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -220,15 +220,15 @@ module.exports = class Breakpoints {
     this.#customProperties.forEach((customProperty) => {
       string += `--${customProperty.identifier}: "${customProperty.value}";`;
     });
-    const prettierConfig = this.#config.prettier?.path
-      ? await Breakpoints.getPrettierConfig(this.#config.prettier?.path)
-      : {};
+    const prettierConfig = {
+      ...(this.#config.prettier?.path
+        ? await Breakpoints.getPrettierConfig(this.#config.prettier?.path)
+        : {}),
+      parser: "css",
+    };
     await Breakpoints.writeFile(
       filePath,
-      prettier.format(`${this.#config.css.element} {${string}}`, {
-        ...prettierConfig,
-        parser: "css",
-      })
+      prettier.format(`${this.#config.css.element} {${string}}`, prettierConfig)
     );
   }
 
@@ -243,9 +243,12 @@ module.exports = class Breakpoints {
       (customProperty) =>
         `"${customProperty.identifier}": "${customProperty.value}"`
     );
-    const prettierConfig = this.#config.prettier?.path
-      ? await Breakpoints.getPrettierConfig(this.#config.prettier?.path)
-      : {};
+    const prettierConfig = {
+      ...(this.#config.prettier?.path
+        ? await Breakpoints.getPrettierConfig(this.#config.prettier?.path)
+        : {}),
+      parser: "babel",
+    };
     if (this.#config.js.type === "module") {
       await Breakpoints.writeFile(
         filePath,
@@ -253,19 +256,16 @@ module.exports = class Breakpoints {
           `const BREAKPOINTS = {${strings.join(
             ","
           )}}; export default BREAKPOINTS;`,
-          {
-            ...prettierConfig,
-            parser: "babel",
-          }
+          prettierConfig
         )
       );
     } else {
       await Breakpoints.writeFile(
         filePath,
-        prettier.format(`module.exports = {${strings.join(",")}};`, {
-          ...prettierConfig,
-          parser: "babel",
-        })
+        prettier.format(
+          `module.exports = {${strings.join(",")}};`,
+          prettierConfig
+        )
       );
     }
   }

From 4a47e6bf4c70f30faa66db20036993b7253e0e5d Mon Sep 17 00:00:00 2001
From: Dennis Jauernig <dennis@factorial.io>
Date: Sun, 18 Sep 2022 22:25:30 +0200
Subject: [PATCH 5/8] docs(regex): add comment to clarify strange looking array
 access by index

---
 lib/index.js | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/lib/index.js b/lib/index.js
index 5f96cf2..aadd0b4 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -324,6 +324,8 @@ module.exports = class Breakpoints {
     if (!width) {
       return "";
     }
+    // To understand this weird index access please take a look
+    // at the RegExp matching groups
     if (!Number.isFinite(width[2]) && !UNITS.length.includes(width[4])) {
       throw new RangeError(MESSAGES.widthRangeError(option));
     }
@@ -348,6 +350,8 @@ module.exports = class Breakpoints {
     if (!resolution) {
       return "";
     }
+    // To understand this weird index access please take a look
+    // at the RegExp matching groups
     if (
       !Number.isFinite(resolution[1]) &&
       !UNITS.resolution.includes(resolution[2])

From 3f704eeb3c622a77eb382aa3b6912824cc1e2757 Mon Sep 17 00:00:00 2001
From: Dennis Jauernig <dennis@factorial.io>
Date: Sun, 18 Sep 2022 22:37:13 +0200
Subject: [PATCH 6/8] refactor: extract to inner function, extract patterns to
 separate file

---
 lib/index.js  | 61 ++++++++++++++++++++++++++++++++-------------------
 lib/regexp.js |  7 ++++++
 2 files changed, 46 insertions(+), 22 deletions(-)
 create mode 100644 lib/regexp.js

diff --git a/lib/index.js b/lib/index.js
index aadd0b4..29fef3c 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -6,6 +6,7 @@ const prettier = require("prettier");
 const UNITS = require("./units");
 const DEFAULT_CONFIG = require("./defaultConfig");
 const MESSAGES = require("./messages");
+const REGEXP = require("./regexp");
 
 module.exports = class Breakpoints {
   /**
@@ -175,9 +176,9 @@ module.exports = class Breakpoints {
   #generateCustomProperties() {
     this.#breakpointsMap.forEach((options, group) => {
       options.forEach((option) => {
-        const baseName = `${Breakpoints.convertToPascalCaseish(
-          group
-        )}-${option.label.replace(/\s+/g, "").toLowerCase()}`;
+        const baseName = `${Breakpoints.normalizeStrings(group)}-${option.label
+          .replace(/\s+/g, "")
+          .toLowerCase()}`;
         if (this.#config.options.mediaQuery) {
           this.#customProperties.push({
             identifier: `${baseName}-mediaQuery`,
@@ -250,6 +251,15 @@ module.exports = class Breakpoints {
       parser: "babel",
     };
     if (this.#config.js.type === "module") {
+      await writeAsModule();
+    } else {
+      await writeAsCommonjs();
+    }
+
+    /**
+     * Format and write as esm
+     */
+    async function writeAsModule() {
       await Breakpoints.writeFile(
         filePath,
         prettier.format(
@@ -259,7 +269,12 @@ module.exports = class Breakpoints {
           prettierConfig
         )
       );
-    } else {
+    }
+
+    /**
+     * Format and write as Commonjs
+     */
+    async function writeAsCommonjs() {
       await Breakpoints.writeFile(
         filePath,
         prettier.format(
@@ -294,10 +309,7 @@ module.exports = class Breakpoints {
    * @returns {string} - Min-Width or empty string
    */
   static getMinWidths(option) {
-    const regex = new RegExp(
-      `min-width:\\s*((\\d+(\\.\\d+)?)\\s*(${UNITS.length.join("|")}))`,
-      "g"
-    );
+    const regex = new RegExp(REGEXP.minWidth, "g");
     const width = [...option.mediaQuery.matchAll(regex)][0];
     if (!width) {
       return "";
@@ -316,10 +328,7 @@ module.exports = class Breakpoints {
    * @returns {string} - Max-Width or empty string
    */
   static getMaxWidths(option) {
-    const regex = new RegExp(
-      `max-width:\\s*((\\d+(\\.\\d+)?)\\s*(${UNITS.length.join("|")}))`,
-      "g"
-    );
+    const regex = new RegExp(REGEXP.maxWidth, "g");
     const width = [...option.mediaQuery.matchAll(regex)][0];
     if (!width) {
       return "";
@@ -345,7 +354,7 @@ module.exports = class Breakpoints {
       return "1x";
     }
     const largestResolution = [...option.multipliers].sort().pop();
-    const regex = new RegExp(`(\\d+)\\s*(${UNITS.resolution.join("|")})`);
+    const regex = new RegExp(REGEXP.resolution);
     const resolution = [...largestResolution.matchAll(regex)][0];
     if (!resolution) {
       return "";
@@ -369,19 +378,27 @@ module.exports = class Breakpoints {
    * @param {string} string - String to convert to pascalish
    * @returns {string} - Pascalish string
    */
-  static convertToPascalCaseish(string) {
+  static normalizeStrings(string) {
     return string
       .replace(/\s+/g, "")
       .split("_")
-      .map((subString) =>
-        subString
-          .replace(
-            /\w+/g,
-            (word) => word[0].toUpperCase() + word.slice(1).toLowerCase()
-          )
-          .replace(".", "-")
-      )
+      .map((subString) => convertToPascalCase(subString))
       .join("");
+
+    /**
+     * Converts to PascalCase
+     *
+     * @param {string} subString
+     * @returns {string}
+     */
+    function convertToPascalCase(subString) {
+      return subString
+        .replace(
+          /\w+/g,
+          (word) => word[0].toUpperCase() + word.slice(1).toLowerCase()
+        )
+        .replace(".", "-");
+    }
   }
 
   /**
diff --git a/lib/regexp.js b/lib/regexp.js
new file mode 100644
index 0000000..7170e5d
--- /dev/null
+++ b/lib/regexp.js
@@ -0,0 +1,7 @@
+const UNITS = require("./units");
+
+module.exports = {
+  maxWidth: `min-width:\\s*((\\d+(\\.\\d+)?)\\s*(${UNITS.length.join("|")}))`,
+  minWidth: `min-width:\\s*((\\d+(\\.\\d+)?)\\s*(${UNITS.length.join("|")}))`,
+  resolution: `(\\d+)\\s*(${UNITS.resolution.join("|")})`,
+};

From faf46e1b2cc0585fe552872742cc0ec13ba89558 Mon Sep 17 00:00:00 2001
From: Dennis Jauernig <dennis@factorial.io>
Date: Mon, 19 Sep 2022 10:05:13 +0200
Subject: [PATCH 7/8] fix!: change drupal.path => drupal.breakpointsPath and
 prettier.path => prettier.configPath to increase readability

---
 lib/defaultConfig.js |  2 +-
 lib/index.js         | 12 ++++++------
 lib/types.d.ts       | 10 +++++-----
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/lib/defaultConfig.js b/lib/defaultConfig.js
index 1fbfc31..814cd34 100644
--- a/lib/defaultConfig.js
+++ b/lib/defaultConfig.js
@@ -1,6 +1,6 @@
 module.exports = {
   drupal: {
-    path: "",
+    breakpointsPath: "",
     themeName: "",
   },
   js: {
diff --git a/lib/index.js b/lib/index.js
index 15d1d7f..400c987 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -99,7 +99,7 @@ module.exports = class Breakpoints {
    */
   #isValidUserConfig() {
     if (
-      !this.#config.drupal?.path ||
+      !this.#config.drupal?.breakpointsPath ||
       (!this.#config.css?.enabled && !this.#config.js?.enabled) ||
       !Object.values(this.#config.options).includes(true)
     ) {
@@ -118,7 +118,7 @@ module.exports = class Breakpoints {
   #getBreakpoints() {
     const breakpointsPath = path.resolve(
       process.cwd(),
-      this.#config.drupal.path
+      this.#config.drupal.breakpointsPath
     );
     try {
       this.#breakpoints =
@@ -222,8 +222,8 @@ module.exports = class Breakpoints {
       string += `--${customProperty.identifier}: "${customProperty.value}";`;
     });
     const prettierConfig = {
-      ...(this.#config.prettier?.path
-        ? await Breakpoints.getPrettierConfig(this.#config.prettier?.path)
+      ...(this.#config.prettier?.configPath
+        ? await Breakpoints.getPrettierConfig(this.#config.prettier?.configPath)
         : {}),
       parser: "css",
     };
@@ -245,8 +245,8 @@ module.exports = class Breakpoints {
         `"${customProperty.identifier}": "${customProperty.value}"`
     );
     const prettierConfig = {
-      ...(this.#config.prettier?.path
-        ? await Breakpoints.getPrettierConfig(this.#config.prettier?.path)
+      ...(this.#config.prettier?.configPath
+        ? await Breakpoints.getPrettierConfig(this.#config.prettier?.configPath)
         : {}),
       parser: "babel",
     };
diff --git a/lib/types.d.ts b/lib/types.d.ts
index 9a9f9db..ac6ab3f 100644
--- a/lib/types.d.ts
+++ b/lib/types.d.ts
@@ -1,10 +1,10 @@
 export interface Config {
   drupal: {
-    path: string;
+    breakpointsPath: string;
     themeName: string;
   };
   prettier?: {
-    path: string;
+    configPath: string;
   };
   js: {
     enabled: boolean;
@@ -26,16 +26,16 @@ export interface Config {
 
 export interface UserConfig {
   drupal: {
-    path: string;
+    breakpointsPath: string;
     themeName: string;
   };
   prettier?: {
-    path: string;
+    configPath: string;
   };
   js?: {
     enabled?: boolean;
     path?: string;
-    type?: commonjs | module;
+    type?: "commonjs" | "module";
   };
   css?: {
     enabled?: boolean;

From b5a22ccc74984d9b1c59426023028245005dd52a Mon Sep 17 00:00:00 2001
From: Dennis Jauernig <dennis@factorial.io>
Date: Mon, 19 Sep 2022 14:46:50 +0200
Subject: [PATCH 8/8] fix!: add review suggestions

---
 README.md    | 6 +++---
 lib/index.js | 5 +++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index cf4c073..36119f2 100644
--- a/README.md
+++ b/README.md
@@ -28,16 +28,16 @@ In your themes root folder, besides your already defined breakpoints file from D
 // ./lib/types.d.ts
 export interface UserConfig {
   drupal: {
-    path: string;
+    breakpointsPath: string;
     themeName: string;
   };
   prettier?: {
-    path: string;
+    configPath: string;
   };
   js?: {
     enabled?: boolean;
     path?: string;
-    type?: commonjs | module;
+    type?: "commonjs" | "module";
   };
   css?: {
     enabled?: boolean;
diff --git a/lib/index.js b/lib/index.js
index 400c987..115841b 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -12,6 +12,7 @@ module.exports = class Breakpoints {
   /**
    * @type {import('./types').Config}
    */
+  // @ts-ignore just because of a type inference deficiency for js files
   #defaultConfig = DEFAULT_CONFIG;
 
   /**
@@ -223,7 +224,7 @@ module.exports = class Breakpoints {
     });
     const prettierConfig = {
       ...(this.#config.prettier?.configPath
-        ? await Breakpoints.getPrettierConfig(this.#config.prettier?.configPath)
+        ? await Breakpoints.getPrettierConfig(this.#config.prettier.configPath)
         : {}),
       parser: "css",
     };
@@ -246,7 +247,7 @@ module.exports = class Breakpoints {
     );
     const prettierConfig = {
       ...(this.#config.prettier?.configPath
-        ? await Breakpoints.getPrettierConfig(this.#config.prettier?.configPath)
+        ? await Breakpoints.getPrettierConfig(this.#config.prettier.configPath)
         : {}),
       parser: "babel",
     };