natxet/cssmin

Clone of CssMin for http://packagist.org/about-composer

cssmin's Issues

Filters an plugins

Have you discarded all plugins and filters from Joe's code?

@supports not correctly minified

@supports can't be used at the moment. The CSS code below should come out unaltered (already minified). However the closing bracket is removed.

steps to reproduce

echo \CssMin::minify('@supports(display:grid){.example{display:grid}}');

expected output
string(47): "@supports(display:grid){.example{display:grid}}"

actual output
string(46): "@supports(display:grid){.example{display:grid}"

'+ +' not correctly minified

'+ +' not correctly minified and becomes '++'. See minified code below.

Environment:
php 7.2
natxet/CssMin 3.0.4

Original function:

function getBordersSize(styles, axis) {
    var sideA = axis === 'x' ? 'Left' : 'Top';
    var sideB = sideA === 'Left' ? 'Right' : 'Bottom';

    return +styles['border' + sideA + 'Width'].split('px')[0] + +styles['border' + sideB + 'Width'].split('px')[0];
}

A minified function:

function getBordersSize(styles,axis){var sideA=axis==='x'?'Left':'Top';var sideB=sideA==='Left'?'Right':'Bottom';return+styles['border'+sideA+'Width'].split('px')[0]++styles['border'+sideB+'Width'].split('px')[0];}

Best regards,
Bart Heyrman

Move to PSR0/PSR4

This library currently contains 68 classes in a single file. To increase readability and maintainability I want to suggest moving every class to its own file.

If this fork aims to maintain backward compatibility, I'll probably go ahead and fork it.

"RemoveComments" flag not work

Filter adding "RemoveComments" does not remove comments (/ *! * /)

After adding the filter, the file looks like this

/ *!
   * Bootstrap v4.6.0 (https://getbootstrap.com/)
   * Copyright 2011-2021 Bootstrap Authors
   * Copyright 2011-2021 Twitter, Inc.
   * MIT License (https://github.com/twbs/bootstrap/blob/main/LICENSE)
   * /: root {- blue: # 007bff; - indigo: # 6610f2; - purple: # 6f42c1; - pink: # e83e8

...

I think that if in this line

https://github.com/natxet/CssMin/blob/master/src/CssMin.php#L1367

replace the code for conditions with (without !):

if (preg_match($this->whitelistPattern, $tokens[$i]->Comment))
{
    $tokens[$i] = null;
    $r++;
}

then the comment will be deleted

Environment:

PHP 7.1
natxet/CssMin 3.0.4

Create a stable branch or version tags

It would be great to have a stable branch or version tags for composer. This would make testing and deployment to production much easier, especially when changes or new features might break backwards compatibility.

Breaks on PHP 8.0 and up

I'm using the library to minify CSS on my workflow.

Up to PHP 7.4 it works fine, but spits this warning:

ERROR: The each() function is deprecated. This message will be suppressed on further calls 
in phar:///usr/local/bin/robo/vendor/natxet/cssmin/src/CssMin.php:2222

On PHP 8.0 and up, it fails as each() function is removed altogether from the language:

ERROR: Uncaught Error: Call to undefined function each() 
in phar:///usr/local/bin/robo/vendor/natxet/cssmin/src/CssMin.php:2222

This needs to be upgraded. What's the best way to achieve this? I'm up to put some work on this is necessary.

Minifications breaks animations (add quotes for @keyframes)

Minifications breaks animation for ie,safari,firefox

css:

 @keyframes sk-three-bounce

is parsed to:

@keyframes "sk-three-bounce"

Quotes breaks animation on Firefox and IE

Please fix it.

Problem with calc

Before: padding-top: calc(100% / (650 / 320) + 1em);
After CssMin: padding-top: calc(100% / (650 / 320)+1em); //This code does not work

According to the specification, after and before the minus and plus sign a space character is needed

Minification breaks bootstrap's glyphicons

When i'm not minifying my stylesheet, glyphicons works great. when I'm running the Minify::stylesheet, it breaks them...

Dublicate selectors not merge

Before minification, I concatinate a few css files. If this files has the same selectors then result files has a dublicate selectors with dublicates values.

For example:
core.css

h1 > a {
   color: blue;
   font-size: 2em;
   text-decoration: underline;
}

site.css

h1 > a {
   color: #ef0;
   font-size: 1.75em;
}

actual core.css+site.css with minification

h1>a{color:blue;font-size:2em;text-decoration:underline;}h1>a{color:#ef0;font-size:1.75em;}

expected

h1>a{color:#ef0;font-size:1.75em;text-decoration:underline;}

Copy the Wiki from Google Code before 2016 (Google Code Shutdown)

Case Sensitivity Problem with Package name

Hi !

Composer package names supposed to be in small latter.
I am unable to install your package with composer.

Please read the links.

composer/packagist#186
http://stackoverflow.com/questions/24415965/naming-conventions-when-creating-a-php-composer-package

thanks!

Mangles css function definitions (@-moz-document url-prefix())

If a definition like this is used in a css file.
Then there will be a closing bracket } missing in the minified output.

@-moz-document url-prefix() {
  .btn { margin: 0 }
}
@media (max-width: 768px) {
  @-moz-document url-prefix() {
    .btn { margin: 5px; }
  }
}

A workaround is to separate the two blocks by another (unrelated) css definition.

Also note: As far as I understand it this kind of functionality will be removed from Firefox

at-media + at-keyframes not minified correctly

Minifier break css when at-media & at-keyframes are used together.

This css:

@media (min-width: 0) and (max-width: 360px) {
    @keyframes loop {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-100% + 360px));
        }
    }
}

@media (min-width: 480px) {
    @keyframes loop {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(calc(-100% + 480px));
        }
    }
}

.a {
    color: red
}

when minified and then re-formatted, produces this result:

@media (min-width: 0) and (max-width: 360px) {
    @keyframes loop {
        0% {
            transform: translateX(0)
        }
        100% {
            transform: translateX(calc(-100% + 360px))
        }
    }@media (min-width: 480px) {
    @keyframes loop {
        0% {
            transform: translateX(0)
        }
        100% {
            transform: translateX(calc(-100% + 480px))
        }
    }
} .a {
      color: red
  }

Notice the missing "}". If there's only one at-media + at-keyframes block, it works well, if there are more, it breaks all of them except the last one.