Unrecognised prefix warnings #205

Closed
peterlarkin opened this Issue Mar 4, 2013 · 9 comments

5 participants

@peterlarkin

I'm getting a lot of 'WARNING: Unrecognised prefix' errors when using the keyframe mixin.

Example of the error:

WARNING: Unrecognized prefix: webkit
         on line 29 of /Users/peter/Sites/cnd/scss/bourbon/addons/_prefixer.scss, in `prefixer'
         from line 3 of /Users/peter/Sites/cnd/scss/bourbon/css3/_transform.scss, in `transform'
         from line 796 of /Users/peter/Sites/cnd/scss/_main.scss, in `@content'
         from line 42 of /Users/peter/Sites/cnd/scss/bourbon/css3/_keyframes.scss, in `keyframes'
         from line 792 of /Users/peter/Sites/cnd/scss/_main.scss
         from line 4 of /Users/peter/Sites/cnd/scss/style.scss

Example of the keyframe mixin I'm using:

@include keyframes(leftTurn) {
    0% { @include transform( rotate(0deg) ); margin-left: 100px; }
    25% { @include transform( rotate(90deg) ); margin-left: 100px; }
    75% { @include transform( rotate(90deg) ); margin-left: 0px; }
    100% { @include transform( rotate(0deg) ); margin-left: 0px; }
}

I can't quite figure out the issue from looking at the source, unless I'm doing something stupid! It also causes CodeKit to hang when compiling so I've had to resort to using 'compass watch' for now.

@peterlarkin

I should add: the style.css output is correct! It's just the warnings (and the resulting inability to use Bourbon with Codekit) which is the issue – perhaps this is something I should raise with CodeKit though!

@michelkaeser

Having the same - it's not CodeKit related since manually compiling shows the same

@alanmm

Me too, have no clue. :/

@peterlarkin

Right, I had a chance to investigate a bit more. The problem seems to have started when _prefixer.scss was refactored to be more concise with this commit: fc389ff

I've changed my _prefixer.scss back to the original nested structure with the updated variable names and it seems to be working. Does someone else want to test out this code and confirm?

$prefix-for-webkit:    true !default;
$prefix-for-mozilla:   true !default;
$prefix-for-microsoft: true !default;
$prefix-for-opera:     true !default;
$prefix-for-spec:      true !default; // required for keyframe mixin

//************************************************************************//
// Example: @include prefixer(border-radius, $radii, webkit ms spec);
//************************************************************************//
@mixin prefixer ($property, $value, $prefixes) {

  @each $prefix in $prefixes {
    @if $prefix == webkit {
      @if $prefix-for-webkit {
        -webkit-#{$property}: $value;
      }
    }
    @else if $prefix == moz {
      @if $prefix-for-mozilla {
        -moz-#{$property}: $value;
      }
    }
    @else if $prefix == ms {
      @if $prefix-for-microsoft {
        -ms-#{$property}: $value;
      }
    }
    @else if $prefix == o {
      @if $prefix-for-opera {
        -o-#{$property}: $value;
      }
    }
    @else if $prefix == spec {
      @if $prefix-for-spec {
        #{$property}: $value;
      }
    }
    @else  {
      @warn "Unrecognized prefix: #{$prefix}";
    }
  }
}

@mixin disable-prefix-for-all() {
  $prefix-for-webkit:    false;
  $prefix-for-mozilla:   false;
  $prefix-for-microsoft: false;
  $prefix-for-opera:     false;
  $prefix-for-spec:      false;
}
@alanmm

It's all clear now! No warning messages. Thank you very much!

😄

@plapier

Happy to hear that fixed the case. I'll revert back and get this merged in.

@peterlarkin

No worries! Just bear in mind that the variables need to remain in the current $prefix-for-spec format to work with the latest version of _keyframes.scss. Before the last commit they were in the $prefixer-enabled-for-spec format which would cause the keyframes mixin to break.

@saschamt

Great, great work Peter. Had lots of issues compiling keyframe Sass stuff with Codekit. After replacing the contents of _prefixer.scss with the code you've posted my Sass files compile again. Thumbs up! This has cut one of my CSS files in half size-wise...

@plapier

I implemented the fix for this and pushed it in the latest version release v3.1.2.1.

Changelog: https://github.com/thoughtbot/bourbon/wiki

Thanks for all the great work guys! @saschamt @peterlarkin @alanmm @MaddinXx

@plapier plapier closed this Apr 10, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment