Skip to content

Commit 180b416

Browse files
chriseppsteinchriseppstein
committed
fix: Fix bugs introduced by per-block namespaces.
1 parent 053ed47 commit 180b416

File tree

9 files changed

+645
-42
lines changed

9 files changed

+645
-42
lines changed

‎packages/@css-blocks/broccoli/test/Analyze.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ describe("Broccoli Analyze Plugin Test", function () {
2828
ui: {
2929
components: {
3030
[entryComponentName]: {
31-
"template.hbs": `<div><h1 class="foo">Welcome to Glimmer!</h1></div>`,
31+
"template.hbs": `<div><h1 block:class="foo">Welcome to Glimmer!</h1></div>`,
3232
"stylesheet.css": `:scope { color: red; } .foo { color: green; }`,
3333
},
3434
},

‎packages/@css-blocks/ember-cli/tests/dummy/app/templates/application.hbs

+11-11
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,36 @@
11
<main>
2-
<h2 class="title">CSS Blocks + Ember Integration Tests</h2>
2+
<h2 block:class="title">CSS Blocks + Ember Integration Tests</h2>
33

4-
<nav class="test-nav">
4+
<nav block:class="test-nav">
55
<ul>
66
<li>
7-
{{#link-to "global-styles" class="test-nav-item"}}Global Styles{{/link-to}}
7+
{{#link-to "global-styles" block:class="test-nav-item"}}Global Styles{{/link-to}}
88
</li>
99
<li>
10-
{{#link-to "ember-builtins" class="test-nav-item"}}Ember Builtins{{/link-to}}
10+
{{#link-to "ember-builtins" block:class="test-nav-item"}}Ember Builtins{{/link-to}}
1111
</li>
1212
<li>
13-
{{#link-to "route-block" class="test-nav-item"}}Route Block{{/link-to}}
13+
{{#link-to "route-block" block:class="test-nav-item"}}Route Block{{/link-to}}
1414
</li>
1515
<li>
16-
{{#link-to "app-component" class="test-nav-item"}}App Component Block{{/link-to}}
16+
{{#link-to "app-component" block:class="test-nav-item"}}App Component Block{{/link-to}}
1717
</li>
1818
<li>
19-
{{#link-to "addon-component" class="test-nav-item"}}Addon Component Block{{/link-to}}
19+
{{#link-to "addon-component" block:class="test-nav-item"}}Addon Component Block{{/link-to}}
2020
</li>
2121
<li>
22-
{{#link-to "in-repo-engine" class="test-nav-item"}}In Repo Engine{{/link-to}}
22+
{{#link-to "in-repo-engine" block:class="test-nav-item"}}In Repo Engine{{/link-to}}
2323
</li>
2424
<li>
25-
{{#link-to "in-repo-lazy-engine" class="test-nav-item"}}In Repo Lazy Engine{{/link-to}}
25+
{{#link-to "in-repo-lazy-engine" block:class="test-nav-item"}}In Repo Lazy Engine{{/link-to}}
2626
</li>
2727
<li>
28-
{{#link-to "compositions" class="test-nav-item"}}Compositions{{/link-to}}
28+
{{#link-to "compositions" block:class="test-nav-item"}}Compositions{{/link-to}}
2929
</li>
3030
</ul>
3131
</nav>
3232

33-
<div id="test-container" class="test-container">
33+
<div id="test-container" block:class="test-container">
3434
{{outlet}}
3535
</div>
3636
</main>

‎packages/@css-blocks/ember-cli/tests/dummy/app/templates/components/app-component.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div state:enabled={{enabled}} id="scope">
1+
<div block:enabled={{enabled}} id="scope">
22
App Component Scope Styles State: {{enabled}}
3-
<div class="sub-class" id="sub-class" state:enabled={{enabled}}>
3+
<div block:class="sub-class" id="sub-class" block:enabled={{enabled}}>
44
App Component Sub-class Styles State: {{enabled}}
55
</div>
66
<button {{action "toggleEnabled"}} id="toggle-enabled">Toggle Enabled States</button>

‎packages/@css-blocks/ember-cli/tests/dummy/app/templates/compositions.hbs

+20-20
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,33 @@
11
<section>
2-
<p id="red-static" class="red">I'm red from a static class composition and bold from an inherited composition.</p>
3-
<p id="green-static" class="green">I'm green from a static class composition.</p>
2+
<p id="red-static" block:class="red">I'm red from a static class composition and bold from an inherited composition.</p>
3+
<p id="green-static" block:class="green">I'm green from a static class composition.</p>
44

5-
<p id="red-green-dynamic" class={{style-if enabled "green" "red"}}>I'm {{if enabled "green" "red"}} from a dynamic class composition.</p>
5+
<p id="red-green-dynamic" block:class={{style-if enabled "green" "red"}}>I'm {{if enabled "green" "red"}} from a dynamic class composition.</p>
66

7-
<p id="pink-static" class="pink">I'm pink from a static attribute composition and italic from the composition's parent class.</p>
8-
<p id="purple-static" class="purple">I'm purple from a static attribute composition and italic from the composition's parent class.</p>
7+
<p id="pink-static" block:class="pink">I'm pink from a static attribute composition and italic from the composition's parent class.</p>
8+
<p id="purple-static" block:class="purple">I'm purple from a static attribute composition and italic from the composition's parent class.</p>
99

10-
<p id="pink-purple-dynamic" class={{style-if enabled "pink" "purple"}}>I'm {{if enabled "pink" "purple"}} from a dynamic attribute composition and italic from the composition's parent class.</p>
10+
<p id="pink-purple-dynamic" block:class={{style-if enabled "pink" "purple"}}>I'm {{if enabled "pink" "purple"}} from a dynamic attribute composition and italic from the composition's parent class.</p>
1111

12-
<p id="blue-static" class="blue">I'm not blue from an attribute composition with boolean attribute condition.</p>
13-
<p id="blue-active" class="blue" state:active>I'm blue from an attribute composition with boolean attribute condition.</p>
14-
<p id="blue-dynamic" class="blue" state:active={{enabled}} >I'm toggled blue from an state composition with boolean attribute condition.</p>
12+
<p id="blue-static" block:class="blue">I'm not blue from an attribute composition with boolean attribute condition.</p>
13+
<p id="blue-active" block:class="blue" block:active>I'm blue from an attribute composition with boolean attribute condition.</p>
14+
<p id="blue-dynamic" block:class="blue" block:active={{enabled}} >I'm toggled blue from an state composition with boolean attribute condition.</p>
1515

16-
<p id="orange-static" class="orange">I'm not orange from a class composition with boolean attribute condition.</p>
17-
<p id="orange-active" class="orange" state:active>I'm orange from a class composition with boolean attribute condition.</p>
18-
<p id="orange-dynamic" class="orange" state:active={{enabled}} >I'm toggled orange from a class with boolean attribute condition.</p>
16+
<p id="orange-static" block:class="orange">I'm not orange from a class composition with boolean attribute condition.</p>
17+
<p id="orange-active" block:class="orange" block:active>I'm orange from a class composition with boolean attribute condition.</p>
18+
<p id="orange-dynamic" block:class="orange" block:active={{enabled}} >I'm toggled orange from a class with boolean attribute condition.</p>
1919

20-
<p id="yellow-static" class="yellow" state:color="none">I'm not yellow from a class composition with a switch class condition.</p>
21-
<p id="yellow-active" class="yellow" state:color="yellow">I'm yellow from a class composition with a switch class condition.</p>
22-
<p id="yellow-dynamic" class="yellow" state:color={{color}}>I'm toggled {{color}} from a class composition with a switch class condition.</p>
20+
<p id="yellow-static" block:class="yellow" block:color="none">I'm not yellow from a class composition with a switch class condition.</p>
21+
<p id="yellow-active" block:class="yellow" block:color="yellow">I'm yellow from a class composition with a switch class condition.</p>
22+
<p id="yellow-dynamic" block:class="yellow" block:color={{color}}>I'm toggled {{color}} from a class composition with a switch class condition.</p>
2323

24-
<p id="brown-static" class="brown" state:color="none">I'm not brown from an attribute composition with a switch attribute condition.</p>
25-
<p id="brown-active" class="brown" state:color="yellow">I'm brown from an attribute composition with a switch attribute condition.</p>
26-
<p id="brown-dynamic" class="brown" state:color={{color}}>I'm toggled brown from an state composition with a switch attribute condition.</p>
24+
<p id="brown-static" block:class="brown" block:color="none">I'm not brown from an attribute composition with a switch attribute condition.</p>
25+
<p id="brown-active" block:class="brown" block:color="yellow">I'm brown from an attribute composition with a switch attribute condition.</p>
26+
<p id="brown-dynamic" block:class="brown" block:color={{color}}>I'm toggled brown from an state composition with a switch attribute condition.</p>
2727

28-
<p id="yellow-brown-dynamic" class={{style-if enabled "yellow" "brown"}} state:color={{color}}>I'm toggled {{if enabled "yellow" "brown"}} or unset from a dynamic {{if enabled "attribute" "class"}} composition.</p>
28+
<p id="yellow-brown-dynamic" block:class={{style-if enabled "yellow" "brown"}} block:color={{color}}>I'm toggled {{if enabled "yellow" "brown"}} or unset from a dynamic {{if enabled "attribute" "class"}} composition.</p>
2929

30-
<p id="green-bold" class="green-bold">I'm green and bold from multiple class compositions.</p>
30+
<p id="green-bold" block:class="green-bold">I'm green and bold from multiple class compositions.</p>
3131

3232
<button {{action "toggleEnabled"}} id="toggle-enabled">Toggle Enabled States</button>
3333
<button {{action "toggleColor"}} id="toggle-color">Toggle Color States</button>

‎packages/@css-blocks/ember-cli/tests/dummy/app/templates/ember-builtins.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
<div>
2-
{{#link-to "index" class="link-to-helper" id="link-to-helper"}}Inactive Link To Helper{{/link-to}}
3-
{{#link-to "ember-builtins" class="link-to-helper" id="link-to-helper-active"}}Active Link To Helper{{/link-to}}
2+
{{#link-to "index" block:class="link-to-helper" id="link-to-helper"}}Inactive Link To Helper{{/link-to}}
3+
{{#link-to "ember-builtins" block:class="link-to-helper" id="link-to-helper-active"}}Active Link To Helper{{/link-to}}
44
</div>

‎packages/@css-blocks/ember-cli/tests/dummy/app/templates/route-block.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div state:enabled={{enabled}} id="scope">
1+
<div block:enabled={{enabled}} id="scope">
22
Route Scope Styles State: {{enabled}}
3-
<div class="sub-class" id="sub-class" state:enabled={{enabled}}>
3+
<div block:class="sub-class" id="sub-class" block:enabled={{enabled}}>
44
Route Sub-class Styles State: {{enabled}}
55
</div>
66
<button {{action "toggleEnabled"}} id="toggle-enabled">Toggle Enabled States</button>

‎packages/@css-blocks/ember-cli/tests/dummy/lib/in-repo-addon/addon/templates/components/addon-component.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
<div state:enabled={{enabled}} id="addon-component-scope">
1+
<div block:enabled={{enabled}} id="addon-component-scope">
22
Addon Component Scope Styles State: {{enabled}}
3-
<div class="sub-class" id="addon-component-sub-class" state:enabled={{enabled}}>
3+
<div block:class="sub-class" id="addon-component-sub-class" block:enabled={{enabled}}>
44
Addon Component Sub-class Styles State: {{enabled}}
55
</div>
66
<button {{action "toggleEnabled"}} id="toggle-enabled">Toggle Enabled States</button>

‎packages/@css-blocks/glimmer/src/ElementAnalyzer.ts

+10-2
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,9 @@ export class ElementAnalyzer {
130130
}
131131
else {
132132
for (let pair of node.hash.pairs) {
133+
if (pair.key === "class") {
134+
throw cssBlockError(`The class attribute is forbidden. Did you mean block:class?`, node, this.template);
135+
}
133136
let [namespace, attrName] = this.isAttributeAnalyzed(pair.key);
134137
if (namespace && attrName) {
135138
if (attrName === "class") {
@@ -167,15 +170,20 @@ export class ElementAnalyzer {
167170
const attrToState = getEmberBuiltInStates(node.path.original);
168171
for (let attrName of Object.keys(attrToState)) {
169172
const stateName = attrToState[attrName];
170-
element = this.newElement(node, forRewrite);
173+
let element: ElementAnalysis<BooleanExpression, StringExpression, TernaryExpression> | undefined;
171174
for (let style of klasses) {
172175
let attr = style.resolveAttribute(stateName);
173176
if (!attr || !attr.presenceRule) { continue; }
177+
if (!element) {
178+
element = this.newElement(node, forRewrite);
179+
}
174180
attrRewrites[attrName] = element; // Only save this element on output if a state is found.
175181
if (!forRewrite) { element.addStaticClass(style); } // In rewrite mode we only want the states.
176182
element.addStaticAttr(style, attr.presenceRule);
177183
}
178-
this.finishElement(element, forRewrite);
184+
if (element) {
185+
this.finishElement(element, forRewrite);
186+
}
179187
}
180188
}
181189

0 commit comments

Comments
 (0)