Minify css - remove angularjs expression in inline style for markup file

Question

I working with angularjs.

In markup file, I have an inline style like this:

<div class="progress-bar"
    style="display: block; width: {{::provision.precision}}%">
</div>

I minify this html code by grunt-contrib-htmlmin . Here is grunt config:

htmlmin: {
  dist: {
    options: {
      collapseWhitespace: false,
      conservativeCollapse: false,
      collapseBooleanAttributes: true,
      removeComments: true,
      removeCommentsFromCDATA: true,
      removeOptionalTags: true,
      minifyJS: {
        mangle: false
      },
      minifyCSS: true
    },
    files: [{
      expand: true,
      cwd: '<%= yeoman.dist %>',
      src: [
        '*.html',
        'views/{,*/}*.html'
      ],
      dest: '<%= yeoman.dist %>'
    }]
  }
}

There is minifyCSS inside htmlmin to minify inline style using grunt-contrib-cssmin .

The result after minify like that:

<div class="progress-bar" style="display: block;"></div>

There is no width in style attribute.

Does anyone know how to config minifyCSS to keep width: {{::provision.precision}}% after minify?

Answer 1

I found solution.

Use ng-style instead of style attribute. That's all!