Syntax weirdness?

[bclinkinbeard]

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?

[bclinkinbeard]

I'm also getting build errors when trying this:

@value vars: styles/variables.css;

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

Instead, it only works with this syntax.

.myList {
  composes: abs-pos from "styles/variables.css";
}

[geelen]

Yeah that final example I think would have to be:

@value vars: styles/variables.css;

.myList {
  composes: abs-post from "vars";
}

Which makes me sad. I'm thinking that a rule of no quotes in values definitions (see #23) makes sense, but with special handling for replacements within composes statements?

[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.

[damassi]

Any update on this? Running into the same issue as @dspnorman. Is the README incorrect, or our implementation?

[kumarharsh]

I think the README is wrong. I was also trying for 2-3 hours trying to get this "composes: xxx from yyy" to work, but gave up. Now I see that I was doing it wrong 😄

[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;