Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Process urls when compiling SCSS #321

Open
wants to merge 5 commits into
base: master
Choose a base branch
from

Conversation

samuelthomas2774
Copy link

Closes #320.

@intrnl
Copy link

intrnl commented Mar 24, 2019

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
Copy link
Author

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; }

@zerebos zerebos requested a review from Jiiks March 27, 2019 15:55
@intrnl
Copy link

intrnl commented Mar 27, 2019

Ah, thanks for the info.

@zerebos
Copy link
Member

zerebos commented May 8, 2019

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

Maks-s added a commit to Maks-s/BetterDiscordApp that referenced this pull request Jul 17, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug] Themes are unable to import local files to their stylesheet
3 participants