fix: Test fit value against Regex to avoid conflicts with fit=cover

rezozero · May 16, 2023 · 0c0f3e2 · 0c0f3e2
1 parent a346151
commit 0c0f3e2
Show file tree

Hide file tree

Showing 4 changed files with 546 additions and 42 deletions.
diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
         "prepack": "nuxt-module-build",
         "dev": "nuxt dev playground",
         "dev:prepare": "nuxt-module-build --stub && nuxt prepare playground",
-        "clean": "rm -rf node_modules && rm -rf playground/node_modules && rm -rf playground/.nuxt && rm -rf .output && rm -rf dist",
+        "clean": "rm -rf node_modules && rm -rf playground/node_modules && rm -rf playground/.nuxt  && rm -rf playground/.output && rm -rf .output && rm -rf dist",
         "lint": "eslint --fix --ext \".js,.ts,.json\" .",
         "release": "yarn prepack && npm publish --tag next",
         "dev:pack": " yarn prepack && npm pack --dry-run"
@@ -47,7 +47,7 @@
         "@babel/core": "^7.20.12",
         "@babel/preset-env": "^7.14.5",
         "@babel/preset-typescript": "^7.14.5",
-        "@nuxt/image-edge": "^1.0.0-27827328.bc9ddc0",
+        "@nuxt/image-edge": "^1.0.0-28059208.2abef1b",
         "@nuxt/module-builder": "^0.2.1",
         "@nuxt/types": "^2.16.0",
         "@nuxtjs/eslint-config-typescript": "^12.0.0",

diff --git a/playground/app.vue b/playground/app.vue
@@ -1,8 +1,74 @@
 <template>
-  <div>
-    <nuxt-picture src="rhino.jpg" />
-    <nuxt-picture src="opera.webp" />
-    <nuxt-picture src="opera.webp" :modifiers="{ noProcess: true }" />
-  </div>
+    <div>
+        <figure>
+            <figcaption>Original image:</figcaption>
+            <nuxt-picture src="rhino.jpg" />
+        </figure>
+
+        <figure>
+            <figcaption>Resampled image:</figcaption>
+            <nuxt-picture width="200" src="rhino.jpg" />
+        </figure>
+
+        <figure>
+            <figcaption>Resampled image with forced height:</figcaption>
+            <nuxt-picture width="200" height="200" src="rhino.jpg" />
+        </figure>
+
+        <figure>
+            <figcaption>Native image:</figcaption>
+            <nuxt-picture src="opera.webp" />
+        </figure>
+
+        <figure>
+            <figcaption>Cropped image:</figcaption>
+            <nuxt-picture :modifiers="{crop: '1:1'}" src="opera.webp" />
+        </figure>
+
+        <figure>
+            <figcaption>Fitted image:</figcaption>
+            <nuxt-picture fit="50x50" src="opera.webp" />
+            <nuxt-picture fit="50x150" :modifiers="{align: 'lb'}" src="opera.webp" />
+            <nuxt-picture fit="50x150" :modifiers="{align: 'b'}" src="opera.webp" />
+            <nuxt-picture fit="50x150" :modifiers="{align: 'rb'}" src="opera.webp" />
+        </figure>
+
+        <figure>
+            <figcaption>Bad fitted image:</figcaption>
+            <nuxt-picture fit="invalid" src="opera.webp" />
+        </figure>
+
+        <figure>
+            <figcaption>Contrasted image:</figcaption>
+            <nuxt-picture :modifiers="{contrast: 10}" src="opera.webp" />
+        </figure>
+
+        <figure>
+            <figcaption>Flipped image:</figcaption>
+            <nuxt-picture :modifiers="{flip: 'v'}" src="opera.webp" />
+        </figure>
+
+        <figure>
+            <figcaption>Greyscaled image:</figcaption>
+            <nuxt-picture :modifiers="{grayscale: true}" src="opera.webp" />
+        </figure>
+
+        <figure>
+            <figcaption>No process image:</figcaption>
+            <nuxt-picture :modifiers="{noProcess: true}" src="opera.webp" />
+        </figure>
+    </div>
 </template>
 <script setup></script>
+<style lang="css">
+figure {
+    display: block;
+    margin: 1rem 0;
+    padding: 0;
+    border: 0;
+    vertical-align: baseline;
+}
+figcaption {
+    display: block;
+}
+</style>
diff --git a/src/runtime/index.ts b/src/runtime/index.ts
@@ -7,6 +7,7 @@ interface InterventionRequestImageModifiers extends ImageModifiers {
     sharpen?: number
     interlace?: boolean
     grayscale?: boolean
+    greyscale?: boolean
     flip?: 'h' | 'v'
     crop?: string
     blur?: number
@@ -29,6 +30,7 @@ export function getImage(
         sharpen,
         interlace,
         grayscale,
+        greyscale,
         flip,
         crop,
         blur,
@@ -38,7 +40,7 @@ export function getImage(
     } = modifiers as Partial<InterventionRequestImageModifiers>
     const operations = [`q${providerModifiers.quality ?? 90}`]
 
-    if (fit) {
+    if (fit && /^[0-9]+[:x][0-9]+$/.test(fit)) {
         operations.push(`f${fit}`)
     } else {
         if (width && width > 1) {
@@ -67,7 +69,7 @@ export function getImage(
     if (interlace === true) {
         operations.push('i')
     }
-    if (grayscale === true) {
+    if (grayscale === true || greyscale === true) {
         operations.push('g')
     }
     if (flip === 'h' || flip === 'v') {