Material: Media query with \0 causing parsing issues with node-sass and LESS

[jraadt]

Because of the https://github.com/angular/material/commit/f3761781f74065c3d6cba8029a3ba420aab957ff commit, which includes a \0 after the media definition, applications using LESS and importing the generated CSS file with the less option to have access to classes and such within LESS no longer work. LESS doesn't support the \0 media query hack. Import example:

@import (less) 'angular-material/angular-material.css';

When trying to compile LESS you get the following error:

media definitions require block statements after any features in file angular-material\angular-material.css line no. 654

[barryvdh]

Also having this issue. Had to split up my vendor + app styling, but not ideal.

[larsRedia]

I think I have a similar problem using SASS:

Error: Invalid CSS after "...a screen\\0  and": expected "{", was "-width: 599px) ..."
    on line 1286 of stdin
    >> @media screen\0  and (max-width: 599px) {
   -------^

[enghen10]

@jraadt I also ran into the same with less, and I see that you found the same feature/bug in the less repo as I did. https://github.com/less/less.js/issues/1538

Seems like this could be made to be supported with less anyway by a small modification to that media query?

[kouak]

Same issue using node-sass (which uses libsass under the hood).

[johnsheldon]

I can confirm the issue in node-sass as well. It's breaking everything since the angular-material.css module is not building when we deploy to our server.

[idoo]

same problem, when i try deploy to heroku
Related https://github.com/angular/material/issues/6360

[Sayene]

+1

[stalinb87]

+1

[a-boertien]

+1

[simonh1000]

+1

[jcmccormick]

+1

[alextreppass]

Same issue with angular-material 1.0.0 installed over bower. It (libsass?) chokes on the \0 IE hacks:

>> Invalid CSS after "...ia screen\\0 and": expected "{", was "-width:599px){...."
>>   Line 6  Column 25446  bower_components/angular-material/angular-material.min.css

[ddjonline]

+1 angular-material 1.0.1 with node-sass ^3.4.1

[breity]

+1 me too with angular-material 1.0.1 and node-sass cli

[lasernite]

Was there a work around for this?

angular-material 1.0.1-master-d1b7f79

Sass::SyntaxError: Invalid CSS after "...a screen\0 and ": expected "{", was "(max-width: 599..."

[jcmccormick]

I, too, would love a work around for this.

Currently, I'm stuck using 0.9.8, which cuts out a hefty chunk of functionality.

Using Ruby on Rails with the sass-rails gem.

[prijindal]

+1 for me too

[prijindal]

I was having the same problem while using gulp

What i did was before feeding it into the sass compiler, I replaced all '\0' with a space ' '

  return gulp.src(assets.vendorCss.main)
    .pipe(replace('screen\\0','screen'))
    .pipe(concat(assets.vendorCss.output.filename))
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(gulp.dest(assets.vendorCss.output.path))

And now it works greatly
Note: I am using gulp-sass for compiling, i am not sure how gulp-ruby-sass handles it but i think this workaround should work for them

[alanwilhelm]

It was failing for me in rails using sass-rails. Sprockets doesn't make it easy to pipe it through a string replace function so... Changing line 666 of angular-material.scss from
@media screen\0 {
to
@media screen {

was all that was required for me to get it to compile.

[kavare]

@prijindal this way works for me!
I am now with angular-marterial 1.0.1 and node-saas in my gulp building process.

Just to add a point: replace is not a default function in gulp so you have to install gulp-replace in advance.

[newaeonweb]

@prijindal, @kavare : the workaround works fine for me, thanks

[ruischnaider]

+1

[tenshiAMD]

+1

[xiazek]

+1

[kmgilbert100]

+1

[AurelieV]

+1

[cerebroso]

+1

[andre-schilipack]

+1

[Fibrasek]

+1

[jwmay2012]

+1

[hinok]

Just for now...

# OS X
sed -i '' 's|screen\\0|screen|g' dist/modules/js/**/*.css

# Linux
# sed -i 's|screen\\0|screen|g' dist/modules/js/**/*.css

Hope it will help someone.

[jwmay2012]

What I ended up doing.

Stopped including angular-material in my css.scss file then added

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css">

to my html.

[futurechan]

+1

[xiazek]

Temporary fix for rails, which worked for us :

in application.scss

@import "angular_material_fixed";

in /app/assets/stylesheets/_angular_material_fixed.scss.erb

<%= 
  # Workaround for this issue: https://github.com/angular/material/issues/6304
  # TODO: remove this once angular-material 1.0.6 is released
  original = File.read(File.expand_path('../../../../../vendor/assets/javascripts/bower_components/angular-material/angular-material.scss', __FILE__))
  original.gsub('screen\0', 'screen ')
%>

fingers crossed for a 1.0.6 release

[alexilyaev]

@ThomasBurleson I'm still getting an error using Sass with Webpack:

Module build failed:
@media screen\0  and (max-width: 599px) {
      ^
      Invalid CSS after "...a screen\\0  and": expected "{", was "-width: 599px) ..."
      in /Users/alex/ ... /node_modules/angular-material/angular-material.css (line 6569, column 8)
 @ ./~/angular-material/angular-material.css 4:14-230 13:2-17:4 14:20-236

Versions:

• "angular-material": "1.0.6",
• "node-sass": "3.4.2",
• "sass-loader": "3.1.2",

[andre-schilipack]

+1

[stefanahman]

Yep, still problematic: Sass::SyntaxError: Invalid CSS after "...a screen\0 and ": expected "{", was "(max-width: 599..."

[shershen08]

+1, with LESS v2.6.0 - still fails for me; have to use replace workaround

[vsych]

+1

[DavidCheas]

+1

[alexalexandrescu]

Fix i used:
@media #{"screen\\0"} {}

[stefanahman]

@ThomasBurleson Why is this still closed?

[stefanahman]

Could this be an issue? https://github.com/angular/material/commit/eaf0fe5193d862120eee673de0861632d076d4a7#diff-c85cbcb498085b434972d3ed6403735dR23

[ThomasBurleson]

@stefanahman, @alexalexandresq - thx for the information. Reopened.

[moeabdol]

I'm having the same problem. I ended up using the CDN version instead.

[ThomasBurleson]

• the ie_fixes.css should not be included in the Sass compile process. It is a standalone, post-compile resource.
• bower-material/modules/layouts/angular-material.layouts.ie_fixes.css contains valid @media screen\0.

[gligoran]

@ThomasBurleson is @media screen\0 valid here: https://github.com/angular/material/blob/master/src/core/services/layout/layout-attributes.scss#L145?

[ThomasBurleson]

@gligoran - that should be removed also. Thank you for the alert.

Any other places we missed ?

[tenshiAMD]

This issue appeared again in the v1.0.8 in production deployment.

[mftaha]

+1

[ThomasBurleson]

Please Upgrade to at least 1.0.9 or (preferrably) v1.1.0-rc.5.

[ThomasBurleson]

@gligoran - Thx for the alert; not sure how we missed that. Updated in SHA cb59b08.

[gustavogsimas]

+1

I'm in 1.0.9 and still facing this issue when trying to deploy on production, which work arround is more recommended?

[ThomasBurleson]

@twizzzlers - upgrade to v1.1.0-rc.5... which has so many more fixes and improvments than 1.0.9.

[jexneedls]

+1

Hi @ThomasBurleson, sorry to tell you this but i'm still getting the issue for both 1.0.9 and v1.1.0-rc.5.

[ThomasBurleson]

@jexneedls - how are you getting this with the v1.1.0-rc.5 or later ?

Note: please do not include src/core/services/layout/ie_fixes.css in any SASS processing.

[vucalur]

fix in v1.1.0-rc.5 works for me