Generated by SassMeister.com.

SassMeister-input.scss

// ----
// libsass (v3.2.4)
// ----

// Map from Imported JSON
$map: ( primaryColor: "red", secondaryColor: "blue" );

:root {
    --x-foo-primary-color: map-get($map, 'primaryColor');
  // Not the outcome you expect because of existing shorthand allowed by Sass for long property names based on one prefix
  --common-properties: {
    color: map-get($map, 'primaryColor');
    background: map-get($map, 'secondaryColor')
  }
}
x-foo {
  color: var(--x-foo-primary-color);  
  // Apply crashes the compiler
  //@apply(--common-properties)
}

SassMeister-output.css

:root {
  --x-foo-primary-color: "red";
  --common-properties-color: "red";
  --common-properties-background: "blue";
}

x-foo {
  color: var(--x-foo-primary-color);
}