Skip to content

Commit

Permalink
refactor(variant): add relative '&' to class and update spec.
Browse files Browse the repository at this point in the history
  • Loading branch information
@sciborrudnicki
sciborrudnicki committed Nov 18, 2023
1 parent dbfa6eb commit 8ce0b5d
Show file tree
Hide file tree
Showing 2 changed files with 44 additions and 44 deletions.
2 changes: 1 addition & 1 deletion class/variant/_variant.create.mixin.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@
@include variant.transform($variant, $combine, $modifier) using($resolved) {
@each $resolved in $resolved {
@include class.content(
map.get($resolved, (class, name)),
join(if(&, '&', ()), map.get($resolved, (class, name))),
$pseudo-class,
$dictionary,
$function,
Expand Down
86 changes: 43 additions & 43 deletions class/variant/_variant.create.mixin.spec.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@

@debug update.item(outline, (prefix: spectre));

@include class.variant-create((
div {
@include class.variant-create((
// FEATURE: Variant 1.
outline: 2px solid blue,
// border top: 1px solid yellow,
Expand Down Expand Up @@ -85,63 +86,62 @@
// (border: (start: (start: 10px)))

// (border: (top: (primary: 1px solid red)))
// ((border, outline): (top: (primary: 1px solid red)))
// ((border, outline): ((top, bottom): (primary: 1px solid red)))
// ((border, outline): ((top, bottom): ((primary, secondary): 1px solid red)))
// (border: (top: ((primary, secondary): 1px solid red)))
// (border: ((top, bottom): ((primary, secondary): 1px solid red)))
// ((border, outline): (top: (primary: 1px solid red)))
// ((border, outline): ((top, bottom): (primary: 1px solid red)))
// ((border, outline): ((top, bottom): ((primary, secondary): 1px solid red)))
// (border: (top: ((primary, secondary): 1px solid red)))
// (border: ((top, bottom): ((primary, secondary): 1px solid red)))

// ((basic1: (border, outline)): (top: (primary: 1px solid red)))
// ((basic1 basic2: (border, outline)): (top bottom: (primary red: 1px solid red)))
// ((basic1: (border, outline)): (top: (primary: 1px solid red)))
// ((basic1 basic2: (border, outline)): (top bottom: (primary red: 1px solid red)))

// ((basic1: (border, outline)): ((top bottom: (top, bottom)): (primary: 1px solid red)))
// ((basic1: (border, outline)): (((top, bottom): (top, bottom)): (primary: 1px solid red)))
// ((basic1: (border, outline)): (((top, bottom): (top, bottom)): ((primary, secondary): 1px solid red)))
// ((basic1: (border, outline)): ((top bottom: (top, bottom)): (primary: 1px solid red)))
// ((basic1: (border, outline)): (((top, bottom): (top, bottom)): (primary: 1px solid red)))
// ((basic1: (border, outline)): (((top, bottom): (top, bottom)): ((primary, secondary): 1px solid red)))

// (((basic1, basic2): (border, outline)): (top bottom: (primary red: 1px solid red, secondary: 2px solid blue)))
// (((basic1, basic2): (border, outline)): (((top, bottom): (top, bottom)): ((primary, secondary): 1px solid red)))
// (((basic1, basic2): (border, outline)): (top bottom: (primary red: 1px solid red, secondary: 2px solid blue)))
// (((basic1, basic2): (border, outline)): (((top, bottom): (top, bottom)): ((primary, secondary): 1px solid red)))

// (((basic1, basic2): (border, outline)): (((y1, y2): (top, bottom)): ((primary, secondary): 1px solid red)))
// (((basic1, basic2): (border, outline)): (((y1, y2): (top, bottom)): ((primary, secondary): 1px solid red)))



// FEATURE: Variant 4.
// border: (start: (start: ((radius: radius): 10px))),

// ((border, outline): ((top, bottom): ((color, radius): (primary: 1px solid red))))
// ((border, outline): ((top, bottom): ((color, radius): ((primary, secondary): 1px solid red))))
// ((border, outline): ((top, bottom): ((color, radius): (primary: 1px solid red))))
// ((border, outline): ((top, bottom): ((color, radius): ((primary, secondary): 1px solid red))))

// ((border, outline): ((top, bottom): ((color, radius): (primary: 1px solid red, secondary: 2px solid blue))))
// ((border, outline): ((top, bottom): ((color, radius): (primary: 1px solid red, secondary: 2px solid blue))))

// ((border, outline) start: ((start, bottom): ((color, radius):s (primary: 1px solid red))))
// ((border, outline) start: ((start, bottom): ((color, radius): ((primary, secondary): 1px solid red))))
// ((border, outline) start: ((start, bottom): ((color, radius):s (primary: 1px solid red))))
// ((border, outline) start: ((start, bottom): ((color, radius): ((primary, secondary): 1px solid red))))

// ((border, outline): ((start, bottom) start: ((color, radius): (primary: 1px solid red))))
// ((border, outline): ((start, bottom) start: ((color, radius): ((primary, secondary): 1px solid red))))
// ((border, outline): ((start, bottom) start: ((color, radius): (primary: 1px solid red))))
// ((border, outline): ((start, bottom) start: ((color, radius): ((primary, secondary): 1px solid red))))

// ((border, outline): ((start, bottom): ((color, radius) end: (primary: 1px solid red))))
// ((border, outline): ((start, bottom): ((color, radius) end: ((primary, secondary): 1px solid red))))
// ((border, outline): ((start, bottom): ((color, radius) end: (primary: 1px solid red))))
// ((border, outline): ((start, bottom): ((color, radius) end: ((primary, secondary): 1px solid red))))

// ((border, outline) item1: ((start, bottom) item2: ((color, radius) item3: (primary: 1px solid red))))
// ((border, outline) item1: ((start, bottom) item2: ((color, radius) item3: ((primary, secondary): 1px solid red))))
// ((border, outline) item1: ((start, bottom) item2: ((color, radius) item3: (primary: 1px solid red))))
// ((border, outline) item1: ((start, bottom) item2: ((color, radius) item3: ((primary, secondary): 1px solid red))))

// ((border, outline): ((top, bottom): ((color, radius): ((primary, secondary): 1px solid red))))
// ((border, outline): ((top, bottom): (color: (border: 1px solid red))))
// ((border, outline): ((top, bottom): (color: (primary: 1px solid red))))
// ((border, outline): ((top, bottom): ((color, radius): ((primary, secondary): 1px solid red))))
// ((border, outline): ((top, bottom): (color: (border: 1px solid red))))
// ((border, outline): ((top, bottom): (color: (primary: 1px solid red))))

// ((basic: (border, outline)): ((top, bottom): ((color, radius): (primary: 1px solid red))))
// ((basic: (border, outline)): ((top, bottom): ((color, radius): (primary: 1px solid red))))

// (((basic1, basic2): (border, outline)): (((y1, y2): (top, bottom)): ((color, radius): ((primary, secondary): 1px solid red))))
// (((basic1, basic2): (border, outline)): (((y1, y2): (top, bottom)): (((end1, end2): (color, radius)): ((primary, secondary): 1px solid red))))


),
false,
(),
(), // (border: b),
$modifier: (class: (prefix: spectre)),
) using($resolved) {
@include property.set((
#{map.get($resolved, (property, name))}: map.get($resolved, (property, value))
));
};
// (((basic1, basic2): (border, outline)): (((y1, y2): (top, bottom)): ((color, radius): ((primary, secondary): 1px solid red))))
// (((basic1, basic2): (border, outline)): (((y1, y2): (top, bottom)): (((end1, end2): (color, radius)): ((primary, secondary): 1px solid red))))
),
false,
(),
(), // (border: b),
$modifier: (class: (prefix: spectre)),
) using($resolved) {
@include property.set((
#{map.get($resolved, (property, name))}: map.get($resolved, (property, value))
));
};
}

0 comments on commit 8ce0b5d

Please sign in to comment.