question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Incompatible with external CSS sourcemaps

See original GitHub issue

I’m trying to add this to a project that uses ember-cli-sass (in case #18 is relevant) and Ember-CLI’s built-in sourcemaps support.

My configuration before adding this:

sassOptions: {
  includePaths: [ 'app/styles', 'vendor/styles' ],
  imagePath: 'public/images',
  outputStyle: 'expanded'
},
sourcemaps: {
  enabled: true,
  extensions: [ 'js', 'css' ]
}

This caused sourceMappingURLs to appear in my compiled CSS files. These were external links.

When I added

autoprefixer: {
  browsers: [
    ...
  ]
}

I started getting unknown word errors.

I found #18 and https://github.com/kimroen/ember-cli-autoprefixer/issues/9 and tried changing my configuration to

autoprefixer: {
  browsers: [ ... ],
  sourcemap: true
},
sassOptions: {
  ...,
  sourceComments: false
},
sourcemaps: {
  enabled: true,
  extensions: [ 'js' ]
}

This works, but causes the CSS sourcemaps to be emitted as inline data URIs, which dramatically increase the weight of the CSS files. (So much so that it’s not worth it to minify at all!)

Is there a way to get this to work with external CSS sourcemaps?

Issue Analytics

  • State:closed
  • Created 8 years ago
  • Comments:5 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
jamesarosencommented, Jan 9, 2016

It looks like fast-sourcemap-concat is generating JS-style sourcemaps comments:

div{color:blue;}//# sourceMappingURL=vendor.css.map

This causes autoprefixer to blow up on the invalid CSS. Doesn’t seem to be (directly) a problem with this library.

0reactions
jamesarosencommented, Jan 9, 2016

Stack trace for the unknown word

$ ember build --environment=production
...
//# sourceMappingURL=vendor.css.map
^
CssSyntaxError: /Users/jamesarosen/Code/Tango/assets/vendor.css:20:3793: Unknown word
    at Input.error (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/input.js:61:22)
    at Parser.unknownWord (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:457:26)
    at Parser.word (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:174:14)
    at Parser.loop (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parser.js:60:26)
    at parse (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/parse.js:26:12)
    at new LazyResult (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/lazy-result.js:61:24)
    at Processor.process (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/postcss/lib/processor.js:34:16)
    at AutoprefixerFilter.processString (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/index.js:37:4)
    at Object.module.exports.processString (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/broccoli-persistent-filter/lib/strategies/default.js:7:16)
    at Processor.processString (/Users/jamesarosen/Code/Tango/node_modules/ember-cli-autoprefixer/node_modules/broccoli-autoprefixer/node_modules/broccoli-persistent-filter/lib/processor.js:20:25)

Linked trace:

Possibly related:

Read more comments on GitHub >

github_iconTop Results From Across the Web

Produce sourcemap from compiled SASS in webpack4
For my SCSS files: compile Sass from a given directory, add prefixes, and output a single css file onto an specific folder, including...
Read more >
CSP: style-src - HTTP - MDN Web Docs - Mozilla
The HTTP Content-Security-Policy (CSP) style-src directive specifies valid sources for stylesheets.
Read more >
Source Maps - SurviveJS
Source maps in Chrome. When your source code has gone through transformations, debugging in the browser becomes a problem. Source maps solve this...
Read more >
Dart Sass Command-Line Interface
sass --error-css style.scss style.css /* Error: Incompatible units em and px. ... Dart Sass generates source maps by default for every CSS file...
Read more >
sass-loader - webpack - JS.ORG
To enable CSS source maps, you'll need to pass the sourceMap option to the sass-loader and the css-loader. webpack.config.js module.exports = { devtool:...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found