/* colors.css */
@value primary: #BF4040;
/* or without colon for preprocessors */
@value secondary #1F4F7F;
.panel {
  background: primary;
}
/* transforms to */
:export {
  primary: #BF4040;
  secondary: #1F4F7F
}
.panel {
  background: #BF4040;
}

@value a: b, c: d; /* defines a as "b, c: d" */

@value primary, secondary from './colors.css';
.panel {
  background: secondary;
}
/* transforms to similar exports */
:import('./colors.css') {
  __value__primary__0: primary;
  __value__secondary__1: secondary
}
:export {
  primary: __value__primary__0; /* this long names will be mapped to imports by your loader */
  secondary: __value__secondary__1
}
.panel {
  background: __value__secondary__1;
}

import { primary } from './colors.css';
// will have similar effect
console.log(primary); // -> #BF4040

@value small as bp-small, large as bp-large from './breakpoints.css';
@value (
  small as t-small,
  large as t-large
) from './typo.css';
@media bp-small {
  .foo {
    font-size: t-small;
  }
}