Merge pull request #10 from factorial-io/feature(custom-media)/custom-media-export-option

feature: custom media export option

Author: dnnsjrng

README.md

@@ -43,6 +43,8 @@ export interface UserConfig {
     enabled?: boolean;
     path?: string;
     element?: string;
+    customMedia?: boolean;
+    customProperty?: boolean;
   };
   options?: {
     mediaQuery?: boolean;
@@ -95,6 +97,18 @@ theme_name.lg:
 
 ```css
 /* Generated CSS file */
+@custom-media --Themename-small-mediaQuery (only screen and (max-width: 47.9375rem));
+@custom-media --Themename-small-resolution (2x);
+@custom-media --Themename-small-maxWidth (47.9375rem);
+@custom-media --Themename-medium-mediaQuery (only screen and (min-width: 48rem) and (max-width: 63.9375rem));
+@custom-media --Themename-medium-resolution (2x);
+@custom-media --Themename-medium-minWidth (48rem);
+@custom-media --Themename-medium-maxWidth (63.9375rem);
+@custom-media --Themename-large-mediaQuery (only screen and (min-width: 64rem) and (max-width: 89.9375rem));
+@custom-media --Themename-large-resolution (2x);
+@custom-media --Themename-large-minWidth (64rem);
+@custom-media --Themename-large-maxWidth (89.9375rem);
+
 :root {
   --ThemeName-small-mediaQuery: "only screen and (max-width: 47.9375rem)";
   --ThemeName-small-resolution: "2x";

lib/defaultConfig.js

@@ -12,6 +12,8 @@ module.exports = {
     enabled: true,
     path: "./breakpoints.css",
     element: ":root",
+    customMedia: true,
+    customProperty: true,
   },
   options: {
     mediaQuery: true,

lib/index.js

@@ -110,6 +110,9 @@ module.exports = class Breakpoints {
     if (!this.#config.drupal?.themeName) {
       console.warn(MESSAGES.defaultThemeName());
     }
+    if (!this.#config.css.customMedia && !this.#config.css.customProperty) {
+      console.warn(MESSAGES.noCSSOutput());
+    }
     return true;
   }
 
@@ -217,20 +220,38 @@ module.exports = class Breakpoints {
    * @async
    */
   async #generateAndWriteCSS() {
+    if (!this.#config.css.enabled) {
+      return;
+    }
+    if (!this.#config.css.customMedia && !this.#config.css.customProperty) {
+      return;
+    }
     const filePath = path.resolve(process.cwd(), this.#config.css.path);
-    let string = "";
-    this.#customProperties.forEach((customProperty) => {
-      string += `--${customProperty.identifier}: "${customProperty.value}";`;
-    });
     const prettierConfig = {
       ...(this.#config.prettier?.configPath
         ? await Breakpoints.getPrettierConfig(this.#config.prettier.configPath)
         : {}),
       parser: "css",
     };
+    let string = "";
+    if (this.#config.css.customMedia) {
+      this.#customProperties.forEach((customProperty) => {
+        // For syntax see postcss-custom-media plugin or W3C draft
+        // Ref: https://www.npmjs.com/package/postcss-custom-media
+        // Ref: https://www.w3.org/TR/mediaqueries-5/#at-ruledef-custom-media
+        string += `@custom-media --${customProperty.identifier} (${customProperty.value});`;
+      });
+    }
+    if (this.#config.css.customProperty) {
+      string += `${this.#config.css.element} {`;
+      this.#customProperties.forEach((customProperty) => {
+        string += `--${customProperty.identifier}: "${customProperty.value}";`;
+      });
+      string += `}`;
+    }
     await Breakpoints.writeFile(
       filePath,
-      prettier.format(`${this.#config.css.element} {${string}}`, prettierConfig)
+      prettier.format(string, prettierConfig)
     );
   }
 

lib/messages.js

@@ -4,6 +4,8 @@ module.exports = {
   defaultThemeName: () => `Missing "userConfig.drupal.themeName" value.`,
   noOutput: (config) =>
     `No output with this configuration:\n${JSON.stringify(config)}`,
+  noCSSOutput: () =>
+    `No css output if "customMedia" and "customProperty" options are set to false.`,
   prettierConfig: (path) => `Couldn't read prettier config from ${path}!`,
   readFile: (path) => `Couldn't read from ${path} file!`,
   resolutionRangeError: (option) =>

lib/types.d.ts

@@ -15,6 +15,8 @@ export interface Config {
     enabled: boolean;
     path: string;
     element: string;
+    customMedia: boolean;
+    customProperty: boolean;
   };
   options: {
     mediaQuery: boolean;
@@ -41,6 +43,8 @@ export interface UserConfig {
     enabled?: boolean;
     path?: string;
     element?: string;
+    customMedia?: boolean;
+    customProperty?: boolean;
   };
   options?: {
     mediaQuery?: boolean;

schema/drupal-breakpoints-css.json

@@ -72,6 +72,12 @@
         },
         "element": {
           "type": "string"
+        },
+        "customMedia": {
+          "type": "boolean"
+        },
+        "customProeprty": {
+          "type": "boolean"
         }
       }
     },