influenced other attribute

[evanyangg]

like this:

first mixin:

@define-mixin height-line-height $height, $line-height {
  height: $height;
  line-height: $line-height;
  [data-dpr="2"] & {
    height: calc($height * 2);
    line-height: calc($line-height * 2);
  }
  [data-dpr="3"] & {
    height: calc($height * 3);
    line-height: calc($line-height * 3);
  }
}

second mixin:

@define-mixin font-dpr $font-size {
  font-size: $font-size;
  [data-dpr="2"] & {
    font-size: calc($font-size * 2);
  }
  [data-dpr="3"] & {
    font-size: calc($font-size * 3);
  }
}

my code:

and chrome show: vertical-align is not working, i change this order, like this:

     vertical-align: top;
     display: inline-block;
     @mixin font-dpr 48px;
     /*@mixin height-line-height 48px, 48px;*/

    vertical-align: top;
    display: inline-block;
    font-size: 48px;

its ok; when i use two mixins ;

case 1:

    vertical-align: top;
    display: inline-block;
    @mixin font-dpr 48px;
    @mixin height-line-height 48px, 48px;

got

    vertical-align: top;
    display: inline-block;
    font-size: 48px;
    line-height: 48px;

case 2:

     display: inline-block;
     @mixin font-dpr 48px;
     @mixin height-line-height 48px, 48px;
     vertical-align: top;

got

    display: inline-block;
    font-size: 48px;
    line-height: 48px;

case 3

    display: inline-block;
    @mixin font-dpr 48px;
    vertical-align: top;
    @mixin height-line-height 48px, 48px;

    display: inline-block;
    font-size: 48px;
    height: 48px;
    line-height: 48px;

i very like this mixin tools , i know you will help me :)

[ai]

I need:

1. Full list of your PostCSS plugins.
2. Input, output and expected output.

[evanyangg]

1. postcss list

   "postcss-import": {},
   "postcss-cssnext": {},
   "postcss-nested": {},
   "postcss-mixins": {}

2. input

   vertical-align: top;
   display: inline-block;
   @mixin font-dpr 48px;
   @mixin height-line-height 48px, 48px;

   output

   vertical-align: top;
   display: inline-block;
   font-size: 48px;
   line-height: 48px;

   expected output

   vertical-align: top;
   display: inline-block;
   font-size: 48px;
   height: 48px;
   line-height: 48px;

[ai]

Coul you show bigger input/output examples? Have no idea right now

[evanyangg]

Have not found the problem, thx!!!