Project

General

Profile

Actions

Bug #50491

closed

concatenateCSS sometimes produces invalid css with @charset or @import

Added by Thorben Nissen over 11 years ago. Updated about 6 years ago.

Status:
Closed
Priority:
Should have
Assignee:
-
Category:
-
Target version:
Start date:
2013-07-27
Due date:
% Done:

100%

Estimated time:
TYPO3 Version:
6.1
PHP Version:
5.3
Tags:
Complexity:
Is Regression:
Sprint Focus:

Description

I have the following css file:

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 0.81em;
    background: #ffffff;
    color: #2f2f31;
}

...

Note the import urls without quotes and the font-family definition with quotes. As this is concatenated with the generated ones of plugin.###._CSS_DEFAULT_STYLE it becomes

/* moved by compressor */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300);
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;

/* default styles for extension "tx_cssstyledcontent" */
    /* Headers */
    .csc-header-alignment-center { text-align: center; }
    .csc-header-alignment-right { text-align: right; }
...
    table.contenttable-color-244 { background-color: silver; }

    font-size: 0.81em;
    background: #ffffff;
    color: #2f2f31;
}
...

as it tries to move the @-rules to the top. The output should be

/* moved by compressor */
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,700,300);
/* moved by compressor */
@import url(http://fonts.googleapis.com/css?family=Open+Sans+Condensed:700);

/* default styles for extension "tx_cssstyledcontent" */
    /* Headers */
    .csc-header-alignment-center { text-align: center; }
    .csc-header-alignment-right { text-align: right; }
    .csc-header-alignment-left { text-align: left; }
...
    table.contenttable-color-244 { background-color: silver; }

* {
    padding: 0;
    margin: 0;
}

body {
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
    font-size: 0.81em;
    background: #ffffff;
    color: #2f2f31;
}
...

The solution is easy: Make the matching for the @-rule's content less greedy by replacing the pattern

/@(charset|import|namespace)\\s*(url)?\\s*\\(?\\s*["\']?[^"\']+["\']?\\s*\\)?.*;/i

with
/@(charset|import|namespace)\\s*(url)?\\s*\\(?\\s*["\']?[^"\']+?["\']?\\s*\\)?.*;/i

Note the additional "?" after the "+".

The actual problem here is, that the import urls are not quoted, so the pattern matches down to the quote in the font-family definition in the body rule. This function was introduced in TYPO4 4.6. As it is located in t3lib_compressor before 6.0 and 4.6 is already deprecated and 4.7 will be in October, I would patch this for 6.0 - 6.2.

Actions

Also available in: Atom PDF