Sass variables should (optionally?) have !default flag

[nategreen]

In the scss/map-deep format, the variables it generates (for use in the map) have the !default flag:

// '!default' means if the variable is/was already defined, this declaration gets skipped
$my-var: #123ABC !default; 
$tokens: (
  my: (
    var: $my-var,
  )
);

…whereas the scss/variables format doesn't have that:

// No !default, so this variable can't be overridden during Sass compilation
$my-var: #123ABC;

Is there a reason why one has it and the other doesn't? To me, it seems like:

• These should agree…It's not necessarily a huge deal, but currently if we build both formats, downstream Sass compilations will either be able to override the values or not, based on which format they choose.
• !default should be added as an option so we can choose whether or not we want them to be able to override the variables from the configuration. (I guess that's a feature request. 😄)

[dbanksdesign]

I like having !default as an optional configuration. Do you think it would make sense to do that at the file level or at the token level?

[nategreen]

I was just picturing it being an option on the format in the config—beyond that, not sure. I guess the token level makes sense for overrides, not sure about file level…are there other options/features that work at the file level?

[nategreen]

so we can choose whether or not we want them to be able to override the variables from the configuration

Oh, I think I was multi-tasking when I wrote this, I just meant "so we can choose whether or not downstream users can override the variables," full stop. I don't know if I can conjure a reason we'd want the default flag on some tokens but not others, but it doesn't seem out of the question.

[dbanksdesign]

We merged in #359 onto the 3.0 branch targeting the next major release. We will keep this issue open until the release. We want to see if this flag themeable: true on the token can be used in other built-in formats so that this is not SCSS specific. If anyone has ideas for this please open a PR or comment on this issue: #474 thanks!

[dbanksdesign]

Closing this issue as this is now a feature in 3.0. You can get it today with npm install style-dictionary@next