Merge pull request #12 from factorial-io/fix!/custom-property-output

fix!/custom property output

Author: dnnsjrng

README.md

@@ -100,46 +100,22 @@ theme_name.lg:
 @custom-media --Themename-small-mediaQuery (only screen and (max-width: 47.9375rem));
 @custom-media --Themename-small-resolution (resolution: 2x);
 @custom-media --Themename-small-maxWidth (max-width: 47.9375rem);
-@custom-media --Themename-medium-mediaQuery (only screen and (min-width: 48rem) and (max-width: 63.9375rem));
-@custom-media --Themename-medium-resolution (resolution: 2x);
-@custom-media --Themename-medium-minWidth (min-width: 48rem);
-@custom-media --Themename-medium-maxWidth (max-width: 63.9375rem);
-@custom-media --Themename-large-mediaQuery (only screen and (min-width: 64rem) and (max-width: 89.9375rem));
-@custom-media --Themename-large-resolution (resolution: 2x);
-@custom-media --Themename-large-minWidth (min-width: 64rem);
-@custom-media --Themename-large-maxWidth (max-width: 89.9375rem);
 
 :root {
   --ThemeName-small-mediaQuery: "only screen and (max-width: 47.9375rem)";
-  --ThemeName-small-resolution: "resolution: 2x";
-  --ThemeName-small-maxWidth: "max-width: 47.9375rem";
-  --ThemeName-medium-mediaQuery: "only screen and (min-width: 48rem) and (max-width: 63.9375rem)";
-  --ThemeName-medium-resolution: "resolution: 2x";
-  --ThemeName-medium-minWidth: "min-width: 48rem";
-  --ThemeName-medium-maxWidth: "max-width: 63.9375rem";
-  --ThemeName-Group-large-mediaQuery: "only screen and (min-width: 64rem) and (max-width: 89.9375rem)";
-  --ThemeName-Group-large-resolution: "resolution: 2x";
-  --ThemeName-Group-large-minWidth: "min-width: 64rem";
-  --ThemeName-Group-large-maxWidth: "max-width: 89.9375rem";
+  --ThemeName-small-resolution: "2x";
+  --ThemeName-small-maxWidth: "47.9375rem";
 }
 ```
 
 ```js
 // Generated JS file
 const BREAKPOINTS = {
-  "ThemeName-small-mediaQuery": "only screen and (max-width: 47.9375rem)",
+  "ThemeName-small-mediaQuery--raw": "only screen and (max-width: 47.9375rem)",
+  "ThemeName-small-resolution--raw": "2x",
   "ThemeName-small-resolution": "resolution: 2x",
+  "ThemeName-small-maxWidth--raw": "47.9375rem",
   "ThemeName-small-maxWidth": "max-width: 47.9375rem",
-  "ThemeName-medium-mediaQuery":
-    "only screen and (min-width: 48rem) and (max-width: 63.9375rem)",
-  "ThemeName-medium-resolution": "resolution: 2x",
-  "ThemeName-medium-minWidth": "min-width: 48rem",
-  "ThemeName-medium-maxWidth": "max-width: 63.9375rem",
-  "ThemeName-Group-large-mediaQuery":
-    "only screen and (min-width: 64rem) and (max-width: 89.9375rem)",
-  "ThemeName-Group-large-resolution": "resolution: 2x",
-  "ThemeName-Group-large-minWidth": "min-width: 64rem",
-  "ThemeName-Group-large-maxWidth": "max-width: 89.9375rem",
 };
 export default BREAKPOINTS;
 ```

lib/index.js

@@ -185,7 +185,7 @@ module.exports = class Breakpoints {
           .toLowerCase()}`;
         if (this.#config.options.mediaQuery) {
           this.#customProperties.push({
-            identifier: `${baseName}-mediaQuery`,
+            name: `${baseName}-mediaQuery`,
             value: option.mediaQuery,
           });
         }
@@ -194,19 +194,22 @@ module.exports = class Breakpoints {
           Breakpoints.getResolutions(option)
         ) {
           this.#customProperties.push({
-            identifier: `${baseName}-resolution`,
+            mediaFeature: "resolution",
+            name: `${baseName}-resolution`,
             value: Breakpoints.getResolutions(option),
           });
         }
         if (this.#config.options.minWidth && Breakpoints.getMinWidths(option)) {
           this.#customProperties.push({
-            identifier: `${baseName}-minWidth`,
+            mediaFeature: "minWidth",
+            name: `${baseName}-minWidth`,
             value: Breakpoints.getMinWidths(option),
           });
         }
         if (this.#config.options.maxWidth && Breakpoints.getMaxWidths(option)) {
           this.#customProperties.push({
-            identifier: `${baseName}-maxWidth`,
+            mediaFeature: "maxWidth",
+            name: `${baseName}-maxWidth`,
             value: Breakpoints.getMaxWidths(option),
           });
         }
