csstools / postcss-short

Use advanced shorthand properties in CSS
https://jonathantneal.github.io/postcss-short
Creative Commons Zero v1.0 Universal
189 stars 7 forks source link

"*" results in error with Sass-Files #6

Closed DotCoyote closed 8 years ago

DotCoyote commented 8 years ago

I'm using our Plugin with Gulp and Sass:


gulp.task 'styles', ->

  if compileOnly != false
    srcFile = compileOnly
  else
    srcFile = paths.files.sass

  processors = [
    postcssshort()
  ]

  gulp.src([ srcFile ], base: paths.folders.sass)
    .pipe( plumber({ errorHandler: notify.onError("Error: <%= error.message %>") }))
    .pipe(sourcemaps.init())
    .pipe(sass(
      sourcemap: true
    ))
    .pipe(postcss(processors))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest(paths.folders.css))
    .pipe(browserSync.reload(stream: true))
    .pipe notify(
      message: 'Styles task complete'
      title: 'Styles'
      onLast: true)
div
  margin: * auto
  position: absolute 50% *

results in the following error-message:

gulp-notify: [Error running Gulp] Error: src/sass/_components/_base.sass Error: error reading values after on line 33 of src/sass/_components/_base.sass margin: * auto; ---------^

jonathantneal commented 8 years ago

Unfortunately, this is one of a few parsing issues I’ve run into with the .sass and .scss syntaxes. They also choke on Media Queries Level 4.

@media (width <= 1200px) {
  div {
    color: red;
  }
}

To be clear, these are bugs in Sass, part of their aggressive interpretation of math and media queries. I would open an issue there.

christianmagill commented 8 years ago

@jonathantneal Could an alternate syntax, such as using "null" be added?

mrcsmcln commented 7 years ago

+1. I think that in the interest of maximum compatibility, null is a suitable alternative for preprocessors such as Sass.

jonathantneal commented 7 years ago

You may change the skip token (documentation). The default skip token will remain *. Alternatively, run PostCSS before you run Sass.

I sincerely hope they ditch all this magic math in the next major release.

aleclarson commented 6 years ago

I've taken the initiative to file an issue regarding the lack of interoperability here.

Also the best workaround seems to be changing the skip token to _. 🙂

Side question: Does postcss-short support the skip option, or do I need to add postcss-short-spacing explicitly?