Browse Source

Allow & anywhere in selector

This is to support things like

(.foo
  (.bar &
    :color blue))

which would have previously been rendered

.foo {
  .bar & {
    color: blue;
  }
}

because it was only looking for an & at the beginning of the
selector.
master
Dylan Baker 3 years ago
parent
commit
76252a422e
2 changed files with 8 additions and 2 deletions
  1. 2
    2
      src/ast/selector.ts
  2. 6
    0
      src/tests/compiler.test.ts

+ 2
- 2
src/ast/selector.ts View File

@@ -14,8 +14,8 @@ export class Selector {
14 14
     return Array.prototype.concat(
15 15
       ...this.parents.map((parent) => {
16 16
         return parent.getLineages().map((lineage) => {
17
-          if (this.name.value.match(/^&/)) {
18
-            return lineage + this.name.value.slice(1);
17
+          if (this.name.value.match(/&/)) {
18
+            return this.name.value.replace('&', lineage);
19 19
           }
20 20
           return lineage + ' ' + this.name.value;
21 21
         });

+ 6
- 0
src/tests/compiler.test.ts View File

@@ -202,3 +202,9 @@ test('compiles nested mixins', (t) => {
202 202
   `);
203 203
   t.equal(result, '.container{margin-top:50px;margin-bottom:50px;margin-left:100px;margin-right:100px;}');
204 204
 });
205
+
206
+test('respects ampersand even if it\'s not the first element of the selector', (t) => {
207
+  t.plan(1);
208
+  const result = compile(`(.foo (.bar & :color blue))`);
209
+  t.equal(result, '.bar .foo{color:blue;}');
210
+});

Loading…
Cancel
Save