refactor: v3.0

[shellscape]

Codebase refactor and update for version 3.0.0.

Tasks:

• update devDependencies
• update to PostCSS 7.x
• move tests to ava
• remove ESM, babel dependency
• move from Travis CI to Circle CI
• update linting
• implement code coverage
• fix Less maps are parsed as the wrong Node type #111
• fix Error thrown on single-line mixin include without semicolon #110
• fix Wrong end position on multiline variables #108
• fix Broken resolve for @custom-at-rule #106
• fix Crash when parsing nested at rules (@import in media query) #103
• fix !important is being moved out of mixin call parameters #102
• fix CSS spec compliance: !IMPORTANT is valid – should be case insensitive #89
• fix Unexpectedly ignored words in @import #88
• fix Detached ruleset processing returns incorrect selector #86

Breaking Changes

• @import are now AtRule with import: true property
• LESS variable nodes are now AtRule with variable: true property
• LESS mixin nodes are now Rule or AtRule (depending on where they are used/declared) with mixin: true property
• LESS variables cannot contain whitespace between the variable name and the colon (e.g. @thing : value) and will be parsed as regular CSS.
• !important no longer parsed separately if a space separates the ! and important.

[shellscape]

/cc @jwilsson

[shellscape]

@ai leveraging PostCSS@7, I was able to do away with a large amount of code. lib/LessParser.js is where most of the magic happens for some LESS-specific needs. I'm having trouble getting the base parser to recognize interpolated code, however. e.g. @{selector}:hover { @{prop}-size: @{color} }. If you have any ideas on how to accomplish that in the same pattern as what I've committed in aa8790f, I would appreciate it.

[ai]

I'm having trouble getting the base parser to recognize interpolated code, however. e.g. @{selector}:hover { @{prop}-size: @{color} }

Is “base parser” postcss/lib/parser?

What exactly problem do you have?

[shellscape]

@ai

Is “base parser” postcss/lib/parser?

Yes. lib/LessParser extends postcss/lib/parser.

What exactly problem do you have?

test/parser/_interpolation.js contains examples of LESS variable interpolation. PostCSS doesn't support this sort of syntax by default (and I wouldn't expect it to). I have been using a method of overriding select methods to re-use PostCSS node types. For example, using AtRule as the node type and extending it with properties such as variable: true and mixin: true. I have done the same with Comment to allow for inline comments that are supported in LESS.

I'm attempting to use the same approach to allow parsing of interpolation identifiers. For example:

@{selector}:hover { ... }

would be parsed as a Rule with a selector value of '@{selector}:hover', just as foo:hover { ... } would be parsed as a Rule with a selector value of foo:hover. The same would go for Declaration nodes to allow the prop value to contain interpolation identifiers.

---

So far I haven't had much luck in getting things to play nicely and allow that. I tried an approach overriding unknownWord but had to abandon it to complete the other features. The rewrite is complete, except for Interpolation support. I will start work on that again tomorrow but wanted to ask if you could see a solution.

[ai]

I suggest you to create special token for @{ symbols. Then you can make special logic with it in other.

Or you can keep current tokens, but override parse method.

[shellscape]

@ai interesting idea. could you share how you see that looking?

[ai]

Sorry, I will not have time for it in next few weeks, because I am preparing for conference talk.

Ask a questions.

[jwilsson]

@shellscape Wow, this looks amazing!

You seem to have a pretty good streak going, but I'll be happy to help out with testing across downstream projects.

[shellscape]

This PR is ready for test use. @jwilsson

[jwilsson]

@shellscape Great! I'll take a look over the weekend.

[thorn0]

LESS variables cannot contain whitespace between the variable name and the colon (e.g. @thing : value) and will be parsed as regular CSS.

What is the motivation behind this? Less allows whitespace in that position.