From 8206744a5118ebb737b440707cc577b7a140c068 Mon Sep 17 00:00:00 2001 From: Dennis Jauernig Date: Fri, 4 Nov 2022 16:26:19 +0100 Subject: [PATCH 1/5] fix: wrong regex for max-width --- lib/regexp.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/regexp.js b/lib/regexp.js index 7170e5d..c830f74 100644 --- a/lib/regexp.js +++ b/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("|")})`, }; From a3debc1c7a3edbdcc92e66f68a23809974f07599 Mon Sep 17 00:00:00 2001 From: Dennis Jauernig Date: Fri, 4 Nov 2022 16:26:36 +0100 Subject: [PATCH 2/5] feature: add mediaFeature enum --- lib/types.d.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/lib/types.d.ts b/lib/types.d.ts index d784e56..6253a53 100644 --- a/lib/types.d.ts +++ b/lib/types.d.ts @@ -64,7 +64,8 @@ export interface Breakpoint { } export interface customProperty { - identifier: string; + mediaFeature: "minWidth" | "maxWidth" | "resolution" | "mediaQuery"; + name: string; value: string; } From 15ca220961d93cde445a17723bd7d3e4ec20a6f3 Mon Sep 17 00:00:00 2001 From: Dennis Jauernig Date: Fri, 4 Nov 2022 16:31:05 +0100 Subject: [PATCH 3/5] fix: wrong enum, mark mediaFeature as optional --- lib/types.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/types.d.ts b/lib/types.d.ts index 6253a53..907163f 100644 --- a/lib/types.d.ts +++ b/lib/types.d.ts @@ -64,7 +64,7 @@ export interface Breakpoint { } export interface customProperty { - mediaFeature: "minWidth" | "maxWidth" | "resolution" | "mediaQuery"; + mediaFeature?: "minWidth" | "maxWidth" | "resolution"; name: string; value: string; } From a37cee88721401e0a6944ec0c854b4e0458cd875 Mon Sep 17 00:00:00 2001 From: Dennis Jauernig Date: Fri, 4 Nov 2022 16:32:23 +0100 Subject: [PATCH 4/5] - remove mediaFeature from css and just write raw values - add mediaFeature conditionally to the js and custom-media --- lib/index.js | 46 +++++++++++++++++++++++++++++++--------------- 1 file changed, 31 insertions(+), 15 deletions(-) diff --git a/lib/index.js b/lib/index.js index 253b74e..79b4831 100644 --- a/lib/index.js +++ b/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]; } /** From 3d77e046a15974184f2edf06de29cba2deda3090 Mon Sep 17 00:00:00 2001 From: Dennis Jauernig Date: Fri, 4 Nov 2022 16:51:18 +0100 Subject: [PATCH 5/5] docs(readme): slim down samples and add values --- README.md | 34 +++++----------------------------- 1 file changed, 5 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index 9319e6e..ff18fff 100644 --- a/README.md +++ b/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; ```