[Theme] Multiple theme registration always output the first registered theme name in md-base-theme() mixin

[simongcc]

Steps to reproduce

Because my layout have several button and page design.
So the base code look like this:

@include md-register-theme("default", (
  primary: md-get-palette-color(grey, 700),
  secondary: md-get-palette-color(black, A200),
  accent: md-get-palette-color(white, A200),
  // theme: light // default
));

@include md-register-theme("dark-solid", (
  primary: md-get-palette-color(black, A700),
  accent: md-get-palette-color(blue, A200),
  // primary: md-get-palette-color(white, A700), // The primary color of your application
  // accent: md-get-palette-color(red, A200), // The accent or secondary color
));

What is expected?

It is expected the theme to be separately generated.
So that each theme can work in harmony.

:root {
  --md-theme-default-primary: #616161;
  --md-theme-default-accent: #fff;
  --md-theme-default-theme: "light";
  --md-theme-default-secondary: #000;
}
.md-theme-default :not(input):not(textarea)::-moz-selection {
  background-color: #fff;
  background-color: var(--md-theme-default-accent-on-background, #fff);
  color: rgba(0, 0, 0, 0.87);
  color: var(--md-theme-default-text-primary-on-accent, rgba(0, 0, 0, 0.87));
}
... skip

:root {
  --md-theme-dark-solid-primary: #000;
  --md-theme-dark-solid-accent: #448aff;
  --md-theme-dark-solid-theme: "light";
}
.md-theme-dark-solid :not(input):not(textarea)::-moz-selection {
  background-color: #fff;
  background-color: var(--md-theme-default-accent-on-background, #fff);
  color: rgba(0, 0, 0, 0.87);
  color: var(--md-theme-default-text-primary-on-accent, rgba(0, 0, 0, 0.87));
}
/* ... skip */

What is actually happening?

The outcome css look like this:
As you can see, the non-default theme is also output as "md-theme-default" in md-base-theme() mixin.

:root {
  --md-theme-default-primary: #616161;
  --md-theme-default-accent: #fff;
  --md-theme-default-theme: "light";
  --md-theme-default-secondary: #000;
}
.md-theme-default :not(input):not(textarea)::-moz-selection {
  background-color: #fff;
  background-color: var(--md-theme-default-accent-on-background, #fff);
  color: rgba(0, 0, 0, 0.87);
  color: var(--md-theme-default-text-primary-on-accent, rgba(0, 0, 0, 0.87));
}

:root {
  --md-theme-dark-solid-primary: #000;
  --md-theme-dark-solid-accent: #448aff;
  --md-theme-dark-solid-theme: "light";
}
.md-theme-default :not(input):not(textarea)::-moz-selection {
  background-color: #fff;
  background-color: var(--md-theme-default-accent-on-background, #fff);
  color: rgba(0, 0, 0, 0.87);
  color: var(--md-theme-default-text-primary-on-accent, rgba(0, 0, 0, 0.87));
}
/* ... skip */

According to my understanding, I think it is a bug and not a desired result.
The md-base-theme() mixin should generate different set of theme styles based on the registration name in md-register-theme() mixin.

Update 20180408

I have tested my node-sass for its integrity. The looping(@each) of a map is working properly without duplication.

Moreover, I have injected the following code to test $md-themes property in md-theme-component-relative mixin.

@mixin md-theme-component-relative () {
  @each $theme, $palette in $md-themes {
    $md-theme-palette: map-merge($md-theme-palette, $palette) !global;
    $md-current-theme: $theme !global;

    .md-theme-#{$theme} & {
      testname: $theme; // injected test code
      @content;
    }
  }
}

Result css

/* ... skip */
.md-theme-default :not(input):not(textarea)::-moz-selection {
  testname: default;
}
.md-theme-default :not(input):not(textarea)::selection {
  testname: default;
}

/* ... skip */
.md-theme-default :not(input):not(textarea)::-moz-selection {
  testname: default;
}
.md-theme-default :not(input):not(textarea)::selection {
  testname: default;
}
.md-theme-dark-solid :not(input):not(textarea)::-moz-selection {
  testname: dark-solid;
}
.md-theme-dark-solid :not(input):not(textarea)::selection {
  testname: dark-solid;
}

"default" (the first theme) runs twice so it appear that it is duplicated. "dark-solid" is also generated but always after "default".

I have updated the title from "Multiple theme registration always output the first registered theme name in md-base-theme() mixin"
to "Multiple theme registration output accumulated theme style inside md-theme-component and md-theme-component-relative mixin"

[Samuell1]

What is your version of node-sass?

[simongcc]

@Samuell1 My version is

node-sass	4.8.3	(Wrapper)	[JavaScript]
libsass  	3.5.2	(Sass Compiler)	[C/C++]

[simongcc]

@Samuell1 I have done some tests and I have updated the test result for reference in the first post. The problem occur when register more than 1 theme. By explaining in terms of Array, when register 1 item, it output 1 item.
When register 2 items, it become 3 items. When register 3 items, it become 6 items.

@mixin md-theme-component-relative () {
/*
in there, it generate an accumulated $md-themes, it should be instead using the exact palette 
because, each time running md-register-theme(), it run md-theme-component-relative()
and each time it run, it is doing a loop instead of the just registered theme
maybe it should be something like md-theme-component-relative($current-theme-name)
*/
instead of accumulated theme list
  @each $theme, $palette in $md-themes {
    $md-theme-palette: map-merge($md-theme-palette, $palette) !global;
    $md-current-theme: $theme !global;

    .md-theme-#{$theme} & {
      testname: $theme;
      @content;
    }
  }
}

So according to my understanding, the following solutions to the problem without too intrusive changing is:
First, add variable to store newly registered theme name

/**
 * Store the newly registered theme name for comparison, used for checking just called md-register-theme's theme name
 * ---
 * @access private
 * @type string
 * @group themes
 */

$md-theme-name: null;

and then in the loop of the mixin md-theme-component-relative and md-theme-component, add a checking for checking specific theme name, for the sake of preserving original idea to loop all themes, might consider using a keyword 'all'

@mixin md-theme-component () {
  @each $theme, $palette in $md-themes {
    $md-theme-palette: map-merge($md-theme-palette, $palette) !global;
    $md-current-theme: $theme !global;

    @if( $theme == $md-theme-name or $md-theme-name == 'all' ) {
      &.md-theme-#{$theme} {
        @content;
      }
    }
  }
}

@mixin md-theme-component-relative () {
  @each $theme, $palette in $md-themes {
    $md-theme-palette: map-merge($md-theme-palette, $palette) !global;
    $md-current-theme: $theme !global;

    @if( $theme == $md-theme-name or $md-theme-name == 'all' ) {
      .md-theme-#{$theme} & {
        @content;
      }
    }
  }
}

// in all.scss
// add this line at the first line
$md-theme-name: 'all';

Then the duplicated generation could be resolved while keeping the component rendering correctly.

[Samuell1]

Can you downgrade node-sass and test it? It can be because of this #1619

[simongcc]

@Samuell1 I have downgraded to node-sass 4.7.2 to test, the repeated item problem is same as 4.8.3.

[Samuell1]

@simongcc Do you think you can make PR fix for this issue?

[simongcc]

@Samuell1 Sure, which branch should I based on to modify and which branch to submit merge request?

[VdustR]

@simongcc Please read the guide before you contribute, thanks!

https://github.com/vuematerial/vue-material#contributing

[simongcc]

@Samuell1 @VdustR I have created a pull request, because I have forked it before and created the fix in the fork. I am not sure if it will break anything. Sorry it is my first time to make a PR to open source project. If I have done anything wrong, please feel free to point me out.

[Samuell1]

@simongcc Nice! If you make it we will check it and if its everything okay we will approve it :)