search

nathansmith / unsemantic

Fluid grid for mobile, tablet, and desktop.
http://unsemantic.com
MIT License
1.38k stars 161 forks source link

Error: Passing x, a non-string value, to unquote() #82

Closed manchuwook closed 8 years ago

manchuwook commented 8 years ago

It's possible that I am importing the wrong file, but this is the error that is currently coming up when I run my grunt task.

data:    app.js:7670 - error: Grunt :: DEPRECATION WARNING: Passing null, a non-string value, to unquote()
data:    app.js:7670 - will be an error in future versions of Sass.
data:    app.js:7670 -         on line 120 of assets/components/unsemantic/assets/sass/partials/_unsemantic-vars.scss, in `unsemantic-grid-placeholders'
data:    app.js:7670 -         from line 4 of assets/components/unsemantic/assets/sass/unsemantic-grid-base.scss
data:    app.js:7670 -         from line 19 of assets/styles/importer.scss
data:    app.js:7670 - error: Grunt :: DEPRECATION WARNING: Passing 10px, a non-string value, to unquote()
data:    app.js:7670 - will be an error in future versions of Sass.
data:    app.js:7670 -         on line 90 of assets/components/unsemantic/assets/sass/partials/_unsemantic-vars.scss, in `ie7-margin'
data:    app.js:7670 -         from line 204 of assets/components/unsemantic/assets/sass/partials/_unsemantic-vars.scss, in `unsemantic-grid-placeholders'
data:    app.js:7670 -         from line 4 of assets/components/unsemantic/assets/sass/unsemantic-grid-base.scss
data:    app.js:7670 -         from line 19 of assets/styles/importer.scss
data:    app.js:7670 - error: Grunt :: DEPRECATION WARNING: Passing "expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === " block " && this.currentStyle.width === " auto ') && "10px")', a non-string value, to unquote()
data:    app.js:7670 - will be an error in future versions of Sass.
data:    app.js:7670 -         on line 92 of assets/components/unsemantic/assets/sass/partials/_unsemantic-vars.scss, in `ie7-margin'
data:    app.js:7670 -         from line 204 of assets/components/unsemantic/assets/sass/partials/_unsemantic-vars.scss, in `unsemantic-grid-placeholders'
data:    app.js:7670 -         from line 4 of assets/components/unsemantic/assets/sass/unsemantic-grid-base.scss
data:    app.js:7670 -         from line 19 of assets/styles/importer.scss
data:    app.js:7670 - error: Grunt :: DEPRECATION WARNING: Passing 0.05, a non-string value, to unquote()
data:    app.js:7670 - will be an error in future versions of Sass.
data:    app.js:7670 -         on line 77 of assets/components/unsemantic/assets/sass/partials/_unsemantic-vars.scss, in `ie7-width'
data:    app.js:7670 -         from line 244 of assets/components/unsemantic/assets/sass/partials/_unsemantic-vars.scss, in `unsemantic-grid-placeholders'
data:    app.js:7670 -         from line 4 of assets/components/unsemantic/assets/sass/unsemantic-grid-base.scss
data:    app.js:7670 -         from line 19 of assets/styles/importer.scss
data:    app.js:7670 - error: Grunt :: DEPRECATION WARNING: Passing 0.05, a non-string value, to unquote()
data:    app.js:7670 - will be an error in future versions of Sass.
data:    app.js:7670 -         on line 51 of assets/components/unsemantic/assets/sass/partials/_unsemantic-vars.scss, in `ie7-push'
data:    app.js:7670 -         from line 265 of assets/components/unsemantic/assets/sass/partials/_unsemantic-vars.scss, in `unsemantic-grid-placeholders'
data:    app.js:7670 -         from line 4 of assets/components/unsemantic/assets/sass/unsemantic-grid-base.scss
data:    app.js:7670 -         from line 19 of assets/styles/importer.scss
data:    app.js:7670 - error: Grunt :: DEPRECATION WARNING: Passing 0.05, a non-string value, to unquote()
data:    app.js:7670 - will be an error in future versions of Sass.
data:    app.js:7670 -         on line 64 of assets/components/unsemantic/assets/sass/partials/_unsemantic-vars.scss, in `ie7-pull'
data:    app.js:7670 -         from line 271 of assets/components/unsemantic/assets/sass/partials/_unsemantic-vars.scss, in `unsemantic-grid-placeholders'
data:    app.js:7670 -         from line 4 of assets/components/unsemantic/assets/sass/unsemantic-grid-base.scss
data:    app.js:7670 -         from line 19 of assets/styles/importer.scss

This is the contents of my importer.scss

@import '_fonts.scss';
@import 'styles.scss';
@import '../components/unsemantic/assets/sass/unsemantic-grid-base.scss';
@import '../components/unsemantic/assets/sass/unsemantic-grid-responsive.scss';

This is version 1.0.2

nathansmith commented 8 years ago

Ah, I was abusing the unquote(…) function to pass in a bunch of garbled JS-in-CSS to make IE7 simulate…

{box-sizing: border-box}

It is CSS expression, a proprietary thing that older versions of IE shipped with.

This is the offending chunk, which appears several times in the _unsemantic-vars.scss file…

unquote('expression((!this.className.match(/grid-[1-9]/) && this.currentStyle.display === " block " && this.currentStyle.width === " auto ') && "10px")')

If you don't need to support IE7, you could set this in your importer.scss file…

$unsemantic-ie7-support: false;

Then none of that code should even be run or generated.

That would be the immediate fix. Beyond that, I will have to check if there is some other way to pass CSS expressions in the up-and-coming version of Sass.

If not, maybe it is time to just deprecate IE7 support altogether. :)

nathansmith commented 8 years ago

It also kind of irks me that Sass is even throwing a warning, as technically any alphanumeric value inside of quotes is – by its very definition – a "string value."

nathansmith commented 8 years ago

Okay, I think this will fix it…

https://github.com/nathansmith/unsemantic/commit/78b935ee89d01505719854490073e1e0ea8f8c7e

Here's an abbreviated example of what changed…

BEFORE:

@mixin ie7-width($decimal) {
    /* <IE7> */
    *width: unquote("... #{$decimal} ...");
    /* </IE7> */
  }
}

AFTER:

@mixin ie7-width($decimal) {
  @if $unsemantic-ie7-support {
    $str: "... #{$decimal} ...";

    $val: unquote($str);

    /* <IE7> */
    *width: $val;
    /* </IE7> */
  }
}

Essentially, I'm just ensuring that the string interpolation happens before I pass the string value to unquote(…), as what was causing Sass to throw a warning was the fact that the value was being passed in directly as #{$decimal} before.

Now, Sass is none the wiser that it's not just a static string, which I think should quell its warnings.

manchuwook commented 8 years ago

Thanks Nathan!