Trouble using Sass

[arggh]

I just tried to use a Sass mixin in my project. I had thought I had this beast configured, but this proves otherwise.

This code:

// checkbox.m.css
@mixin test() {
  background: black;
}
.medium {
  @include test();
}

will produce the error

=> Errors prevented startup:                  

   While minifying app stylesheet:
   app/client/components/common/checkbox/checkbox.m.css.css:102:3: missing '}'

and if I try to use a variable

@mixin test($color) {
  background: $color;
}
.medium {
  @include test(black);
}

I get this:

Processing Step: CSS Modules / PostCSS compilation
Unable to compile /Users/arggh/Development/app/client/components/common/checkbox/checkbox.m.css
CssSyntaxError: postcss-simple-vars: /Users/arggh/Development/app/client/components/common/checkbox/checkbox.m.css:175:1: Undefined variable $color
}
@mixin test($color) {
^
  background: $color;

/~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
=> Errors prevented startup:                  

   While processing files with nathantreid:css-modules (for target web.browser):
   error: postcss-simple-vars: /Users/arggh/Development/app/client/components/common/checkbox/checkbox.m.css:175:1: Undefined variable $color

=> Your application has errors. Waiting for file change.

and my configuration is here:

"cssModules": {
    "ignorePaths": [
      "node_modules",
      ".meteor",
      "server",
      "lib",
      "packages"
    ],
    "globalVariables": [
      "client/styles/global/fonts.m.css",
      "client/styles/global/colors.m.css",
      "client/styles/global/variables.m.css"
    ],
    "extensions": [
      "m.css"
    ],
    "enableSassCompilation": [
      "m.css"
    ],
    "postcssPlugins": {
      "postcss-simple-vars": {
        "fileOptions": [
          "client/styles/global/variables.m.css"
        ]
      },
      "postcss-modules-values": {},
      "postcss-nested": {},
      "postcss-utilities": {},
      "postcss-color-function": {},
      "postcss-modules-local-by-default": {},
      "postcss-modules-extract-imports": {},
      "postcss-modules-scope": {}
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {
        "browserslist": [
          "Chrome >= 32",
          "Safari >= 9",
          "Firefox >= 33",
          "Opera >= 23",
          "Edge => 12"
        ]
      }
    }
  }

Using variables defined in postcss-simple-vars works just fine.

[arggh]

Also, trying Sass calculations produces just invalid properties, like:

.checkbox {
   width: 100px / 2;
}

will output just:

.checkbox {
   width: 100px / 2;
}

[arggh]

@nathantreid do you have any updates if this is an actual issue or something I have misconfigured? Can I help in any way to resolve it?

[akanix42]

Sorry for the delay on this! There was a bug in the file extension handling for SCSS files preventing multi-dot file extensions (like somefile.m.css). This has been fixed in 2.7.4.

[arggh]

After updating to 2.7.4 I'm in a world of hurt! PostCSS functions are being complained about by SCSS Compilation...

/~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Processing Step: SCSS compilation
Unable to compile /Users/arggh/Development/app/client/components/common/circular_button/circular_button.m.css
Line: 80, Column: 63
Error: argument `$color` of `lightness($color)` must be a color

Backtrace:
    client/components/common/circular_button/circular_button.m.css:172, in function `lightness`
    client/components/common/circular_button/circular_button.m.css:172

/~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
=> Errors prevented startup:                  

   While processing files with nathantreid:css-modules (for target web.browser):
   /Users/arggh/Development/app/node_modules/node-sass/lib/index.js:439:16: argument `$color` of `lightness($color)` must be a color

[akanix42]

Can you post some sample code? Does the PostCSS function syntax conflict with the SCSS function syntax?

[arggh]

.cta {
  background: $primary;
  background: linear-gradient(to bottom right, color($primary lightness(+ 10%)) 0%, color($primary lightness(- 10%)) 100%);
  box-shadow: $darkShadow;
}

$primary is declared in my PostCSS global variables.

The color lib for PostCSS in question: https://github.com/postcss/postcss-color-function

[akanix42]

It appears this is a conflict between SCSS and the postcss-color-function plugin since the Sass compiler views that as an attempted SCSS function call: https://www.sassmeister.com/gist/c1a198679fd76b456ad100b213365aeb. Unfortunately, I think you might have to choose between scss and the postcss-color-function plugin.

[arggh]

I came to the same conclusion and already ditched scss for now, since I'm doing just fine with PostCSS and all the plugins there are for it.

Thanks for help & fixes!