Skip to content

Add support for sub-blocks in mixins#264

Merged
snoyberg merged 2 commits intoyesodweb:masterfrom
SupercedeTech:css-sublocks
May 22, 2022
Merged

Add support for sub-blocks in mixins#264
snoyberg merged 2 commits intoyesodweb:masterfrom
SupercedeTech:css-sublocks

Conversation

@ivb-supercede
Copy link
Copy Markdown
Contributor

@ivb-supercede ivb-supercede commented Mar 16, 2022

Fixes a TODO!

This has been a recent pain point for us, because we have a button mixin that basically wants to do this

&__button {
  &:hover {
    ...
  }
  ...
}

But we can't, because of the lack of blocks in mixins. Instead, we're forced to have multiple mixins per call-site, which is nasty.

This allows mixin blocks to themselves contain other blocks, which are
then mixed in correctly in the parent block wherever the mixin is used.

This allows for things like nesting subclasses in the mixin, and (in
particular) nesting pseudoselectors! This is a use-case we had where we
wanted to mixin `:hover`, but we couldn't because blocks weren't
supported. Instead, we had to use multiple mixins everywhere,
complicating our code.

This makes a little change to how mixins are represented to track
leading spaces - this is to support ampersand blocks in mixins. It's not
a functional change for existing CSS.
This means that assertion errors from `celper` will display the line
where it is called, not the line of `celper` that errored.
@ivb-supercede ivb-supercede requested a review from snoyberg May 19, 2022 10:32
Copy link
Copy Markdown
Member

@snoyberg snoyberg left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@snoyberg snoyberg merged commit 3d4626e into yesodweb:master May 22, 2022
snoyberg added a commit that referenced this pull request May 22, 2022
@jezen jezen deleted the css-sublocks branch May 25, 2022 11:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants