madskristensen / BundlerMinifier

Visual Studio extension
Other
616 stars 172 forks source link

"Unexpected token found" on @import directives #191

Open DMW007 opened 8 years ago

DMW007 commented 8 years ago

Installed product versions

When a css-file contains @import statements, the minifying-process would fail with the error-message

(Bundler & Minifier) Unexpected token, found '@import'

Steps to recreate

  1. Create a css file with a @import directive like @import url("../style.css");
  2. Add the file to BundlerMinifier and try to minify

    Expected behavior

The tool should at least leave the import-directive. But the best way would be fetching the referenced file and replace their content with the import-line, this would result in best performance.

DMW007 commented 8 years ago

Workaround for Wordpress

I had this issue because I'm including the style.css of a self-created child-theme, with itself is build on a paid wordpress-theme. So the style.css of the parent-theme was included in the style.css of the child-theme. To avoid this, I found out that this can be done using the style-hooks in the function.php file like explained here.

Because there is no css @import anymore, we've a workaround to bypass these bug. And its also better for the performance of the wordpress-theme, since @import will block rendering. Using the way above, the css file is inserted in a normal tag. Most browsers are able to download these css-files parellel.

In the ASP.NET Core application, we must only add both of the stylesheets from parent and child-theme in the bundleconfig.json like this:

{
    "outputFileName": "wwwroot/clientscript/bundle.min.css",
    "inputFiles": [
      "wwwroot/clientscript/wp/parent-theme/style.css",
      "wwwroot/clientscript/wp/child-theme/style.css"
    ]
}

Important is, that the parent-theme should be included before the child-theme. WordPress will do the same using the functions.php described above and it make sense: So you're able to override things from the parent-theme, which you want to customize. So it could have unwanted side-effects, if you don't care about those order.

RouR commented 7 years ago

Same issue with @import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700");

and with .spinner .rect5{-webkit-animation-delay:-0.8s;animation-delay:-0.8s}@-webkit-keyframes sk-stretchdelay{0%,40%,100%{-webkit-transform:scaleY(0.4)}20%{-webkit-transform:scaleY(1)}}@keyframes sk-stretchdelay{0%,40%,100%{transform:scaleY(0.4);-webkit-transform:scaleY(0.4)}20%{transform:scaleY(1);-webkit-transform:scaleY(1)}}

mitja-p commented 7 years ago

I have the same issue as above. Any fix coming?

nrgjack commented 7 years ago

Visual studio 2017 + Bundle & minifier 2.4.340

i have no issue

OskarKlintrot commented 7 years ago

Isn't 2.4.337 the latest..?

los93sol commented 7 years ago

I'm on VS17 with Bundle & minifier 2.5.357, still having the issue with it blowing up on @imports and @keyframes

alvipeo commented 6 years ago

guys, are you going to fix this???

garfbradaz commented 6 years ago

Was this ever fixed?

omuleanu commented 6 years ago

@import statements need to be placed in the first css file (from the bundle) on the top (this tool is not moving them for you, at least the current version) or if you can avoid using them, you might use another link tag instead

cpwaters commented 5 years ago

As above, put your new css file above the site.css in the array. Works fine on VS17 with Bundle & minifier 2.8.391.

douglasalonso commented 4 years ago

I had this problem when I was building the project in the Azure Devops pipeline, and with this tip of creating the css file and placing the import in it and then adding the file inside the bundleconfig.json it worked. Thanks

Takerman commented 4 years ago

@import statements need to be placed in the first css file (from the bundle) on the top (this tool is not moving them for you, at least the current version) or if you can avoid using them, you might use another link tag instead

IT WORKED FOR ME! Great answer

WalissonPires commented 3 years ago

Was this ever fixed?

bilalsaeed commented 3 years ago

There are so many limitations in this tools. Is there any better alternative available?

programatix commented 3 years ago

I'm having issue with files containing @media, such as,

@media only screen and (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

I get, (Bundler & Minifier) Unexpected token, found '@'

DMW007 commented 1 year ago

There are so many limitations in this tools. Is there any better alternative available?

I used Gulp in the past, for new projects I'd have a look at Webpack.