Breaks @applyable Custom Properties

[HughxDev]

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
CSS Custom Properties (i.e. variables) which specify nested properties (i.e. mixins) for use with @apply, get escaped on output, which prevents use.

If the current behavior is a bug, please provide the steps to reproduce.
Given this input:

:root {
  --title-align: center;
  --sr-only: {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
  };
}

…CSS Loader produces this output:

:root {
  --title-align: center;
\--sr-only: {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    clip-path: inset(50%);
    border: 0;
};
}

What is the expected behavior?
--sr-only should not be prefaced with a backslash on output.

Please mention other relevant information such as your webpack version, Node.js version and Operating System.

• CSS Loader 1.0.0
• Webpack v4.16.2
• Node v10.7.0
• macOS Sierra 10.12.6

Note that the @apply spec has been abandoned and will likely be replaced with the ::part()/::theme() specs. However the latter are still in-development and aren’t ready to be used. In the meantime, there’s a polyfill for @apply from the Polymer team, so I’m using that instead, but it can’t pick up on the mixin definition with a backslash in front of it.

[alexander-akait]

Should be fixed in #748

[alexander-akait]

Close in favor #578