postcss/postcss-mixins

Weird rule missing after postcss missing

timhecker opened this issue · 1 comments

Hi, my postcss plugins order in webpack config is:

postcssImport,
postcssUrl,
postcssMixins,
postcssNesting,
postcssSimpleVars,
postcssStripUnits,
postcssColorFunction,
postcssConditionals,
postcssPresetEnv,
cssnano

I've create a simple mixin:

@define-mixin centered $direction: both {
  position: absolute;

  /* center element relative to all coordinates */
  @if $direction == both {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  /* center element relative to X axis */
  @else if $direction == horizontal {
  	left: 50%;
  	transform: translateX(-50%);
  }

  /* center element relative to Y axis */
  @else if $direction == vertical {
  	top: 50%;
  	transform: translateY(-50%);
  }
}

and when I use it:

.class {
	position: relative;
	color: green;

	&::before,
	&::after {
		@mixin centered;
		content: '';
		width: 100%;
		height: 100%;
		border-radius: 50%;
		background-color: currentColor;
	}
}

the first rule after the mixin disappears, in this case content: '' and it is not what I expected. Do you know why?

ai commented

Hi. Could you try to remove different plugins and compare output to find who do it?