td-ai-tools 1.2.11 → 1.3.2

package/skills/shopify-lint/tests/test_shopify_lint.py

@@ -135,14 +135,14 @@ class ThemeCheckTests(unittest.TestCase):
     def test_advisory_offenses_never_fail_at_the_level_the_hooks_use(self) -> None:
         """The Stop hooks run at --fail-level warning; info must stay advisory.
 
-        `info` is reserved for JavaScript parse errors inside Liquid, which
-        masking cannot always avoid. If those blocked handoff, a theme could be
-        wedged in a fix loop it has no way out of.
+        Nothing this skill reports is graded `info` today — Theme Check can be
+        configured to, and the level exists for a check whose findings should
+        surface without ever blocking handoff.
         """
         info_report = [
             {
                 "path": "changed.liquid",
-                "offenses": [{"check": "eslint/parse-error", "severity": "info"}],
+                "offenses": [{"check": "SomeAdvisoryCheck", "severity": "info"}],
             }
         ]
 
@@ -439,7 +439,14 @@ class EslintNormalizationTests(unittest.TestCase):
         self.assertEqual(offense["severity"], "error")
         self.assertNotIn("masked", offense["message"])
 
-    def test_parse_error_inside_liquid_is_advisory(self) -> None:
+    def test_parse_error_inside_liquid_is_an_error_too(self) -> None:
+        """A `{% javascript %}` parse error is graded like any other.
+
+        It used to be demoted to `info`, because Liquid that straddles a
+        JavaScript syntax boundary cannot be masked into parseable code. Liquid
+        in the block is now reported by `StaticStylesheetAndJavascriptTags`, so the
+        fix is well defined and the parse error blocks like the rest.
+        """
         results = [
             {
                 "filePath": "/repo/sections/td-hero.liquid",
@@ -459,12 +466,397 @@ class EslintNormalizationTests(unittest.TestCase):
         [report] = shopify_lint.normalize_eslint_results(results)
         offense = report["offenses"][0]
 
-        self.assertEqual(offense["severity"], "info")
-        self.assertIn("masked before parsing", offense["message"])
-        self.assertEqual(shopify_lint.exit_code_for([report], "error"), 0)
+        self.assertEqual(offense["check"], "eslint/parse-error")
+        self.assertEqual(offense["severity"], "error")
+        self.assertEqual(offense["message"], "Parsing error: Unexpected token")
+        self.assertEqual(shopify_lint.exit_code_for([report], "error"), 1)
+
+
+class CssTargetTests(unittest.TestCase):
+    def build_theme(self, root: Path, names: tuple[str, ...]) -> None:
+        for name in names:
+            path = root / name
+            path.parent.mkdir(parents=True, exist_ok=True)
+            path.write_text("content\n")
+
+    def test_selects_css_and_liquid_files_only(self) -> None:
+        with tempfile.TemporaryDirectory() as directory:
+            root = Path(directory)
+            names = (
+                "assets/component-td-card.css",
+                "sections/td-hero.liquid",
+                "assets/td-app.js",
+                "config/settings_schema.json",
+            )
+            self.build_theme(root, names)
+
+            targets = shopify_lint.select_css_targets(set(names), root, root)
+
+            self.assertEqual(
+                [target.relative_to(root).as_posix() for target in targets],
+                ["assets/component-td-card.css", "sections/td-hero.liquid"],
+            )
+
+    def test_skips_css_without_the_theory_prefix(self) -> None:
+        with tempfile.TemporaryDirectory() as directory:
+            root = Path(directory)
+            names = (
+                "assets/component-td-card.css",
+                "assets/vendor.css",
+                "assets/theme.css",
+            )
+            self.build_theme(root, names)
+
+            targets = shopify_lint.select_css_targets(set(names), root, root)
+
+            self.assertEqual(
+                [target.relative_to(root).as_posix() for target in targets],
+                ["assets/component-td-card.css"],
+            )
+
+    def test_prefix_match_is_case_insensitive_and_positional(self) -> None:
+        with tempfile.TemporaryDirectory() as directory:
+            root = Path(directory)
+            names = (
+                "assets/TD-Hero.css",
+                "assets/section-td-banner.css",
+                "assets/tdcard.css",
+                "assets/standard.css",
+            )
+            self.build_theme(root, names)
+
+            targets = shopify_lint.select_css_targets(set(names), root, root)
+
+            self.assertEqual(
+                [target.relative_to(root).as_posix() for target in targets],
+                ["assets/TD-Hero.css", "assets/section-td-banner.css"],
+            )
+
+    def test_prefix_is_matched_on_the_filename_not_the_directory(self) -> None:
+        with tempfile.TemporaryDirectory() as directory:
+            root = Path(directory)
+            names = ("td-components/vendor.css", "assets/component-td-card.css")
+            self.build_theme(root, names)
+
+            targets = shopify_lint.select_css_targets(set(names), root, root)
+
+            self.assertEqual(
+                [target.relative_to(root).as_posix() for target in targets],
+                ["assets/component-td-card.css"],
+            )
+
+    def test_liquid_is_linted_regardless_of_its_name(self) -> None:
+        with tempfile.TemporaryDirectory() as directory:
+            root = Path(directory)
+            names = ("sections/main-product.liquid", "snippets/vendor-widget.liquid")
+            self.build_theme(root, names)
+
+            targets = shopify_lint.select_css_targets(set(names), root, root)
+
+            self.assertEqual(
+                [target.relative_to(root).as_posix() for target in targets],
+                ["sections/main-product.liquid", "snippets/vendor-widget.liquid"],
+            )
+
+    def test_skips_minified_bundles_even_with_the_theory_prefix(self) -> None:
+        with tempfile.TemporaryDirectory() as directory:
+            root = Path(directory)
+            names = ("assets/td-vendor.min.css", "assets/component-td-card.css")
+            self.build_theme(root, names)
+
+            targets = shopify_lint.select_css_targets(set(names), root, root)
+
+            self.assertEqual(
+                [target.relative_to(root).as_posix() for target in targets],
+                ["assets/component-td-card.css"],
+            )
+
+    def test_skips_paths_that_no_longer_exist(self) -> None:
+        with tempfile.TemporaryDirectory() as directory:
+            root = Path(directory)
+            self.build_theme(root, ("assets/td-kept.css",))
+
+            targets = shopify_lint.select_css_targets(
+                {"assets/td-kept.css", "assets/td-deleted.css"}, root, root
+            )
+
+            self.assertEqual(
+                [target.relative_to(root).as_posix() for target in targets],
+                ["assets/td-kept.css"],
+            )
+
+    def test_skips_paths_outside_the_theme_root(self) -> None:
+        with tempfile.TemporaryDirectory() as directory:
+            root = Path(directory)
+            # Both carry the Theory prefix, so only the theme-root check can
+            # be what excludes the second one.
+            self.build_theme(root, ("theme/assets/td-app.css", "tooling/td-docs.css"))
+
+            targets = shopify_lint.select_css_targets(
+                {"theme/assets/td-app.css", "tooling/td-docs.css"}, root, root / "theme"
+            )
+
+            self.assertEqual(
+                [target.relative_to(root).as_posix() for target in targets],
+                ["theme/assets/td-app.css"],
+            )
+
+
+class CssLintCommandTests(unittest.TestCase):
+    def test_does_not_spawn_node_when_there_are_no_targets(self) -> None:
+        with patch.object(shopify_lint.subprocess, "run") as run:
+            result = shopify_lint.run_css_lint(Path("/theme"), [])
+
+        self.assertEqual(result, [])
+        run.assert_not_called()
+
+    def test_runs_the_bundled_runner_with_a_json_payload(self) -> None:
+        completed = subprocess.CompletedProcess([], 0, stdout="[]", stderr="")
+        runner = Path("/skill/stylelint-config-theory/bin/lint-css.mjs")
+
+        with patch.object(shopify_lint.Path, "is_file", return_value=True):
+            with patch.object(
+                shopify_lint.subprocess, "run", return_value=completed
+            ) as run:
+                result = shopify_lint.run_css_lint(
+                    Path("/theme"), [Path("/theme/assets/td-app.css")], runner
+                )
+
+        self.assertEqual(result, [])
+        run.assert_called_once_with(
+            ["node", str(runner)],
+            input=json.dumps(
+                {"cwd": "/theme", "files": ["/theme/assets/td-app.css"]}
+            ),
+            cwd=Path("/theme"),
+            capture_output=True,
+            text=True,
+            check=False,
+        )
+
+    def test_missing_runner_asks_for_setup(self) -> None:
+        with self.assertRaises(shopify_lint.ShopifyLintError) as error:
+            shopify_lint.run_css_lint(
+                Path("/theme"),
+                [Path("/theme/assets/td-app.css")],
+                Path("/nowhere/lint-css.mjs"),
+            )
+
+        self.assertIn("setup.sh", str(error.exception))
+
+    def test_missing_node_is_reported(self) -> None:
+        with patch.object(shopify_lint.Path, "is_file", return_value=True):
+            with patch.object(
+                shopify_lint.subprocess, "run", side_effect=FileNotFoundError
+            ):
+                with self.assertRaises(shopify_lint.ShopifyLintError) as error:
+                    shopify_lint.run_css_lint(
+                        Path("/theme"), [Path("/theme/assets/td-app.css")]
+                    )
+
+        self.assertIn("Node.js", str(error.exception))
+
+    def test_runner_failure_is_reported(self) -> None:
+        completed = subprocess.CompletedProcess(
+            [], 1, stdout="", stderr="theory css lint: config is invalid"
+        )
+
+        with patch.object(shopify_lint.Path, "is_file", return_value=True):
+            with patch.object(shopify_lint.subprocess, "run", return_value=completed):
+                with self.assertRaises(shopify_lint.ShopifyLintError) as error:
+                    shopify_lint.run_css_lint(
+                        Path("/theme"), [Path("/theme/assets/td-app.css")]
+                    )
+
+        self.assertIn("config is invalid", str(error.exception))
+
+    def test_non_json_output_is_reported(self) -> None:
+        completed = subprocess.CompletedProcess([], 0, stdout="not json", stderr="")
+
+        with patch.object(shopify_lint.Path, "is_file", return_value=True):
+            with patch.object(shopify_lint.subprocess, "run", return_value=completed):
+                with self.assertRaises(shopify_lint.ShopifyLintError) as error:
+                    shopify_lint.run_css_lint(
+                        Path("/theme"), [Path("/theme/assets/td-app.css")]
+                    )
+
+        self.assertIn("Theory CSS lint failed", str(error.exception))
+
+
+class StylelintNormalizationTests(unittest.TestCase):
+    def test_namespaces_rules_and_zero_indexes_positions(self) -> None:
+        results = [
+            {
+                "path": "/theme/assets/component-td-card.css",
+                "warnings": [
+                    {
+                        "line": 4,
+                        "column": 3,
+                        "rule": "length-zero-no-unit",
+                        "severity": "warning",
+                        "text": "Disallowed unit (length-zero-no-unit)",
+                    }
+                ],
+            }
+        ]
+
+        [report] = shopify_lint.normalize_stylelint_results(results)
+        offense = report["offenses"][0]
+
+        self.assertEqual(offense["check"], "stylelint/length-zero-no-unit")
+        self.assertEqual(offense["severity"], "warning")
+        self.assertEqual(offense["start_row"], 3)
+        self.assertEqual(offense["start_column"], 2)
+
+    def test_keeps_a_namespaced_plugin_rule_as_is(self) -> None:
+        results = [
+            {
+                "path": "/theme/assets/component-td-card.css",
+                "warnings": [
+                    {"line": 1, "column": 1, "rule": "theory/no-raw-colors", "severity": "error"}
+                ],
+            }
+        ]
+
+        [report] = shopify_lint.normalize_stylelint_results(results)
+
+        self.assertEqual(report["offenses"][0]["check"], "theory/no-raw-colors")
+
+    def test_drops_files_without_warnings(self) -> None:
+        results = [{"path": "/theme/assets/component-td-card.css", "warnings": []}]
+
+        self.assertEqual(shopify_lint.normalize_stylelint_results(results), [])
+
+    def test_css_parse_error_is_an_error(self) -> None:
+        results = [
+            {
+                "path": "/theme/assets/component-td-card.css",
+                "warnings": [
+                    {
+                        "line": 1,
+                        "column": 1,
+                        "rule": "CssSyntaxError",
+                        "severity": "error",
+                        "text": "Unclosed block (CssSyntaxError)",
+                    }
+                ],
+            }
+        ]
+
+        [report] = shopify_lint.normalize_stylelint_results(results)
+        offense = report["offenses"][0]
+
+        self.assertEqual(offense["check"], "stylelint/parse-error")
+        self.assertEqual(offense["severity"], "error")
+        self.assertNotIn("masked before parsing", offense["message"])
+
+    def test_liquid_parse_error_is_an_error_too(self) -> None:
+        """A `{% stylesheet %}` parse error is graded like any other.
+
+        It used to be demoted to `info` because masking Liquid out of the block
+        cannot always produce parseable CSS. Liquid in the block is now reported
+        by `StaticStylesheetAndJavascriptTags`, so the fix is well defined.
+        """
+        results = [
+            {
+                "path": "/theme/sections/td-hero.liquid",
+                "warnings": [
+                    {
+                        "line": 3,
+                        "column": 1,
+                        "rule": "CssSyntaxError",
+                        "severity": "error",
+                        "text": "Unclosed block (CssSyntaxError)",
+                    }
+                ],
+            }
+        ]
+
+        [report] = shopify_lint.normalize_stylelint_results(results)
+        offense = report["offenses"][0]
+
+        self.assertEqual(offense["check"], "stylelint/parse-error")
+        self.assertEqual(offense["severity"], "error")
+        self.assertEqual(offense["message"], "Unclosed block (CssSyntaxError)")
+        self.assertEqual(shopify_lint.exit_code_for([report], "error"), 1)
+
+    def test_a_rule_offense_in_liquid_keeps_its_severity(self) -> None:
+        # A rule offense inside a `{% stylesheet %}` block is graded exactly as
+        # one in a standalone `.css` file, and must still block a handoff.
+        results = [
+            {
+                "path": "/theme/sections/td-hero.liquid",
+                "warnings": [
+                    {
+                        "line": 3,
+                        "column": 1,
+                        "rule": "block-no-empty",
+                        "severity": "error",
+                        "text": "Empty block (block-no-empty)",
+                    }
+                ],
+            }
+        ]
+
+        [report] = shopify_lint.normalize_stylelint_results(results)
+
+        self.assertEqual(report["offenses"][0]["severity"], "error")
+        self.assertEqual(shopify_lint.exit_code_for([report], "error"), 1)
+
+    def test_an_unrecognized_severity_falls_back_to_warning(self) -> None:
+        results = [
+            {
+                "path": "/theme/assets/td-app.css",
+                "warnings": [{"line": 1, "column": 1, "rule": "block-no-empty"}],
+            }
+        ]
+
+        [report] = shopify_lint.normalize_stylelint_results(results)
+
+        self.assertEqual(report["offenses"][0]["severity"], "warning")
 
 
 class MergeReportTests(unittest.TestCase):
+    def test_merges_all_three_streams_for_one_file(self) -> None:
+        theme_reports = [
+            {
+                "path": "/repo/sections/td-hero.liquid",
+                "offenses": [
+                    {"check": "HardcodedText", "severity": "warning", "start_row": 12}
+                ],
+            }
+        ]
+        js_reports = [
+            {
+                "path": "/repo/sections/td-hero.liquid",
+                "offenses": [
+                    {"check": "eslint/no-dupe-keys", "severity": "error", "start_row": 3}
+                ],
+            }
+        ]
+        css_reports = [
+            {
+                "path": "/repo/sections/td-hero.liquid",
+                "offenses": [
+                    {
+                        "check": "stylelint/block-no-empty",
+                        "severity": "error",
+                        "start_row": 7,
+                    }
+                ],
+            }
+        ]
+
+        merged = shopify_lint.merge_reports(
+            theme_reports, js_reports, css_reports, repo_root=Path("/repo")
+        )
+
+        self.assertEqual(len(merged), 1)
+        self.assertEqual(
+            [offense["check"] for offense in merged[0]["offenses"]],
+            ["eslint/no-dupe-keys", "stylelint/block-no-empty", "HardcodedText"],
+        )
+
     def test_merges_both_streams_for_one_file_and_sorts_offenses(self) -> None:
         theme_reports = [
             {
@@ -582,5 +974,88 @@ class EndToEndJsTests(unittest.TestCase):
         self.assertEqual(dupe[0]["severity"], "error")
 
 
+@unittest.skipUnless(
+    (SKILL_ROOT / "stylelint-config-theory" / "dist").is_dir(),
+    "run scripts/setup.sh to build stylelint-config-theory",
+)
+class EndToEndCssTests(unittest.TestCase):
+    """Proves the Liquid line-mapping contract against the real CSS runner."""
+
+    def test_reports_stylesheet_block_offenses_at_their_real_line(self) -> None:
+        lines = [
+            '<div class="td-hero">',
+            "  <h2>{{ section.settings.heading }}</h2>",
+            "</div>",
+            "",
+            "{% stylesheet %}",
+            "  .td-hero {",
+            "    margin: {{ section.settings.gap }}px;",
+            "  }",
+            "  .td-broken {}",
+            "{% endstylesheet %}",
+        ]
+        expected_row = lines.index("  .td-broken {}")
+
+        with tempfile.TemporaryDirectory() as directory:
+            root = Path(directory)
+            section = root / "sections" / "td-hero.liquid"
+            section.parent.mkdir(parents=True)
+            section.write_text("\n".join(lines) + "\n")
+
+            results = shopify_lint.run_css_lint(root, [section])
+            [report] = shopify_lint.normalize_stylelint_results(results)
+
+        empty = [
+            offense
+            for offense in report["offenses"]
+            if offense["check"] == "stylelint/block-no-empty"
+        ]
+
+        self.assertEqual(len(empty), 1)
+        # start_row is zero-indexed, matching Theme Check.
+        self.assertEqual(empty[0]["start_row"], expected_row)
+        self.assertEqual(empty[0]["severity"], "error")
+        # The masked interpolation is graded like any other value now: Liquid
+        # does not belong in a `{% stylesheet %}` block, and Theme Check reports
+        # it separately through `StaticStylesheetAndJavascriptTags`.
+        interpolated_row = lines.index("    margin: {{ section.settings.gap }}px;")
+        self.assertEqual(
+            [
+                offense["check"]
+                for offense in report["offenses"]
+                if offense["start_row"] == interpolated_row
+            ],
+            ["stylelint/declaration-property-value-no-unknown"],
+        )
+
+    def test_grades_a_css_asset_by_the_two_rule_layers(self) -> None:
+        with tempfile.TemporaryDirectory() as directory:
+            root = Path(directory)
+            asset = root / "assets" / "component-td-card.css"
+            asset.parent.mkdir(parents=True)
+            asset.write_text(".td-card {\n  margin: 0px;\n}\n.td-empty {}\n")
+
+            results = shopify_lint.run_css_lint(root, [asset])
+            [report] = shopify_lint.normalize_stylelint_results(results)
+
+        severities = {
+            offense["check"]: offense["severity"] for offense in report["offenses"]
+        }
+
+        self.assertEqual(severities["stylelint/block-no-empty"], "error")
+        self.assertEqual(severities["stylelint/length-zero-no-unit"], "warning")
+
+    def test_reports_nothing_for_a_liquid_file_without_a_stylesheet_block(self) -> None:
+        with tempfile.TemporaryDirectory() as directory:
+            root = Path(directory)
+            section = root / "sections" / "td-plain.liquid"
+            section.parent.mkdir(parents=True)
+            section.write_text('<div class="td-plain">Hello</div>\n')
+
+            results = shopify_lint.run_css_lint(root, [section])
+
+        self.assertEqual(shopify_lint.normalize_stylelint_results(results), [])
+
+
 if __name__ == "__main__":
     unittest.main()

package/skills/shopify-lint/theme-check-theory/.theme-check.example.yml

@@ -12,6 +12,13 @@ HardcodedText:
   enabled: true
   severity: warning
 
+# Upstream check, pinned here so the branch lint always fails on it: Shopify
+# serves `{% stylesheet %}` and `{% javascript %}` bodies verbatim, so Liquid
+# written inside one ships to the browser as literal text.
+StaticStylesheetAndJavascriptTags:
+  enabled: true
+  severity: error
+
 UnusedSectionSettings:
   enabled: false
   severity: warning

package/skills/shopify-lint/theme-check-theory/README.md

@@ -112,6 +112,47 @@ All three nullability checks share the same branch and `default`-filter
 analysis. A guard applies only inside its active `if`, `unless`, `elsif`, or
 `case` branch and only to the matching setting, metafield, or metaobject.
 
+## Left to upstream: Liquid in stylesheet and javascript tags
+
+Shopify concatenates the contents of every `{% stylesheet %}` and
+`{% javascript %}` block into the theme's compiled CSS and JavaScript bundles
+**without rendering them**. Liquid written inside one is served to the browser
+verbatim, so `color: {{ section.settings.color }}` ships as those thirty-six
+characters and the declaration is dropped by the CSS parser. It looks like it
+works locally only when the value happens to be absent.
+
+Theme Check's own
+[`StaticStylesheetAndJavascriptTags`](https://shopify.dev/docs/storefronts/themes/tools/theme-check/checks/static-stylesheet-and-javascript-tags)
+already reports every Liquid node in those bodies — output tags, control flow,
+and `{% comment %}`, which is not a comment there either — at `error` severity,
+so this package deliberately ships no check of its own. The configuration below
+pins it explicitly rather than inheriting it from `theme-check:recommended`, so
+the branch lint keeps failing on it even if the upstream default changes.
+
+Pass dynamic values in through the markup instead:
+
+```liquid
+<div class="td-hero" style="--td-hero-gap: {{ section.settings.gap }}px"></div>
+{% stylesheet %}
+  .td-hero { gap: var(--td-hero-gap); }
+{% endstylesheet %}
+```
+
+For JavaScript, read the value from a `data-` attribute or a
+`<script type="application/json">` block — both of which
+`DisallowedScriptOrStyleTag` allows.
+
+Its one blind spot is the mirror image: braces the Liquid parser reads as an
+output tag when they are really host-language nesting, such as
+`if (a) {{ b(); }}` or `@media screen {{ .a { color: red; } }}`, are reported as
+Liquid. The masks in `eslint-plugin-theory` and `stylelint-config-theory` treat
+anything between `{{` and `}}` carrying a brace or a semicolon as CSS or
+JavaScript, so they keep linting such a block. If a theme genuinely needs the
+construct, put a
+`{% # theme-check-disable StaticStylesheetAndJavascriptTags %}` comment *before*
+the opening tag — never inside the block, where the comment would itself be
+emitted verbatim.
+
 ## Usage in a project
 
 Install the module as a development dependency:
@@ -137,6 +178,13 @@ HardcodedText:
   enabled: true
   severity: warning
 
+# Upstream check, pinned here so the branch lint always fails on it: Shopify
+# serves `{% stylesheet %}` and `{% javascript %}` bodies verbatim, so Liquid
+# written inside one ships to the browser as literal text.
+StaticStylesheetAndJavascriptTags:
+  enabled: true
+  severity: error
+
 UnusedSectionSettings:
   enabled: false
   severity: warning