Merge pull request #204 from Shopify/missing-asset-fix

Bug Fix for `MissingAsset`

.changeset/kind-panthers-poke.md

@@ -0,0 +1,6 @@
+---
+'@shopify/theme-check-common': patch
+'theme-check-vscode': patch
+---
+
+Fix `MissingAsset` false positives for .css.liquid, .js.liquid and .scss.liquid files

packages/theme-check-common/src/checks/missing-asset/index.spec.ts

@@ -68,4 +68,40 @@ describe('Module: MissingAsset', () => {
 
     expect(offenses).to.have.length(0);
   });
+
+  it('should not report for compiled .js.liquid files', async () => {
+    const file = `{{ 'foo.js' | asset_url }} `;
+    const files = {
+      'snippets/snippet.liquid': file,
+      'assets/foo.js.liquid': 'console.log("{{ "hi" }}");',
+    };
+
+    const offenses = await check(files, [MissingAsset]);
+
+    expect(offenses).to.have.length(0);
+  });
+
+  it('should not report for compiled .css.liquid files', async () => {
+    const file = `{{ 'foo.css' | asset_url }} `;
+    const files = {
+      'snippets/snippet.liquid': file,
+      'assets/foo.css.liquid': 'body { color: {{ "blue" }}; }',
+    };
+
+    const offenses = await check(files, [MissingAsset]);
+
+    expect(offenses).to.have.length(0);
+  });
+
+  it('should not report for compiled .scss.liquid files', async () => {
+    const file = `{{ 'foo.scss.css' | asset_url }} `;
+    const files = {
+      'snippets/snippet.liquid': file,
+      'assets/foo.scss.liquid': 'html { & body { color: {{ "blue" }}; } }',
+    };
+
+    const offenses = await check(files, [MissingAsset]);
+
+    expect(offenses).to.have.length(0);
+  });
 });

packages/theme-check-common/src/checks/missing-asset/index.ts

@@ -26,13 +26,27 @@ export const MissingAsset: LiquidCheckDefinition = {
 
         if (!isLiquidString(node.expression)) return;
 
-        const expression = node.expression;
-        const assetPath = `assets/${expression.value}`;
-        const fileExists = await assertFileExists(context, assetPath);
+        let expression = node.expression;
+        let originalAssetPath = `assets/${expression.value}`;
+        let assetPath = originalAssetPath;
+
+        let fileExists = await assertFileExists(context, assetPath);
         if (fileExists) return;
 
+        if (assetPath.endsWith('.scss.css')) {
+          assetPath = assetPath.replace('.scss.css', '.scss.liquid');
+          fileExists = await assertFileExists(context, assetPath);
+          if (fileExists) return;
+        }
+
+        if (assetPath.endsWith('.js') || assetPath.endsWith('.css')) {
+          assetPath += '.liquid';
+          fileExists = await assertFileExists(context, assetPath);
+          if (fileExists) return;
+        }
+
         context.report({
-          message: `'${assetPath}' does not exist`,
+          message: `'${originalAssetPath}' does not exist`,
           startIndex: expression.position.start,
           endIndex: expression.position.end,
         });