`lost-vars` not recognized by `stylelint`

[stephanschubert]

Is this a feature request or a bug report?

Bug report

What is the current behavior?

stylelint with config stylelint-config-lost complains about:

    29  25 error    funct… Expected single space before "-" operator (function-calc-no-unspaced-operator) (css-stylelint)
    29  25 error    funct… Expected single space after "-" operator (function-calc-no-unspaced-operator) (css-stylelint)

when using lost-vars() like

  margin-bottom: calc(lost-vars('gutter') * 2);

If it's a bug please provide the steps to reproduce it and maybe some code samples.

.stylelintrc contains:

{
  "extends": [
    "stylelint-config-standard",
    "stylelint-config-lost"
  ]
}

What is the desired behavior?

stylelint should not complain about the minus sign in the identifier.

What's the motivation or use-case behind changing the behavior?

stylelint is the de-facto standard for linting stylesheets.

What version of LostGrid, browser and browser version are affected by this issue? Did this happen in previous versions?

Doesn't apply here.

Anything else?

I have opened an issue at stylelint-config-lost prior and the author (/cc @delorge) asked me to open one here to further discuss the issue.

[peterramsing]

Well shucks. It does appear that we have a bit of an issue with this and I think stylelint is right to not have to have to write something custom just for LostGrid. I'm sorry you're having this issue.

@codebysubtract, what do you think? I can look into seeing if we can escape the variables but that feels like a hack. Should we look into changing the API? (golly...how many times do we have to change that API? 😝)

I'll also look into anything else that might allow us to work around this.

Thanks for bringing this up @jazen! Do you have ideas for a fix? Dare I suggest using the "soon to be deprecated" variables? I think at this point the best option for LostGrid is to no longer deprecate those and if we do make another migration make a tool that does the migration automatically.

[steve-holland]

@peterramsing From what I can gather the problem is the linter throws up an issue because we've no space around the - in lost-vars('gutter'). Unfortunately, I don't think that's going to be solved by using $lost-gutter instead, because we still have the same issue, namely a - with no spacing around it.

You are able to turn off the linter on specific lines in your code. So something like this might work...

margin-bottom: calc(lost-vars('gutter') * 2); /* stylelint-disable-line function-calc-no-unspaced-operator */

That should (in theory) just stop that particular rule from throwing up a problem. I haven't actually tried it though, if I get time in the next couple of days I'll have a play around with it.

@jazen Does that help you at all? I know it's not ideal, but it might help in the short term while we see if there is anything else we can do.

[delorge]

@codebysubtract stylelint supports variable syntaxes and wasn't throwing anything prior variables deprecation.

[steve-holland]

@delorge Ok fair enough, I didn't realise that. Thanks for letting me know 👍

[steve-holland]

@peterramsing Well it seems variables are ok. So I can't really think of anything other than resigning lost-vars() to the dustbin and keeping the old variables instead. There isn't really much point keeping the both of them, unless you have any other ideas?

[stephanschubert]

@codebysubtract Sure, I disabled the warning and don't mind that too much. Just figured this is an issue which needs to be discussed. :)

[peterramsing]

🤔 I'm a few months behind (changing jobs threw me for a loop).

Let me do some sipping on some coffee and ponder this. I'm tempted to use the previous variables but don't want to make a decision too quickly.