ShadowCss.shimCssText slow after RC6 update

I’m submitting a … (check one with “x”)

[x] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior

https://github.com/angular/angular/blob/38069aba35ac2914bb0a366036271a1388f7c275/modules/%40angular/compiler/src/shadow_css.ts#L151

The above line takes a few hundred milliseconds to run. See the attached JS profile:


If we include images as data urls in the css output, the performance is destroyed. The application startup might take anything from 5 to 30 seconds when having approx. 50 kB css included as component styles.


Expected/desired behavior

Shouldn’t take that long, RC5 did not have this issue.

Reproduction of the problem

Sample webpack configuration snippet

module: {
  loaders: [
    {test: /\.ts$/, exclude: [/\.spec\.ts$/, /node_modules/], loader: 'ts'},
    {test: /\.css$/, loader: 'raw'},
    {test: /\.html$/, loader: 'raw'},
    {test: /\.scss$/, loader: 'exports-loader?module.exports.toString()!css!postcss-loader!sass'},
    {test: /\.(png|jpg|gif)$/, exclude: /favicon\//, loader: 'url-loader?limit=8096&name=' + config.imageAssetPath }
  ],
  // ...
}

Component

@Component({
  styles: [require('./my.component.scss')]
})
class MyComponent {}

.scss (output is 70kB when minified)

$weather-map: (
  n600: "\e600",
  n500: "\e601",
  n440: "\e602",
  /* ~60 rows */
)
@each $name, $code in $weather-map {
  .weather-#{$name}:before {
    background-image: url('../../../images/weather-icons/#{$name}.png');
  }
}

Please tell us about your environment:

• Angular version: 2.0.0-rc.6
• Browser: all
• Language: TypeScript 2.0.2

[vicb]

@tobias74 @dcg thanks for the analysis.

we’ll do our best to include a fix in the next release as we understand it is important for dev mode.

[vicb]

@dcg thanks for the feedback - the fix has been merged