csstools / postcss-advanced-variables

Use Sass-like variables, conditionals, and iterators in CSS
Creative Commons Zero v1.0 Universal
130 stars 33 forks source link

Variables strings #62

Closed Trolleymusic closed 5 years ago

Trolleymusic commented 6 years ago

I'm having some trouble with outputting variable as encapsulated strings - it may just be confusion on my part, but let me give you some examples:

If I add a string as a variable, eg:

$font-custom-name: "Custom Font";

In Sass I would use:

font-family: "#{$font-custom-name}"

And end up with this:

font-family: "Custom Font";

Every way I try to output it ...

.example-1 {
  font-family: $font-custom-name;
}

.example-2 {
  font-family: "$font-custom-name";
}

.example-3 {
  font-family: $(font-custom-name);
}

.example-4 {
  font-family: "$(font-custom-name)";
}

.example-5 {
  font-family: $font-custom-name;
}

.example-6 {
  font-family: "#{$font-custom-name}";
}

.example-7 {
  font-family: ""$font-custom-name"";
}

.example-8 {
  font-family: '$font-custom-name';
}

... none of them seem to come out how I want them to.

.example-1 {
  font-family: Custom Font;
}

.example-2 {
  font-family: ,Custom Font;
}

.example-3 {
  font-family: Custom Font;
}

.example-4 {
  font-family: ,Custom Font;
}

.example-5 {
  font-family: Custom Font;
}

.example-6 {
  font-family: ,Custom Font;
}

.example-7 {
  font-family: ,Custom Font;
}

.example-8 {
  font-family: '"Custom Font"';
}
maxmilton commented 6 years ago

Why is the quoting an issue? font-family: Custom Font; is still valid + it saves a couple bytes. The comma is actually the separator not quotes or spaces.

See: https://developer.mozilla.org/en-US/docs/Web/CSS/font-family#Valid_family_names

In my variables I always use quotes since it's easier to read as a developer but I actually want no quotes in my compiled output for byte savings.

jonathantneal commented 5 years ago

Quote resolution is not in scope for this project, but I’d review a PR if it had it.