Merge pull request #11 from factorial-io/feature!/append-min-max-width

Feature!/append min/max width

Author: dnnsjrng

README.md

@@ -98,48 +98,48 @@ 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-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 (2x);
-@custom-media --Themename-medium-minWidth (48rem);
-@custom-media --Themename-medium-maxWidth (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 (2x);
-@custom-media --Themename-large-minWidth (64rem);
-@custom-media --Themename-large-maxWidth (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: "2x";
-  --ThemeName-small-maxWidth: "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: "2x";
-  --ThemeName-medium-minWidth: "48rem";
-  --ThemeName-medium-maxWidth: "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: "2x";
-  --ThemeName-Group-large-minWidth: "64rem";
-  --ThemeName-Group-large-maxWidth: "89.9375rem";
+  --ThemeName-Group-large-resolution: "resolution: 2x";
+  --ThemeName-Group-large-minWidth: "min-width: 64rem";
+  --ThemeName-Group-large-maxWidth: "max-width: 89.9375rem";
 }
 ```
 
 ```js
 // Generated JS file
 const BREAKPOINTS = {
   "ThemeName-small-mediaQuery": "only screen and (max-width: 47.9375rem)",
-  "ThemeName-small-resolution": "2x",
-  "ThemeName-small-maxWidth": "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": "2x",
-  "ThemeName-medium-minWidth": "48rem",
-  "ThemeName-medium-maxWidth": "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": "2x",
-  "ThemeName-Group-large-minWidth": "64rem",
-  "ThemeName-Group-large-maxWidth": "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

@@ -339,7 +339,7 @@ module.exports = class Breakpoints {
     if (!Number.isFinite(width[2]) && !UNITS.length.includes(width[4])) {
       throw new RangeError(MESSAGES.widthRangeError(option));
     }
-    return width[2] + width[4];
+    return `min-width: ${width[2]}${width[4]}`;
   }
 
   /**
@@ -360,7 +360,7 @@ module.exports = class Breakpoints {
     if (!Number.isFinite(width[2]) && !UNITS.length.includes(width[4])) {
       throw new RangeError(MESSAGES.widthRangeError(option));
     }
-    return width[2] + width[4];
+    return `max-width: ${width[2]}${width[4]}`;
   }
 
   /**
@@ -389,7 +389,7 @@ module.exports = class Breakpoints {
     ) {
       throw new RangeError(MESSAGES.resolutionRangeError(option));
     }
-    return resolution[1] + resolution[2];
+    return `resolution: ${resolution[1]}${resolution[2]}`;
   }
 
   /**