feat: rules apply first match by default with fallthrough opt-in

Author: dangreen

packages/bundler-utils/src/generate.spec.ts

@@ -89,12 +89,11 @@ describe('bundler-utils', () => {
         expect(module).toContain('export const srcSet = [];')
       })
 
-      it('should stop after only rule', async () => {
+      it('should stop after the first matched rule', async () => {
         const image = await createImage()
         const module = await generateSrcSetModule(image, {}, {
           rules: [
             {
-              only: true,
               width: [0.5]
             },
             {
@@ -107,6 +106,24 @@ describe('bundler-utils', () => {
         expect(module).not.toContain('"jpg160"')
       })
 
+      it('should keep matching after a fallthrough rule', async () => {
+        const image = await createImage()
+        const module = await generateSrcSetModule(image, {}, {
+          rules: [
+            {
+              fallthrough: true,
+              width: [0.5]
+            },
+            {
+              width: [0.25]
+            }
+          ]
+        }, emitToPath)
+
+        expect(module).toContain('"jpg320"')
+        expect(module).toContain('"jpg160"')
+      })
+
       it('should inline placeholder data-url', async () => {
         const image = await createImage()
         const module = await generateSrcSetModule(

packages/bundler-utils/src/generate.ts

@@ -96,7 +96,7 @@ export async function generateSrcSetModule(
       })
     }
 
-    if (rule.only) {
+    if (!rule.fallthrough) {
       break
     }
   }

packages/bundler-utils/src/types.ts

@@ -60,7 +60,8 @@ export interface SrcSetRule extends GenerateOptions {
    */
   match?: Matcher | Matcher[]
   /**
-   * Do not apply the rest of the rules if this rule matched.
+   * Keep matching the rest of the rules after this rule matched.
+   * By default the first matched rule is the only one applied.
    */
-  only?: boolean
+  fallthrough?: boolean
 }

packages/cli/src/run.spec.ts

@@ -86,15 +86,14 @@ describe('cli', () => {
       expect(written).toEqual([])
     })
 
-    it('should stop after only rule', async () => {
+    it('should stop after the first matched rule', async () => {
       const dir = await createProject()
       const written = await runIn(dir, {
         src: 'images/**/*.jpg',
         dest: 'dist',
         skipOptimization: true,
         rules: [
           {
-            only: true,
             width: [0.5]
           },
           {
@@ -107,6 +106,28 @@ describe('cli', () => {
       expect(written[0]).toContain('photo@320w.jpg')
     })
 
+    it('should keep matching after a fallthrough rule', async () => {
+      const dir = await createProject()
+      const written = await runIn(dir, {
+        src: 'images/**/*.jpg',
+        dest: 'dist',
+        skipOptimization: true,
+        rules: [
+          {
+            fallthrough: true,
+            width: [0.5]
+          },
+          {
+            width: [0.25]
+          }
+        ]
+      })
+
+      expect(written.length).toBe(2)
+      expect(written.some(file => file.includes('photo@320w.jpg'))).toBe(true)
+      expect(written.some(file => file.includes('photo@160w.jpg'))).toBe(true)
+    })
+
     it('should throw without matched sources', async () => {
       const dir = await createProject()
 

packages/cli/src/run.ts

@@ -74,7 +74,7 @@ export async function run(options: SrcSetCliOptions) {
         }
       }
 
-      if (rule.only) {
+      if (!rule.fallthrough) {
         break
       }
     }

packages/cli/src/types.ts

@@ -13,9 +13,10 @@ export interface SrcSetCliRule extends GenerateOptions {
    */
   match?: Matcher | Matcher[]
   /**
-   * Do not apply the rest of the rules if this rule matched.
+   * Keep matching the rest of the rules after this rule matched.
+   * By default the first matched rule is the only one applied.
    */
-  only?: boolean
+  fallthrough?: boolean
 }
 
 export interface SrcSetCliOptions extends SrcSetGeneratorOptions {

packages/loader/src/loader.spec.ts

@@ -155,15 +155,14 @@ describe('loader', () => {
         expect(metadata.width).toBe(16)
       })
 
-      it('should export placeholder together with only rule', async () => {
+      it('should export placeholder together with a matched rule', async () => {
         const dir = await createFixtureProject(defaultEntry)
         const { exports } = await compile(createCompiler, dir, {
           skipOptimization: true,
           placeholder: true,
           rules: [
             {
               match: '**/*.jpg',
-              only: true,
               width: [0.5]
             }
           ]