CSS Formatting Removes Spaces from calc(), Breaks CSS

Report · Jun 16, 2019

Last months Dreamweaver updates introduced a problem with CSS formatting, they randomly remove spaces from calc(), then calc stops to work and a site could be broken. Any solution to this?

Report · Jun 16, 2019

Show us an example please.

I have no trouble with calc functions. Are you certain the rest of your code is free of errors?

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 16, 2019

Yes, I'm certain.

This simple expression loses space inside calc before +

I had problems with + and - in some previous files too.

@media(min-width:1200px) {

.wrap {

max-width: 76em;

max-width: -webkit-calc(68.26em + 8vw);

max-width: calc(68.26em + 8vw);

padding-right: 4vw;

padding-left: 4vw;

}

Formatting issue. It never happened before last updates.

Report · Jun 16, 2019

I have the latest Dreamweaver and cannot reproduce the formatting problem at my end.

Try Restore Preferences.

Unusual behavior in Dreamweaver? Try restoring preferences.

Nancy O'Shea— Product User, Community Expert & Moderator

Report · Jun 16, 2019

If you are talking about just the -webkit- calc() function, then there should not be spaces between the value and operator.

If it is both the prefixed and final (none prefixed) without spaces then try removing the prefixed version, to see if the fault still exists. If it does not then it may be a bug, that is caused by using the prefixed version with spaces.

Report · Jun 16, 2019

Both become without space before +, when I'm formatting.

max-width: -webkit-calc(68.26em+ 8vw);

max-width: calc(68.26em+ 8vw);

Same if I'm removing -webkit line or not.

Report · Jun 17, 2019

WebProm wrote
Both become without space before +, when I'm formatting.
max-width: -webkit-calc(68.26em+ 8vw);
max-width: calc(68.26em+ 8vw);
Same if I'm removing -webkit line or not.

Both those calc() functions would fail, as they should be -

max-width: -webkit-calc(68.26em+8vw);

max-width: calc(68.26em + 8vw);

(webkit no spaces, final with spaces)

I don't know if Nancys suggestion will work, but it is worth trying.

If it does not work then all I can suggest is filing a bug report.

Report · Jun 17, 2019

I'll try preferences refresh, don't want to loose my preferences right now.

Where to fill in the bug report?

thanks.

Report · Jun 17, 2019

The Dw user voice, (bug link on r/h side) is at -

https://dreamweaver.uservoice.com

Report · Jun 17, 2019

I can confirm the bug in the version 19.1 Build 11240 of DW.

If the css is written into the <head> of an html page, Apply Source Formatting does't affect how the calc() function is written.

However, if the css is placed in an external stylesheet, Apply Source Formatting removes the spaces before the +.

Report · Jun 17, 2019

Here for example it happens with the + too. Adding () not helping. Minus is left intact.

.QID771 {

margin-top: -moz-calc(50vh - 50%+ 92px);

margin-top: -ms-calc(50vh - 50%+ 92px);

margin-top: -webkit-calc(50vh - 50%+ 92px);

margin-top: calc(50vh - 50%+ 92px);

}

Report · Jun 17, 2019

Looks like when the css is written into in external stylesheet, it removes the space before the + symbol only. When I rewrite your code with a few extra + in it...

.QID771 {

margin-top: -moz-calc(50vh - 50% + 92px);

margin-top: -ms-calc(50vh + 50% + 92px);

margin-top: -webkit-calc(50vh - 50% + 92px);

margin-top: calc(50vh + 50% + 92px);

}

...and apply source formatting to the .css file, it removes only the spaces before the + in the code. The spaces before the - symbols are untouched.

Make sure to start a new post, or add to an existing bug report, over at the uservoice link given above.

Report · Jun 17, 2019

Just out of interest, what happens if you include division, multiplication or nested calculations, (calculations in brackets). I ask because I use CS6 which whilst flaging as syntax error it leaves the code as written.

I'd hate to see what happens to the other css maths functions, (min(), max() and clamp() ).

Report · Jun 17, 2019

As far as I can see, it's just the + symbol that loses its leading space, and only in external css files.

I created a bug report on the uservoice forum here, if anyone wants to jump on it...

Apply Source Formatting Breaks calc() in CSS Files

Report · Jun 17, 2019

brackets seem not to affect this bug

Report · Jun 18, 2019

Today's DW update fixes the problem, thanks to all!

Report · Jun 18, 2019

Wow, there's a happy coincidence.

Report · Jun 18, 2019

maybe your bug report helped good

CSS Formatting Removes Spaces from calc(), Breaks CSS

1 Correct answer