Syntax weirdness?

This could be my fault, but if it’s not then it’s probably worth addressing.

/* variables.css */
@value borderRadius: 3px;
@value thing: pink;

/* styles.css */
@value vars: styles/variables.css;

@value borderRadius as br from vars;
@value thing from "styles/variables.css";

import styles from './styles.css'
console.log(styles);

Use case 1: If the first line of styles.css is written with quotes around the file name, like @value vars: "styles/variables.css;", then the value of styles.vars in JS is ""styles/variables.css""; a string that includes the quote marks. I’m not sure if the README just needs to be updated to remove the quotes or if this is a bug.

Use case 2: If quotes are omitted when getting a value directly (@value thing from "styles/variables.css";) the rest of the line is interpreted literally, resulting in the value of styles.thing being "from styles/variables.css". Maybe this is related to the colon being optional?

Basically, it seems odd to require the omission of quotes in Use Case 1 and require the inclusion of quotes in Use Case 2. They’re doing nearly the same thing, so I’d expect a consistent syntax.

Is this intended, a bug, or something I’m doing wrong?

[dspnorman]

@bclinkinbeard I am also seeing the issue you describe with this syntax:

@value vars: styles/variables.css;

.myList {
  composes: abs-pos from vars;
}

This produces a build error of referenced class name "abs-pos" in composes not found.

It’s a shame, because this is the syntax presented as an example on the postcss-modules-values project README, and I imagine quite a few folks being mystified when it doesn’t work.

[OliverJAsh]

I also ran into this. The README is misleading. My error:

Module build failed: referenced class name "from" in composes not found (6:3)

  4 | .notification {
  5 |   color: primary;
> 6 |   composes: notification from notificationListItem;