salesforce-ux / theo

Theo is a an abstraction for transforming and formatting Design Tokens

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Inconsistency in variable names scss <-> stylus <-> less

phun-ky opened this issue · comments

With this task:

const generateColorVariablesForWeb = done => {
  const tasks = targets.map(target => () =>
    gulp
      .src('./src/dt/color-variables.yml')
      .pipe(
        gulpTheo({
          transform: {
            type: 'web'
          },
          format: {
            type: target
          }
        })
      )
      .pipe(rename(`color-variables.${target === 'stylusObj' ? 'styl' : target}`))
      .pipe(gulp.dest('src'))
  );
  return gulp.series(...tasks, seriesDone => {
    seriesDone();
    done();
  })();
};

And this DT:

props:
  - darkBlue:
    value: '{!bracingBlue}'
    hex: '#004080'
    name: 'color-darkBlue-primary'
    versionName: 'darkBlue'
aliases:
  bracingBlue:
    value: rgb(0, 64, 128)
global:
  type: color
  category: primary

I get different casing on the variable names:

in color-variables.scss:

$color-dark-blue-primary: rgb(0, 64, 128);

in color-variables.styl:

$color-darkBlue-primary = rgb(0, 64, 128)

in color-variables.less:

@color-dark-blue-primary: rgb(0, 64, 128);

What gives?

🦆 🤦‍♂️ OK, nevermind. I'm the one who added the stylusObj-format in the first place.. closing..