asp.net-mvc - script - bundling asp net mvc

¿MVC Bundling rompiendo mis declaraciones de CSS calcule eliminando espacios?

Question

Tengo declaraciones css como esta:

margin-left: calc(50% - 480px);

Lo cual funciona bien sin minificar, pero tan pronto como comienzo a minificar, la declaración se cambia a:

margin-left: calc(50%- 480px);

Renderizar todas las declaraciones calc descompuestas. Suceden cosas similares con ancho, ancho máximo, ancho mínimo, etc. ¿Hay alguna forma en que pueda cambiar el comportamiento del paquete para dejar esas propiedades CSS en paz?

Actualmente solo estoy usando bundles.Add(new Bundle()) para evitar la minificación por completo, pero sería bueno si pudiera minimizarlo correctamente.

Answer 1

Además de la respuesta anterior: si usa:

margin-left: calc((50%) + 480px);

Deberías reescribirlo como:

margin-left: calc((50%) - -480px);

Ya que no parecía arreglar (50%) + para mí.

Answer 2

Este es un problema del optimizador.

Para evitar que el miniffier elimine los espacios en blanco, agrupe el elemento afectado entre paréntesis. Ese trabajo sobre el tema.

margin-left: calc((50%) - 480px);

Answer 3

Esto es totalmente normal ya que se refiere al Módulo de Valores y Unidades CSS que indica

Las siguientes características están en riesgo y pueden descartarse durante el período de CR: ''calc ()'', ''toggle ()'', ''attr ()''. "

Si pudieras omitir los espacios allí, eso no sería una minificación completa. Una opción reemplaza espacios con caracter unicode /00A0

Answer 4

No tengo idea de por qué pero calc ((50%) - 480px) no funcionó para mí, sin embargo, lo siguiente funcionó:

sustracción:

margin-left: calc(((100%) - (480px)))

adición:

margin-left: calc((100%) - -480px)

Answer 5

Si la minificación de css predeterminada no está haciendo lo que necesita, siempre puede usar una de terceros.

la agrupación le permite usar sus propias transformaciones utilizando IBundleTransform

var bundle = new Bundle("~/Content/css", myCustomCssTransform);

hay muchos diferentes nuget - nuget

por ejemplo, podrías usar el compresor YUI:

    using System.IO;
using System.Web.Optimization;
using Yahoo.Yui.Compressor;

namespace Bundler.Utilities
{
 public enum contentType
 {
  javascript,
  css
 }

 public class YUITransform : IBundleTransform
 {

  readonly string _contentType = string.Empty;

  public YUITransform(contentType contentType)
  {
   if (contentType == contentType.css)
   {
    this._contentType = "text/css";
   }
   else
   {
    this._contentType = "text/javascript";
   }
  }

  public void Process(BundleContext context, BundleResponse bundle)
  {
   bundle.ContentType = this._contentType;

   string content = string.Empty;


   foreach (FileInfo file in bundle.Files)
   {

    using (StreamReader fileReader = new
StreamReader(file.FullName)) {
     content += fileReader.ReadToEnd();
     fileReader.Close();
    }

   }

   bundle.Content = Compress(content);
  }

  string Compress(string content) {

   if (_contentType == "text/javascript")
   {
     return JavaScriptCompressor.Compress(content);
   }
   else
   {
    return CssCompressor.Compress(content,
                           CssCompressionType.StockYuiCompressor
);
   }
  }
 }
}

Answer 6

Tenga cuidado con el uso de variables en calc. Puedes terminar con otro error de CssMinify ():

@myVariable: 0em;
margin-left: calc((50%) - @myVariable);

está comprimido y la unidad está cortada:

margin-left: calc((50%) - 0);

¡y no es válida la llamada a calc () también!