Automattic / nginx-http-concat

WordPress plugin to perform CSS and JavaScript concatenation of individual script files into one resource request.
GNU General Public License v2.0
115 stars 32 forks source link

match import rules containing semi-colons #65

Closed trepmal closed 2 years ago

trepmal commented 2 years ago

The regex does not properly match import declarations if the URL contains a semi-colon. Example:

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Source+Sans+Pro:ital,wght@0,300;0,400;1,300;1,400&display=swap");

In this case, the regex will leave this at the top of the concatenated css file:

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;

The unclosed statement then eats whatever follows, potentially accidentally closed by coincidence of other CSS.

The regex change ensures a non-word character before the declaration-ending ;.


I enqueued and tested against a stylesheet with the following contents:

@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import url ("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap");
@import url ('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
@import "https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap";
@import 'https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap';

body:before {
    content: "testing";
}

@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital&display=swap');
@import url ("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital&display=swap");
@import url ('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital&display=swap');
@import "https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital&display=swap";
@import 'https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital&display=swap';

body {
    background: purple !important;
}
trepmal commented 2 years ago

for the upstream library used, a fix has been added, however it seems we do not use this part of the library