dart-sass-variable-loader/src/parse-variables.js

Sass variable loader module for webpack (dart)

import sass from 'sass';
import camelCase from 'lodash/camelCase';

function constructSassString(variables) {
  const asVariables = variables
    .map(variable => `$${variable.name}: ${variable.value};`)
    .join('\n');
  const asClasses = variables
    .map(variable => `.${variable.name} { value: ${variable.value} }`)
    .join('\n');

  return `${asVariables}\n${asClasses}`;
}

export default function parseVariables(variables, opts = {}) {
  const result = sass.renderSync({
    data: constructSassString(variables),
    outputStyle: 'compressed',
  }).css.toString().replace('}.', '}\n.');

  const parsedVariables = result.split(/\n/)
    .filter(line => line && line.length)
    .map(variable => {
      const [, name, value] =  /\.(.+){value:(.+);?}/.exec(variable);
      const obj = {};

      if (opts.preserveVariableNames) {
        obj[name] = value;
        return obj;
      }

      obj[camelCase(name)] = value;
      return obj;
    });

  if (!parsedVariables.length) {
    return {};
  }
  return Object.assign.apply(this, parsedVariables);
}