Process `url`s when compiling SCSS

[samuelthomas2774]

Closes #320.

[intrnl]

Interested on how this would work in this scenario:

theme/
  assets/
    icon-delete.svg
  partials/
    general/
      _chat.scss
  index.scss
  _mixins.scss

// index.scss
@import 'mixins';
@import 'partials/general/chat';

// _mixins.sxss
@mixin theme-icon ($icon) {
  background-image: url('#{$icon)');
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}

// partials/general/_chat.scss
.da-toolbar::before {
  @include theme-icon('../../assets/icon-delete.svg');
  content: '';
  display: block;
  height: 30px;
  width: 30px;
}

Would it resolve the path from the mixin, or from the partial itself?

[samuelthomas2774]

As PostCSS runs before Sass it will see the mixin as a custom at rule and process url('#{$icon)') exactly as it is. If PostCSS was run after Sass it wouldn't know where to look for anything.

// index.scss postcss
@import 'mixins';
@import 'partials/general/chat';

// _mixins.scss postcss
@mixin theme-icon ($icon) {
  background-image: url('#{$icon}'); // `#{$icon}` doesn't exist so is returned as it is
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
}

// partials/general/_chat.scss postcss
.da-toolbar::before {
  @include theme-icon('../../assets/icon-delete.svg');
  content: '';
  display: block;
  height: 30px;
  width: 30px;
}

/* index.scss sass */
.da-toolbar::before {
  background-image: url('../../assets/icon-delete.svg');
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  content: '';
  display: block;
  height: 30px;
  width: 30px; }

[intrnl]

Ah, thanks for the info.

[zerebos]

Not sure if @Jiiks had something else in mind to accomplish this