Periods do not work in variable names

[oleersoy]

Variable:

:root { --Button.onDisabled-opacity: 0.6; }

Template definition:

.Button.onDisabled {
  cursor: default;
  opacity: var(--Button.onDisabled-opacity);
}

Rendering

.Button.onDisabled {
  opacity: .onDisabled-opacity;
}

I asked on SO if periods are allowed per the specification

To reproduce the above description:

git clone git clone git@github.com:superfly-css/superfly-css-component-button.git
cd superfly-css-component-button
npm install
gulp build:css
cat target/main/css/index.css

[MoOx]

PR welcome, but please triple check the spec to be sure.

[oleersoy]

I think this comment needs some updating:

/**
 * Resolve CSS variables in a value
 *
 * The second argument to a CSS variable function, if provided, is a fallback
 * value, which is used as the substitution value when the referenced variable
 * is invalid.
 *
 * var(name[, fallback])
 *
 * @param {String} value A property value known to contain CSS variable
 *                       functions
 * @param {Object} variables A map of variable names and values
 * @param {Object} source source object of the declaration containing the rule
 * @return {String} A property value with all CSS variables substituted.
 */

function resolveValue(value, variables, result, decl) {
  var results = []

Here's a partial attempt:

/**
 * Resolve CSS variables.
 *
 * The second argument to the CSS variable function, var(name[, fallback]), 
 * is used in the event that first argument cannot be resolved.
 *
 * @param {String} value May contain the CSS variable function
 * @param {Object} variables A map of variable names and values
 * @param {Object} result WHAT IS THE RESULT
 * @param {Object} decl Source object of the declaration containing the rule
 * @return {String} A property value with all CSS variables substituted.
 */

function resolveValue(value, variables, result, decl) {
  var results = []

WDYT? ... And I'm not sure what the result parameter is?

[MoOx]

Comment is indeed probably outdated; result is postcss result object.

[oleersoy]

Ok I updated the comment and sent a PR. I'll try to keep the PRs small, but just let me know if you have a preferred way of doing it.

[oleersoy]

I'm closing this because I got more feedback on SO and it seems periods are really not legal.