nex3/sass — Issue #248: Duplicate selector resulting from @extend
Author: rickharris
Created: 2012-01-13 19:40:08+00:00
State: open

I can describe this in code much better than I can in prose:

```scss
// Failing example: how to make a duplicate selector
// Requirement 1. Style block with list of selectors on newlines
// Requirement 2. Extend non-first selector from the list of selectors
// Requirement 3. Extend from nested selector
// Results in two sets of duplicate selectors
.example-1-1,
.example-1-2,
.example-1-3 {
font-size: 24px;
color: #444;
}

.my-page-1 {
.my-module-1-1 {
@extend .example-1-2; // Produces dup selector
}
.my-module-1-2 {
@extend .example-1-3; // Produces dup selector
}
}
// =>
// .example-1-1,
// .example-1-2,
// .my-page-1 .my-module-1-1, .my-page-1
// .my-module-1-1,
// .example-1-3,
// .my-page-1 .my-module-1-2, .my-page-1
// .my-module-1-2 {
// font-size: 24px;
// color: #444; }

// Requirement 1 not met: list of selectors on the same line
// No dup selectors
.example-2-1, .example-2-2, .example-2-3 {
font-size: 24px;
color: #444;
}

.my-page-2 {
.my-module-2-1 {
@extend .example-2-2; // Produces dup selector
}
.my-module-2-2 {
@extend .example-2-3; // Produces dup selector
}
}
// =>
// .example-2-1, .example-2-2, .my-page-2 .my-module-2-1, .example-2-3, .my-page-2 .my-module-2-2 {
// font-size: 24px;
// color: #444; }

// Requirement 2 not met: extending from a non-nested selector
// No dup selectors
.example-3-1,
.example-3-2,
.example-3-3 {
font-size: 24px;
color: #444;
}

.my-module-3-1 {
@extend .example-3-2; // No dup selector
}
.my-module-3-2 {
@extend .example-3-3; // No dup selector
}
// =>
// .example-3-1,
// .example-3-2,
// .my-module-3-1,
// .example-3-3,
// .my-module-3-2 {
// font-size: 24px;
// color: #444; }

// Requirement 3 not met: extending the first item from the list
// No dup selectors
.example-4-1,
.example-4-2,
.example-4-3 {
font-size: 24px;
color: #444;
}

.my-page-4 {
.my-module-4 {
@extend .example-4-1; // No dup selector
}
}
// =>
// .example-4-1, .my-page-4 .my-module-4,
// .example-4-2,
// .example-4-3 {
// font-size: 24px;
// color: #444; }
```

Seen in both 3.1.12 and 3.2.0.alpha.55.