diff --git a/packages/test-data/tests-unit/container/container.css b/packages/test-data/tests-unit/container/container.css index 285fd2784..dd9673c7e 100644 --- a/packages/test-data/tests-unit/container/container.css +++ b/packages/test-data/tests-unit/container/container.css @@ -273,3 +273,21 @@ font-size: 75%; } } +.mixin-container-test { + color: red; +} +@container name (width < 125px) { + .mixin-container-test { + display: none; + } +} +@container sidebar (width < 500px) { + .sidebar-test { + display: none; + } +} +@container header (width < 800px) { + .header-test { + display: none; + } +} diff --git a/packages/test-data/tests-unit/container/container.less b/packages/test-data/tests-unit/container/container.less index 5eec2f6d4..013a9e243 100644 --- a/packages/test-data/tests-unit/container/container.less +++ b/packages/test-data/tests-unit/container/container.less @@ -326,3 +326,27 @@ font-size: 75%; } } + +// Regression test: mixin with variable container name and variable query condition +// Issue: mixins with parameters using @container @name (condition < @var) failed +// with "variable @bp is undefined" error in older versions +@issue-width: 125px; + +.container-query-mixin(@container-name; @bp) { + @container @container-name (width < @bp) { + display: none; + } +} + +.mixin-container-test { + .container-query-mixin(name, @issue-width); + color: red; +} + +// Verify multiple calls with different params produce correct output +.sidebar-test { + .container-query-mixin(sidebar, 500px); +} +.header-test { + .container-query-mixin(header, 800px); +}