Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Source maps generation #1777

Open
wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Source maps generation #1777

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
fe7778c
Respect Scss.GenerateSourceMaps flag
MohammadYounes Feb 23, 2015
41fe0f7
Set postcss inline map flag to false
MohammadYounes Feb 23, 2015
85574ff
Respect Css.GenerateRtlSourceMaps flag and set postcss inline flag to…
MohammadYounes Feb 23, 2015
e03b961
Merge pull request #1835 from JoeRall/global-markdown-css-setting
madskristensen Apr 10, 2015
ad1d77b
Respect Scss.GenerateSourceMaps flag
MohammadYounes Feb 23, 2015
ce5cd64
Set postcss inline map flag to false
MohammadYounes Feb 23, 2015
f52358d
Respect Css.GenerateRtlSourceMaps flag and set postcss inline flag to…
MohammadYounes Feb 23, 2015
a4a8598
Rebase
MohammadYounes Apr 26, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions EditorExtensions/Misc/RTLCss/Compilers/RtlCssCompiler.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,9 @@ protected override string GetPath(string sourceFileName, string targetFileName)
parameters.UriComponentsDictionary.Add("targetFileName", targetFileName);
parameters.Add("mapFileName", targetFileName + ".map");

if (GenerateSourceMap)
parameters.Add("sourceMapURL");

if (WESettings.Instance.Css.RtlCss)
parameters.Add("rtlcss");

Expand Down
2 changes: 1 addition & 1 deletion EditorExtensions/Resources/server/services/srv-autoprefixer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ var processAutoprefixer = function (cssContent, mapContent, browsers, sourceFile
};

result = result.process(cssContent, {
map: { prev: mapContent },
map: { prev: mapContent, inline: false },
from: sourceFileName,
to: targetFileName
});
Expand Down
19 changes: 11 additions & 8 deletions EditorExtensions/Resources/server/services/srv-rtlcss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,22 +7,26 @@ var rtlcss = require("rtlcss"),

//#region Process
var processRtlCSS = function (cssContent, mapContent, sourceFileName, targetFileName, autoprefixer, autoprefixerBrowsers) {
if (mapContent !== true) {
mapContent = { prev: mapContent };
}
var result, css, map = false;
//wrap source map.
if (typeof (mapContent) === 'object')
map = { prev: mapContent, inline: false };
else if (mapContent === true)
map = { inline: false };

var result, css, map;
try {
var config = configLoader.load(null, path.dirname(sourceFileName), { options: { minify: false } });

result = rtlcss.configure(config).process(cssContent, {
map: mapContent,
map: map,
from: sourceFileName,
to: targetFileName
});

css = result.css;
map = result.map.toJSON();
//set map if exists
if (typeof result.map !== 'undefined')
map = result.map.toJSON();
} catch (e) {
// Return same css and map back so the upstream compilers can continue.
return {
Expand Down Expand Up @@ -66,9 +70,8 @@ var handleRtlCSS = function (writer, params) {
writer.end();
return;
}

var output = processRtlCSS(data,
true,
typeof params.sourceMapURL !== 'undefined',
params.sourceFileName,
params.targetFileName,
params.autoprefixer,
Expand Down
5 changes: 3 additions & 2 deletions EditorExtensions/Resources/server/services/srv-scss.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,9 @@ var handleSass = function(writer, params) {
writer.end();
}

var css = result.css.toString();
var map = result.map.toString();
var map, css = result.css.toString();
if (!options.omitSourceMapUrl)
map = result.map.toString();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note:

  • omitSourceMapUrl option in node-sass does not indicate the presence of source-map, but only the URL.
  • In Web Essentials, we need source-maps in all cases for editor enhancements.

I didn't think of autoprefixer use case before, where it would not be able to update the map file accordingly (since sourceMappingURL acts as a bridge). For that matter, we would need to inject the sourceMappingURL here to CSS:

var css = result.css.toString();  
var map = result.map.toString(); 
var appendix;

if (!options.omitSourceMapUrl) {
    appendix = '\n/*# sourceMappingURL= ' + params.mapFileName + ' */';
    css += appendix;
}

Then later on:

- css = autoprefixedOutput.css;
+ css = autoprefixedOutput.css.replace(appendix, '');

- RtlContent: rtlResult.css,
+ RtlContent: rtlResult.css.replace(appendix, ''),

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@am11 This has nothing to do with autoprefixer being able to update the existing map. I used the flag because it indicates if source map generation is requested or not ( omitSourceMapUrl equals params.sourceMapURL === undefined).

If source maps generation is always enabled, then why its conditional in both autoprefixer and rtlcss ?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it indicates if source map generation is requested or not

Wrong. Please re-read my previous comment.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm referring to input/output params, not node-sass!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

???
I totally lost you

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might be more clear if I had wrote it like this :

var map, css = result.css.toString();
if (params.sourceMapURL !== undefined)
  map = result.map.toString();

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Like I said earlier, the compiler services (which support sourcemap, exception being LiveScript), should return source map to Web Essentials in all cases. WE then uses source-maps for editor extensibility features.
If sourcemap in autoprefixer is conditional, then that is a (separate) bug.
If sourcemap in RTLCss is conditional, then that is by design (because rtlcss result are returned separately).
Therefore, the real issue here is that the post-processed source-maps should overwrite those generated by node-based compiler, but it should respect the user-intended params.sourceMapURL option. And hence, the solution I described above would fix it. If you are still unconvinced, you can checkout the changes in srv-scss, as this is slightly out of scope for this PR. I will take care of it once the WE solution starts building again.


if (params.autoprefixer !== undefined) {
var autoprefixedOutput = require("./srv-autoprefixer")
Expand Down