Why my webpack+sass-loader could auto convert `display: unset` to `display: inline; display: initial;`?

27 Views Asked by At

Even if i import raw css to sass transformer by some reason converts wrong

Could it be some caches enabled? Browserconfig support? PostCss? One of that plugins?

const AutoprefixerPlugin = require( 'autoprefixer' );
const PostcssNestedPlugin = require( 'postcss-nested' );
const PostcssPresetEnvPlugin = require( 'postcss-preset-env' );
const PostcssSimpleVarsPlugin = require( 'postcss-simple-vars' );

I dont even know how to debug.

$display: (
    "none": none,
    "initial": initial,
    "inherit": inherit,
    "unset": unset,
);

.d-unset2 {
  display: unset;
}

@each $displayKey, $displayValue in $display
{
    .d-#{$displayKey}
    {
        display: $displayValue !important;
    }
}

Output:

  .d-unset2 {
    display: inline;
    display: initial;
  }

  .d-none {
    display: none !important;
  }
  .d-initial {
    display: inline !important;
    display: initial !important;
  }
  .d-inherit {
    display: inherit !important;
  }
  .d-unset {
    display: inline !important;
    display: initial !important;
  }

If i pass this code to sass-online encoder it works well

Output:

.d-none {
  display: none !important;
}

.d-initial {
  display: initial !important;
}

.d-inherit {
  display: inherit !important;
}

.d-unset {
  display: unset !important;
}
0

There are 0 best solutions below