segmentio / myth

A CSS preprocessor that acts like a polyfill for future versions of the spec.
4.32k stars 130 forks source link

First CSS example doesn't work... #92

Closed remy closed 10 years ago

remy commented 10 years ago

Testing the CSS below (from the README first example) and using myth on the command line gives an exception:

» myth in.css out.css
       error · Error: property missing ':' near line 8:8
             ·   at error (/usr/local/lib/node_modules/myth/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:57:15)
             ·   at declaration (/usr/local/lib/node_modules/myth/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:189:33)
             ·   at declarations (/usr/local/lib/node_modules/myth/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:219:19)
             ·   at rule (/usr/local/lib/node_modules/myth/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:481:21)
             ·   at rules (/usr/local/lib/node_modules/myth/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:103:56)
             ·   at stylesheet (/usr/local/lib/node_modules/myth/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:73:16)
             ·   at Object.module.exports [as parse] (/usr/local/lib/node_modules/myth/node_modules/rework/node_modules/css/node_modules/css-parse/index.js:485:10)
             ·   at rework (/usr/local/lib/node_modules/myth/node_modules/rework/lib/rework.js:41:25)
             ·   at myth (/usr/local/lib/node_modules/myth/lib/index.js:36:10)
             ·   at /usr/local/lib/node_modules/myth/bin/myth:89:13

What's particularly strange about this is that when I use myth in the client side (using the .min.js file), it renders just fine. Any ideas why?

:root {
  --green: #a6c776;
}

@custom-media --narrow-window screen and (max-width: 30em);

@media (--narrow-window) {
  html {
    font-size: 1.2rem;
  }
}

a {
  color: var(--green);
  font-variant: all-small-caps;
  transition: color 1s;
}

a:hover {
  color: color(var(--green) shade(20%));
}

::placeholder {
  opacity: .4;
  transition: opacity 1s;
}

:focus::placeholder {
  opacity: .2;
}
MoOx commented 10 years ago

The README is up to date with current master & latest work haven't been released yet. If you want to get the readme example to work, just use current master (npm i -g git://github.com/segmentio/myth). I've planned a release next week but need to handle a tiny thing to improve performance first.

myth.js is only updated for release that's why you are getting some differences. (Where did you find a .min.js ?)

MoOx commented 10 years ago

Btw @ianstormtaylor maybe we should get a stable branch & make it default one.

remy commented 10 years ago

Not sure where the min file came from (@electricg can you comment?). I suspect it came from a clone and grunt build process (but that's a guess until @electricg comments). But it sounds like that would explain why it's behaving inconsistently.

remy commented 10 years ago

(For context, we're adding myth to list of processors on jsbin.com)

remy commented 10 years ago

Cheers for the clarifications, it does look like our .min was based off of the github repo, and our node module was the npm package. We'll stick with what's in npm to make keeping in sync easier.

FWIW I think having a stable branch (or develop & master) definitely would help.

Cheers.

ianstormtaylor commented 10 years ago

I think we can get away with keeping the current master setup, but we should just release faster? Or keep the mental barrier to releasing down I think. @MoOx can we release the current master as a minor bump and then when we improve the performance we can bump patch so that it proliferates easily?