Skip to content

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

Open
@AKST

Description

@AKST

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions