Improve support for nested media queries #118
Merged
+272
−185
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR changes the way
Block.parse()
handles media queries in order to operate more locally and recursively. This makes arbitrary nested media queries possible, which fixes #61, #65, and allows some constructions known not to work before.Since this is quite a technical change, I assume some tweaking could be required to better integrate it in the code base. I'm submitting this in a state where bug test cases are fixed and tests pass so that the code can be reviewed. ^^
The main change in paradigm is to operate locally, meaning that every block handles themselves plus their direct children only. This is made possible by returning a list of nodes when some media queries need to be separated. The prototypical examples are as follow:
.foo { .bar{...} @media x {...} }
becomes[.foo .bar {...}, @media x { .foo{...} }]
@media x { .bar{...} @media y {...} }
becomes[@media x { .bar{...} }, @media x and y {...}]
By doing this at every level recursively, media queries naturally split their parents and bubble up from any nested structure.
In terms of code, media queries within the current node are sorted into
inner_media_queries
during the initial traversal of children, then inspected individually. New media queries alongside the current node are stored insibling_media_queries
and returned at the end.Because the structure changes along the way, new blocks are created based off the
.parsed
and.inner
of children rather than their.tokens[]
, which is unsuitable because it has media queries in an incorrect structure.In terms of tests:
media.less
intomedia-nested.less
.)media-nested-2.less
have been added with more complex structures.Here are the changes I noted needed some input:
Block.parse()
now returns a list; if places in the code other than the parser andBlock.parse()
itself use it, adjustments may be needed.block_name
attribute for some blocks. I didn't find the purpose of the attribute from the few occurrences in the code, so I don't know when to check for it.-2
or elsewhere). I didn't manage to understand exactly when this is the case, so I don't know precisely when to remove. I assume some variable visibility questions are related.self.parsed
,self.inner
andinner_media_queries
), the order of children tends to change during compilation. I don't think this is a problem as these three groups cannot have the same priority for properties, but I guess I should mention it.I hope this helps. ^^