Any way to compile sass?

[danielo515]

Hello, I would love to use this addon, but all mu colors are generated. Is any way to compile the sass files before extracting the values? Thanks in advance.

[Sqrrl]

Hey. So far I haven't found a good way to compile sass variable declarations in the browser and extract the necessary information. But I'm definitely open for suggestions. The same goes for Less.

[danielo515]

Maybe it is possible to use sass interop with Javascript? That way at least sass variables can be used

[kiwi-admin]

Since the Storybook uses Webpack. You can leverage sass-loader to compile your SASS files into single file. Preserve the CSS token annotations and point the add-on to it.

//.storybook/preview.js

import content from '!!raw-loader!sass-loader?{"sassOptions":{"outputStyle":"expanded"}}!../path/to/your/index.scss';

export const parameters = {
  ...
  designToken: {
    files: [{ filename: 'index.css', content: content.toString() }],
  },
};

[Sqrrl]

Since the Storybook uses Webpack. You can leverage sass-loader to compile your SASS files into single file. Preserve the CSS token annotations and point the add-on to it.

//.storybook/preview.js

import content from '!!raw-loader!sass-loader?{"sassOptions":{"outputStyle":"expanded"}}!../path/to/your/index.scss';

export const parameters = {
  ...
  designToken: {
    files: [{ filename: 'index.css', content: content.toString() }],
  },
};

Sass won't compile variable declarations to css variables, will it? So if I don't miss anything, this would result in a index.css without any token declarations.

[lgradzki-cksource]

would be great to have it!

$variable: someFunction(param, param2)

someFunction($param, $param2) {
  @return unquote("hsla(#{$param}, #{$param2}, 100%, 1");
}

add-on doesn't return compiled hsla color value but a function

[Sqrrl]

This was a deliberate design choice for preprocessed styles (Sass, Less). Afaik there is no reasonable way to compile the scss styles and not lose the token/variable information.

You could generate CSS custom properties from your Sass variables and annotate them. (see https://github.com/sass/sass/issues/3091#issuecomment-870969698)

[oobleck]

Since the Storybook uses Webpack. You can leverage sass-loader to compile your SASS files into single file. Preserve the CSS token annotations and point the add-on to it.

//.storybook/preview.js

import content from '!!raw-loader!sass-loader?{"sassOptions":{"outputStyle":"expanded"}}!../path/to/your/index.scss';

export const parameters = {
  ...
  designToken: {
    files: [{ filename: 'index.css', content: content.toString() }],
  },
};

Sass won't compile variable declarations to css variables, will it? So if I don't miss anything, this would result in a index.css without any token declarations.

Sass won't generate custom props automatically. That would be the responsibility of the author. But it is easy to do. A simple example.

This feature would be awesome 🥳 🚀 because my preference is to maintain a map of tokens in scss and then generate the custom props from there. This gives a lot of flexibility to consumers of my component lib.

$palette-map: (
  brand: dodgerblue,
  status-critical: crimson,
);

:root {
  /**
   * @tokens Colors
   * @presenter Color
   */
  @each $name, $color in $palette-map {
    --prefix-color-#{$name}: #{$color};
  }
}

Perhaps I'll take a stab at a PR with @kiwi-admin's suggestion.