Question: Possible for css variables to work with capital letters and/or dashes?

[theperfectwill]

Hi.

Thanks for this REPO.

Is it possible for the css variables to work with capital letters and/or dashes?

I'm not sure if this is a php thing of the var, your plugin or the framework I am working with, but I figured I would ask here first as a starting point.

I've seen many authors' coding, maybe as a rule of thumb or best practice that they use underscores and lowercase letters, but I couldn't find anywhere online to backup that theory. So still being new to php, I'm not sure the rule, restriction or expectation here.

I have a nice work flow for my option values, but that includes capital letter and dashes. Capital letters have been omitted as of now, but these 2 things don't work with the dynamic css variables.

My theme option values may look something like...

// heading-variable-font_value
// heading-variable-color_value
// heading-variable-unit_amount_value
// heading-variable-unit_type_value
// heading-variable-line_height_value
// heading-variable-text_rendering_value

This allows my workflow to be faster because I can easily double click to copy and paste any text between a dash, like the "variable" above for example. And any text with underscores I can double click to copy as well. So in this case above I can easily just replace the variable for each similar option like...

// heading-1-font_value
// heading-1-color_value
// heading-1-unit_amount_value
// heading-1-unit_type_value
// heading-1-line_height_value
// heading-1-text_rendering_value
// heading-2-font_value
// heading-2-color_value
// heading-2-unit_amount_value
// heading-2-unit_type_value
// heading-2-line_height_value
// heading-2-text_rendering_value

And so on...

Can this be done? If so would you tell me how to tweak it so?

[theperfectwill]

I closed this. I was just overlooking that the css variable is a Variable, which doesn't work with hyphens.

[theperfectwill]

The issue was that I was never expecting to use my option values as variables, which is what needs to be done when using WP Dynamic Css.

[ykadosh]

Technically those are not 'actual' variables, but rather a syntax that I chose to represent variables in a dynamic CSS file. I chose this syntax because I wanted it to resemble PHP variables (and because that's how variables are represented in SASS files too).
If you look at compiler.php:177 you'll see that i'm using the regex #\$([\w]+)# to find those variables and replace them with actual values. This regex means that variables can have digits, lowercase & uppercase letters, and underscores (and that they must start with a $ sign). However, this regex can be changed to #\$([\w-]+)# to support dashes too. It might not be a bad idea, but i'll have to look into it.
Does that help?

[theperfectwill]

Yes, this helps.

Thanks @ykadosh

I tweaked what I needed, but also was going to commit a change, but I'm new to pull requests and forks. And Git said something about these repos could be automatically merged. Not sure what that means yet, but I didn't want to overwrite anything you've done "automatically". I just wanted you look at it first and approve/modify/deny/feedback/etc.

You can see the changes I made @ https://github.com/NoahjChampion/wp-dynamic-css/commit/3c866657c8e62a75e570c32a318a1b4e304ec5fd

I Added support for hyphens and plus symbols in the css variables
See example css language and output as to why @ http://take.ms/84Sb0

After testing again, I don't final capital letters or numbers being a problem at all. I must have got mixed up in testing.

But, just in case I saved me a snippet in case I run into the capital letters or numbers issue.

'#$([a-zA-Z-0-9_]+)#'

It is a little more specific, not sure if that is better or not, depending on the author preference/use.

return preg_replace_callback('#\$([a-zA-Z-0-9_]+)#', function ($matches) use ($callback) {
  return call_user_func_array($callback, array(
      $matches[1]
    ));
}

Thoughts?

[ykadosh]

The regex #\$([a-zA-Z-0-9_]+)# is equivalent to the regex #\$([\w-]+)#. The \w symbol represents alphanumeric characters (uppercase & lowercase) and underscores.
About the plus sign, what you are suggesting is problematic since CSS uses the plus sign as part of its syntax. You are technically replacing all the plus signs with nothing, and that has the potential to damage the CSS code. Instead, you can simply use it like so:

h1 {
    font-size: $unit_amount$unit_type !important;
}

And the compiler should separate those into two different variables.

If you want to commit those changes, you need to submit a pull request, and once I approve it, your changes will be merged to the master branch.

[theperfectwill]

Ok, about the regex. I'm not use to regex, so it was just some help I found online, in which I couldn't find/understand how to omit just the plus sign from the regex you have without breaking it. But that is fine since the plus sign is problematic, of which I wasn't sure.

Hmm... When or where does Css use the plus sign?

The main reason for adding the plus sign, which could be something else, is that it separates the 2 variables because variables back to back are a little harder to notice. For example, if the $ was a different color in the syntax it would be easy to see that there are 2 variables in once string.

The second reason, which was just beneficial, is that it made the css more self explanatory, meaning...

$unit_amount+$unit_type

which says the unit_amount plus the unit_type.

But it was just a thought, I thought I would get some feedback on. And yes, back to back variables does output the same without the plus sign. So it is not needed.

Any ideas for an alternate, viable solution?

• I thought about maybe 2 underscores, but author's may use that for option values.
• I thought about 2 hyphens. But that just seems a little off putting.

But again this was just to more easily identify when css variables are 2 in a line.

I realized that detecting if there is a variable string and a space in between a variable string, then remove that space wouldn't work because of values like margin or padding in one line like..

margin: 0px 0px 0px 0px;
margin: $top_margin $right_margin $bottom_margin $left_margin;

And ok about the Pull request.

[ykadosh]

In CSS you can use the + sign to denote two consecutive HTML elements. For example, to style a paragraph that comes immediately after a paragraph, you can use p + p {color:whatever}.

I understand what you are saying about identifying 2 different variables, but I really can't think of a solution for that. I think that your best option is to simply specify the unit value and the unit type in a single variable, or otherwise simply put the two variables together with no space...

[theperfectwill]

Ok.

Well it's fine then. Just thought I would ask before tossing the idea.

Thanks about the plus sign. I have come across that a few times, just couldn't recall it, having never used it either.