@@ -236,16 +239,19 @@ module.exports = class Breakpoints {
     let string = "";
     if (this.#config.css.customMedia) {
       this.#customProperties.forEach((customProperty) => {
+        const mediaFeature = customProperty.mediaFeature
+          ? `${customProperty.mediaFeature}:`
+          : "";
         // 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});`;
+        string += `@custom-media --${customProperty.name} (${mediaFeature} ${customProperty.value});`;
       });
     }
     if (this.#config.css.customProperty) {
       string += `${this.#config.css.element} {`;
       this.#customProperties.forEach((customProperty) => {
-        string += `--${customProperty.identifier}: "${customProperty.value}";`;
+        string += `--${customProperty.name}: "${customProperty.value}";`;
       });
       string += `}`;
     }
@@ -262,10 +268,20 @@ module.exports = class Breakpoints {
    */
   async #generateAndWriteJS() {
     const filePath = path.resolve(process.cwd(), this.#config.js.path);
-    const strings = this.#customProperties.map(
-      (customProperty) =>
-        `"${customProperty.identifier}": "${customProperty.value}"`
-    );
+    const stringArray = [];
+    this.#customProperties.forEach((customProperty) => {
+      const mediaFeature = customProperty.mediaFeature
+        ? `${customProperty.mediaFeature}:`
+        : "";
+      if (mediaFeature) {
+        stringArray.push(
+          `"${customProperty.name}": "(${mediaFeature} ${customProperty.value})"`
+        );
+      }
+      stringArray.push(
+        `"${customProperty.name}--raw": "${customProperty.value}"`
+      );
+    });
     const prettierConfig = {
       ...(this.#config.prettier?.configPath
         ? await Breakpoints.getPrettierConfig(this.#config.prettier.configPath)
@@ -285,7 +301,7 @@ module.exports = class Breakpoints {
       await Breakpoints.writeFile(
         filePath,
         prettier.format(
-          `const BREAKPOINTS = {${strings.join(
+          `const BREAKPOINTS = {${stringArray.join(
             ","
           )}}; export default BREAKPOINTS;`,
           prettierConfig
@@ -300,7 +316,7 @@ module.exports = class Breakpoints {
       await Breakpoints.writeFile(
         filePath,
         prettier.format(
-          `module.exports = {${strings.join(",")}};`,
+          `module.exports = {${stringArray.join(",")}};`,
           prettierConfig
         )
       );
@@ -339,7 +355,7 @@ module.exports = class Breakpoints {
     if (!Number.isFinite(width[2]) && !UNITS.length.includes(width[4])) {
       throw new RangeError(MESSAGES.widthRangeError(option));
     }
-    return `min-width: ${width[2]}${width[4]}`;
+    return width[2] + width[4];
   }
 
   /**
@@ -360,7 +376,7 @@ module.exports = class Breakpoints {
     if (!Number.isFinite(width[2]) && !UNITS.length.includes(width[4])) {
       throw new RangeError(MESSAGES.widthRangeError(option));
     }
-    return `max-width: ${width[2]}${width[4]}`;
+    return width[2] + width[4];
   }
 
   /**
@@ -389,7 +405,7 @@ module.exports = class Breakpoints {
     ) {
       throw new RangeError(MESSAGES.resolutionRangeError(option));
     }
-    return `resolution: ${resolution[1]}${resolution[2]}`;
+    return resolution[1] + resolution[2];
   }
 
   /**

lib/regexp.js

@@ -1,7 +1,7 @@
 const UNITS = require("./units");
 
 module.exports = {
-  maxWidth: `min-width:\\s*((\\d+(\\.\\d+)?)\\s*(${UNITS.length.join("|")}))`,
+  maxWidth: `max-width:\\s*((\\d+(\\.\\d+)?)\\s*(${UNITS.length.join("|")}))`,
   minWidth: `min-width:\\s*((\\d+(\\.\\d+)?)\\s*(${UNITS.length.join("|")}))`,
   resolution: `(\\d+)\\s*(${UNITS.resolution.join("|")})`,
 };

lib/types.d.ts

@@ -64,7 +64,8 @@ export interface Breakpoint {
 }
 
 export interface customProperty {
-  identifier: string;
+  mediaFeature?: "minWidth" | "maxWidth" | "resolution";
+  name: string;
   value: string;
 }