I can't generate variables css to a specific class

Hello!

We are use the Style Dictionary to generate our tokens, but we have a problem here.

The tokens are building to different products (themes) and we like use variables css, but in the generated files, we got:

// theme-x.css
:root {
   // variables
}

// theme-y.css
:root {
   // variables
}

How change the destiny of variables css to custom class, like a:

// theme-x.css
.theme-x {
   // variables
}

// theme-y.css
.theme-y {
   // variables
}

🍻

[dbanksdesign]

Unfortunately the built-in css/variables format does not allow this. But that would be a good addition! Here is the code: https://github.com/amzn/style-dictionary/blob/master/lib/common/formats.js#L106

You could write a custom format that does this too if you can’t wait for that change to be made into the core library:

StyleDictionary.registerFormat({
  name: 'css/variables',
  formatter: function(dictionary, config) {
    return `${this.selector} {
${dictionary.allProperties.map(prop => `  --${prop.name}: ${prop.value};`)}
    }`
  }
});

StyleDictionary.extend({
  source: [],
  platforms: {
    css: {
      files: [{
        destination: 'theme-x.css',
        format: 'css/variables',
        selector: '.theme-x'
      }]
    }
  }
})

Note: this is untested code, but should probably work and doesn’t include full working code. Also it won’t exactly match the functionality of ‘css/variables’ format, but if you want to you could copy the functions in https://github.com/amzn/style-dictionary/blob/main/lib/common/formats.js to make it work exactly the same.

Let me know if this helps!

[mduenias]

Hi!

I think is worth pointing out that you can also use Custom format helpers. To make use of the functions already defined in the library without having to re-write the formatter, if you only need to change/add a selector/class!

const { fileHeader, formattedVariables } = StyleDictionary.formatHelpers;

StyleDictionary.registerFormat({
  name: 'css/variables-themed',
  formatter: function({dictionary, file, options}) {
    const { outputReferences, theme } = options;
    return fileHeader({file}) +
      `:root .${theme} {\n` +
      formattedVariables({format: 'css', dictionary, outputReferences}) +
      '\n}\n';
  }
});

StyleDictionary.extend({
  source: ['src/**/*base.json', 'src/**/*dark.json'],
  platforms: {
    scss: {
      transformGroup: 'css',
      buildPath: 'build/css/',
      files: [{
        destination: 'dark.css',
        format: 'css/variables-themed',
        options: {
          outputReferences: true,
          theme: "dark"
        }
      }]
    }
  }
}).buildAllPlatforms();