User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:75.0) Gecko/20100101 Firefox/75.0

Steps to reproduce:

https://github.com/atlassian-labs/compiled-css-in-js/pull/153

git clone git@github.com:atlassian-labs/compiled-css-in-js.git
cd compiled-css-in-js
git checkout source-maps
yarn
yarn start

Actual results:

1. Storybook opens
2. I inspect a Compiled Component element
3. Look at source location, note it says "inline" instead of the file name
4. The link to the file is also broken

This bug (or incorrect setup, hopefully!) also affects emotion.sh/

Expected results:

The sourcemap should have been picked up and the link into Style Editor works.

As note - this works correctly in Chrome. It does not work in Safari either.

Hi laheen!
Please could you add some test cases or more exact steps to test this problem?
Also, you can try to reproduce it on latest Nightly and tell us your input.
You can download from here: https://nightly.mozilla.org/.
Thanks!

Please find attached a reduced test case.

This source map works in Chrome. It doesn't work in Firefox.

You can see the module.tsx available in the Style Editor.

I tested on Firefox nightly - the issue still occurs

Bugbug thinks this bug should belong to this component, but please revert this change in case of error.

Thanks for filing!

(In reply to laheen from comment #2)

Created attachment 9143411 [details]
inline-static-sourcemap.html

Please find attached a reduced test case.

This source map works in Chrome. It doesn't work in Firefox.

You can see the module.tsx available in the Style Editor.

I was able to reproduce it following the steps mentioned above on latest Nightly on MacOS 10.14
I attached a file with evidence and changed flags accordingly.

The severity field is not set for this bug.
:gl, could you have a look please?

For more information, please visit auto_nag documentation.

Hi :) Do you need more information from me or you have enough to go off?

Hello! I was hoping with this release https://hacks.mozilla.org/2020/06/new-in-firefox-77-devtool-improvements-and-web-platform-updates/ this bug would be fixed. It doesn't seem to be the case though.

Any idea if this can be fixed? Would be a big boon for developers writing CSS in JS using Firefox.

While bug 1635701 works, this source map issue is still broken using comment 2 STR (and also for inspecting https://compiledcssinjs.com/). Logan, is this related to the ongoing source-map work?

There are a few things happening here, but the primary issue is simply that the sourcemap on this page is not very good. The HTML has

    <style>
      .cc-1b1wq3m {
        font-size: 20px;
      }

      /*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIm1vZHVsZS50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBR1EiLCJmaWxlIjoibW9kdWxlLnRzeCIsInNvdXJjZXNDb250ZW50IjpbIlxuICAgICAgICBpbXBvcnQgeyBzdHlsZWQgfSBmcm9tICdAY29tcGlsZWQvY3NzLWluLWpzJztcblxuICAgICAgICBzdHlsZWQuZGl2KHsgZm9udFNpemU6IDIwIH0pO1xuICAgICAgIl19 */
    </style>

To annotate that a bit:

    <style>               // line 1
      .cc-1b1wq3m {       // line 2
        font-size: 20px;  // line 3
      }

and in the case of the sourcemap, line 2 is what we're trying to open in the style inspector, but if you look at the data in the sourcemap itself, that line does not actually have any mappings, only line 1 does.

So in this case, https://github.com/atlassian-labs/compiled-css-in-js/pull/153/files#diff-e35f2a5bd4832627e706aff1725bb86dR33 should be adding a mapping for each line in the generated stylesheet.

The sourcemap spec is vague in details around this, which is why it works in Chrome, but I'd consider the current behavior pretty reasonable in Firefox's side.

@Michael Is that a change you'd be up for making to the library?

No worries! I'll make the changes and report back with the outcome

Thanks for having a look Logan

I guess now that I think about it, the main cause is probably that you're inserting newlines to pretty-print the content of the <style>, but the sourcemap doesn't take that into account. So my main comment would be that sourcemaps are very specific to the text content of the <style> node, so keep that in mind when generating them. Adding a single mapping for every line of the eventual <style> text content seems ideal though.