CSS Vars Fallback


Does anyone know if there anything such as this for Atom, concerning native CSS Variables ?


I failed to find anything so wanted to ask in case I missed it.


I haven’t seen anything. It wouldn’t be hard to build this on your own, and I expect that you wouldn’t even need a package to do it (unless you want to make one). If you give me a thorough description of the features you’re looking for, I can help you get started.


Thanks for your feedback and response, it’s very much appreciated.

Well I was looking for a conversion for CSS variables to include corresponding fallbacks.

I’m not sure if the one I linked to above also converts named colors to hex, of it it only deals with colors, I honestly didn’t try it. But ideally I was searching for something for Atom that could address and handle all types of user defined CSS variables such as margins, gutters, font, etc., whatever you throw at it.

Which would perhaps be a big task for an extension/package, since something does not presently exist.


The screenshot you’ve posted shows a command doing very simple things.

  1. The algorithm first goes through the document to find lines that include the string var(*).
  2. Each time one of those lines is found, the algorithm looks inside the parentheses to find a variable name.
  3. The algorithm finds a line in the document where the variable name is in the property position and reads its value.
  4. From there, it’s easy to compute the fallback text by combining the first line’s property and the second line’s value.
  5. To eliminate redundancy, it’s important to look at the line immediately above the first match to see if it has the same content as the computed text.
  6. If not, then insert the text.

That’s a very simple process, and would barely take up more lines of code than there are steps. Is there anything else that you’re looking for?


Thanks again @DamnedScholar .

Wow, that is a very clear and elegant way to describe and approach it.

I think that would cover most things, would it also be able to address nested vars inside calc() for instance ?


Of course, but what is your expected outcome? Do you want to create a property with the calc() intact and no var(), or do you mean to eliminate the CSS3 entirely? If so, in the case of calc(), what should the value of the fallback be. Should it default to the calc-value? If so, it’s very easy to perform a str.split(' ')[0] on the contents of the calc().


I was thinking to leave the calc() intact.


If var(*) is just being replaced by the value of the variable, then all that has to happen is those first four steps and I can give you some code to put in your init.coffee file to implement this feature. First, though, do you have any familiarity with programming languages?


Thanks again for your input and responses @DamnedScholar .

Honestly I have never approached or tinkered with Atom from the init.coffee standpoint.

I think with custom user defined CSS Vars coming of age, this could be more beneficial for widespread users
and usage as an extension. To be used when and where needed.


Sure, but that’s not what I asked. If you have any background with a language like JavaScript, Python, or Ruby, my answer might be slightly different than if your experience is with C/C++/Java, and very different from if you have no experience or only use some really niche language like ASP or Haskell. I could give you anything from a list of links to API documentation to the complete code, based on how much free time I have and your interest in learning the internal logic of the editor for next time you want to make it do something new.

If I give you code to put in init.coffee, and you want it to be a package, it’s very easy to make it into a package. But that’s a bridge that doesn’t have to be crossed yet, not with an algorithm as small as this one.


Ok assume this:

But …

I am glad it’s easy for you, for many others a package would be beneficial for such a task.

~ ~ Please don’t get me wrong, I appreciate you trying to edify the process and approaches. ~ ~



I hope my last post was not taken wrongly.

My intent was not to in anyway diminish your input and assistance. It was very much appreciated. You are obviously much more well versed than me, so I would still be interested to get your input. Javascript would be the most welcome approach to me out of those you listed.

Thank you, for any further assistance you may provide.

@ 3rd Party Package Developers, those whom like too extend Atom.

I do still feel this is also a nice opportunity for someone versed in building packages to help the community concerning a CSS Variable Fallback like the one for VS Code demonstrated in the first post above. It would be a nice addition to the Atom packages.


Shall I assume yes ? :no_mouth:


Sorry, I’ve been busy with a new job this week and haven’t had the bandwidth to help out on any posts that require more than a little attention.


:upside_down_face: Ok, no problem.

I was just curious, given you said it was easy and would barely take up very many lines of code to accomplish. That and seeing you have posted 147(+/-) posts since the comment 22 days ago. Those comments combined would easily exceed the lines of code you said could accomplish this.

:thinking: :wink:


Another 21 days (being patient), I’m not gonna count posts since, but it continues to grow exponentially. I would really appreciate the help still (I think it would be welcome in the community also), given how easy it was described to accomplish.

Is it just me.



Out of pure curiosity, why do you want such a feature?

I figure it’d be much easier to setup Atom to run something like autoprefixer on file save or some such?


Has it occurred to you he’s not really interested in writing it for you? He was saying it’s easy to write (with adequate knowledge of JS), not that he wants to do it.

BTW, he’s not an Atom employee; he’s just a user, like you. He’s under no obligation to do it in the first place.


The use and purpose seems pretty self explanatory in the first post.


Thats a pretty easy statement to make, I was just relying on his last response that he was busy so I was periodically stopping back in. He never hinted as such in that regard.