Merge pull request #4 from factorial-io/refactor/improve-configuration-and-add-optional-settings

refactor!: improve configuration and add optional settings

Author: dnnsjrng

.eslintrc.js

@@ -33,4 +33,9 @@ module.exports = {
     "jsdoc/require-param-description": 0,
     "jsdoc/require-returns-description": 0,
   },
+  settings: {
+    jsdoc: {
+      mode: "typescript",
+    },
+  },
 };

README.md

@@ -6,9 +6,9 @@
   alt="Drupal Logo"
   src="https://www.drupal.org/files/Wordmark_blue_RGB.png">
 
-To eliminate the need for different places for breakpoints and only maintain a single source of truth for those, this `node_module` extracts the breakpoints defined in the currently used drupal themes breakpoint file and generates grouped `customProperties` and a separate `js` object with all necessary parameters.
+To eliminate the need for different places for breakpoints and only maintain a single source of truth for those, this `node_module` extracts the breakpoints defined in the currently used Drupal themes breakpoint file and generates grouped `customProperties` and a separate `js` object with all necessary parameters.
 
-If the draft `@custom-media` (See: https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media) or PostCSS (See: https://github.com/postcss/postcss) Custom-media (See: https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media) plugin is already used, media queries can be written with `customProperties`. So any declaration of media queries within stylesheets is omitted and maintainability is increased.
+If the draft [`@custom-media`](https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media) or [PostCSS](https://github.com/postcss/postcss) with [Custom-Media](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-custom-media) plugin is already used, media queries can be written with `customProperties`. So any declaration of media queries within stylesheets is omitted and maintainability is increased.
 
 ## Installation
 
@@ -17,27 +17,41 @@ Install as a `devDependency` with `yarn` or `npm` like:
 ```sh
 yarn add --dev `@factorial-io/drupal-breakpoints-css`
 # or
-npm install --save `@factorial-io/drupal-breakpoints-css`
+npm install --sav-dev `@factorial-io/drupal-breakpoints-css`
 ```
 
 ## Configuration
 
-In your themes root folder, besides your already defined breakpoints file from drupal, add a `.breakpoints.yml` configuration file. The following properties are mandatory:
+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
-/**
- * @type {object}
- * @property {object} paths - Relativ to the themes root folder ...
- * @property {string} paths.breakpoints - ...path to drupals breakpoint file
- * @property {string} paths.css - ...path to your final css file
- * @property {string} paths.js - ...path to your final js file
- * @property {string} themeName - Drupals custom theme name
- * @property {string} extractTo
- * @property {boolean} js - (default true), should generate js file?
- * @property {boolean} css - (default true), should generate css file?
- */
+// ./lib/types.d.ts
+export interface UserConfig {
+  drupal: {
+    path: string,
+    themeName: string,
+  };
+  js?: {
+    enabled?: boolean,
+    path?: string,
+    es6?: "commonjs" | "module",
+  };
+  css?: {
+    enabled?: boolean,
+    path?: string,
+    element?: string,
+  };
+  options?: {
+    mediaQuery?: boolean,
+    resolution?: boolean,
+    minWidth?: boolean,
+    maxWidth?: boolean,
+  };
+}
 ```
 
+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).
+
 ## Usage
 
 Just run `yarn drupal-breakpoints-css start` or `npm run drupal-breakpoints-css start`. Thats it :)
@@ -71,34 +85,34 @@ theme_name.lg:
 ```
 
 ```css
-/* Generated css file */
-html {
-  --ThemeName-small-query: "only screen and (max-width: 47.9375rem)";
+/* Generated CSS file */
+:root {
+  --ThemeName-small-mediaQuery: "only screen and (max-width: 47.9375rem)";
   --ThemeName-small-resolution: "2x";
   --ThemeName-small-maxWidth: "47.9375rem";
-  --ThemeName-medium-query: "only screen and (min-width: 48rem) and (max-width: 63.9375rem)";
+  --ThemeName-medium-mediaQuery: "only screen and (min-width: 48rem) and (max-width: 63.9375rem)";
   --ThemeName-medium-resolution: "2x";
   --ThemeName-medium-minWidth: "48rem";
   --ThemeName-medium-maxWidth: "63.9375rem";
-  --ThemeName-Group-large-query: "only screen and (min-width: 64rem) and (max-width: 89.9375rem)";
+  --ThemeName-Group-large-mediaQuery: "only screen and (min-width: 64rem) and (max-width: 89.9375rem)";
   --ThemeName-Group-large-resolution: "2x";
   --ThemeName-Group-large-minWidth: "64rem";
   --ThemeName-Group-large-maxWidth: "89.9375rem";
 }
 ```
 
 ```js
-// Generated js file
+// Generated JS file
 const BREAKPOINTS = {
-  "ThemeName-small-query": "only screen and (max-width: 47.9375rem)",
+  "ThemeName-small-mediaQuery": "only screen and (max-width: 47.9375rem)",
   "ThemeName-small-resolution": "2x",
   "ThemeName-small-maxWidth": "47.9375rem",
-  "ThemeName-medium-query":
+  "ThemeName-medium-mediaQuery":
     "only screen and (min-width: 48rem) and (max-width: 63.9375rem)",
   "ThemeName-medium-resolution": "2x",
   "ThemeName-medium-minWidth": "48rem",
   "ThemeName-medium-maxWidth": "63.9375rem",
-  "ThemeName-Group-large-query":
+  "ThemeName-Group-large-mediaQuery":
     "only screen and (min-width: 64rem) and (max-width: 89.9375rem)",
   "ThemeName-Group-large-resolution": "2x",
   "ThemeName-Group-large-minWidth": "64rem",
@@ -109,7 +123,7 @@ export default BREAKPOINTS;
 
 ## Acknowledgements
 
-This **Script** uses open source software and would not have been possible without the excellent work of the [Drupal](https://www.drupal.org), [Eslint](https://babeljs.io/team), [Prettier](https://unifiedjs.com/community/member/) and [debug-js](https://github.com/debug-js/debug) teams! Thanks a lot!
+This **Script** uses open source software and would not have been possible without the excellent work of the [Drupal](https://www.drupal.org), [Eslint](https://babeljs.io/team), [deepmerge](https://github.com/TehShrike/deepmerge) and [Prettier](https://unifiedjs.com/community/member/) teams! Thanks a lot!
 
 ## Sponsored by
 

lib/defaultConfig.js

@@ -0,0 +1,22 @@
+module.exports = {
+  drupal: {
+    path: "",
+    themeName: "",
+  },
+  js: {
+    enabled: true,
+    path: "./breakpoints.js",
+    type: "module",
+  },
+  css: {
+    enabled: true,
+    path: "./breakpoints.css",
+    element: ":root",
+  },
+  options: {
+    mediaQuery: true,
+    resolution: true,
+    minWidth: true,
+    maxWidth: true,
+  },
+};