css-modules / postcss-icss-values

Pass arbitrary constants between your module files
MIT License
203 stars 18 forks source link

@value's with newlines are not recognised by this plugin #109

Open AKST opened 6 years ago

AKST commented 6 years ago

I'm going to recap the discussion on the module ember-css-modules repo, but basically I've run into an issue where values when newlines aren't recognised by this plugin, so I ended up writing a preprocessor that stripped newlines from values. Which wasn't that hard as the postcss plugin API exposes the text for an at rule as string.

Anyways is this by design or this a bug?


Examples

I would expect that when you write this

@value fontSize: media-value(
  case: "a" as: "18px",
  case: "b" as: "16px",
  case: "c" as: "16px",
  case: "d" as: "14px",
  else: "14px",
);

.fontDef {
  font-size: fontSize;
}

I would have expected this plugin to move the value of fontSize into the rule fontDef and you would have output like this:

.fontDef {
  font-size: media-value(
    case: "a" as: "18px",
    case: "b" as: "16px",
    case: "c" as: "16px",
    case: "d" as: "14px",
    else: "14px",
  );
}

An aside

The example above is from my postcss plugin which expands the media-value into media queries for each case. But just incase I missed something and before I pour to much time into that plugin, I actually made it to be used in conjunction with this plugin & css modules. Are there plans to facilitate responsive values in this plugin, or is there functionality already in this plugin that enables this?

From what I understand there isn't which probably has something to do with messing up the javascript API, which is what my plugin does anyways.