Skip to content

Commit

Permalink
Merge pull request #11 from factorial-io/feature!/append-min-max-width
Browse files Browse the repository at this point in the history
Feature!/append min/max width
  • Loading branch information
dnnsjrng authored Nov 4, 2022
2 parents 7f6824c + 47951f7 commit 7aa0eb6
Show file tree
Hide file tree
Showing 2 changed files with 27 additions and 27 deletions.
48 changes: 24 additions & 24 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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;
```
Expand Down
6 changes: 3 additions & 3 deletions lib/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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]}`;
}

/**
Expand All @@ -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]}`;
}

/**
Expand Down Expand Up @@ -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]}`;
}

/**
Expand Down

0 comments on commit 7aa0eb6

Please sign in to comment.