juice icon indicating copy to clipboard operation
juice copied to clipboard

handling on @import url in style tag

Open vict-shevchenko opened this issue 4 years ago • 2 comments

Hello,

Can you please advise, I have got a code source code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <style rel="stylesheet" type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Roboto:400,700,900);

    body {
      color: black;
    }
  </style>
</head>

<body >
</body>
</html>

then I am doing a processing (with grunt-inline-css, which uses jucie under), and my result is:

 <style type="text/css">
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url(http://fonts.gstatic.com/s/roboto/v20/KFOkCnqEu92Fr1Mu51xIIzc.ttf) format('truetype');}
...
</style>
<body style="color: black;">

How can I avoid processing of @import url so in the result file I will have it unchanged? Something like preserveImports ?

Expected result for my case

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style rel="stylesheet" type="text/css">
    @import url(http://fonts.googleapis.com/css?family=Roboto:400,700,900);
</style>

</head>

<body style="color: black;">

</body>
</html>

Thanks a lot!

vict-shevchenko avatar Jan 13 '21 22:01 vict-shevchenko

I think this will solve it https://github.com/Automattic/juice/pull/442

filoscoder avatar Feb 05 '23 10:02 filoscoder

See https://github.com/Automattic/juice/issues/477 and the data-embed attribute in the docs: https://github.com/Automattic/juice?tab=readme-ov-file#data-embed

husseinalhammad avatar Oct 02 '25 07:10 husseinalhammad