systemjs / plugin-css

CSS loader plugin
MIT License
92 stars 60 forks source link

Local @imports fail build ("Broken @import declaration") #108

Closed jgarren closed 7 years ago

jgarren commented 8 years ago

Version: 0.1.27 Last working version: 0.1.23

When building with JSPM with the baseURL set to a subdirectory, if a CSS file contains @import directives, CleanCSS throws an error with the message Broken @import declaration of "path/to/imported/file.css" repeated for each import. This happens because it's using the wrong path to find the file.

Directory structure:

project/
  package.json
  ui/
    jspm.config.js
    index.html
    index.js
    styles/
      a.css
      b.css
      styles.css

package.json:

  "jspm": {
    "directories": {
      "lib": "ui/app",
      "baseURL": "ui"
    }

index.js:

require('./styles/styles.css')

styles.css:

@import './a.css';
@import './b.css';

When evaluating @import './a.css', CleanCSS tries to open the file project/styles/a.css instead of project/ui/styles/a.css. It's missing the ui/ portion.

I do not think the rootURL configuration option is relevant here. These are relative imports. Setting "rootURL": "ui" in jspm.config.js works around the CleanCSS error, but it causes incorrect paths for images referenced with relative URLs.

Am I doing something wrong with the configuration here? Did it work by accident in 0.1.23?

Thanks for reading.

sinasalek commented 7 years ago

I also have the same problem. 0.1.25 works for now, you can revert back to it

guybedford commented 7 years ago

Thanks, I've included a fix in https://github.com/systemjs/plugin-css/commit/f52f9d76f7af583880371ac980678debaa0cd8b4.