# CSS code formatting .. how can it be stopped?

**URL:** <https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134>\
**Category:** Styling (CSS)\
**Tags:** feature-request, css\
**Created:** [August 21, 2018, 11:28pm UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134 "2018-08-21T23:28:19Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![mijj](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mijj/32/1361_2.png) [@mijj](https://forum.pinegrow.com/u/mijj)\
**Post date:** [August 21, 2018, 11:28pm UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/1 "2018-08-21T23:28:19Z")

</div>

Is there a way to stop Pinegrow from forcing CSS code formatting.

I (as a general web dev novice) am attempting to build an AMP page using Pinegrow.

I have tested the bare minimum blank AMP page. But because Pinegrow insists on styling the CSS code, the AMP validation fails. (the failure noted below…)

I notice in “settings” there is an option to not auto-format the html. Unfortunately, there is no equivalent for CSS.

Is it possible to not auto format CSS (at least in \<head\>)? If not then … feature request.

- failure:  
body {  
-webkit-animation: -amp-start

- success:  
body{-webkit-animation:-amp-start

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [August 22, 2018, 12:07am UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/2 "2018-08-22T00:07:18Z")

</div>

Are you putting your CSS directly on the HTML page? If so, what about using an external style sheet, that way you can format it however you like, and Pinegrow shouldn’t touch it as long as you don’t open it to edit in Pinegrow.

---

<div class="post-metadata">

**Author:** ![mijj](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mijj/32/1361_2.png) [@mijj](https://forum.pinegrow.com/u/mijj)\
**Post date:** [August 22, 2018, 1:34am UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/3 "2018-08-22T01:34:24Z")

</div>

AMP won’t allow an external style sheet.

… a little further checking on failure …

this is valid:

 body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}

but validation fails even on a space in  
body{ -webkit

Will i have to manually edit after each Pinegrow page save?

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [August 22, 2018, 3:32am UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/4 "2018-08-22T03:32:31Z")

</div>

It seems to validate with or without a space when I check it here  
[https://validator.ampproject.org/](https://validator.ampproject.org/)

---

<div class="post-metadata">

**Author:** ![mijj](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mijj/32/1361_2.png) [@mijj](https://forum.pinegrow.com/u/mijj)\
**Post date:** [August 22, 2018, 3:56am UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/5 "2018-08-22T03:56:35Z")

</div>

well, that’s strange. Because when i try and validate with a space inserted, i get an error …

ie. fail =  
`<style amp-boilerplate>body{ -webkit-animation:`  
not fail =  
`<style amp-boilerplate>body{-webkit-animation:`

error message =  
`! The mandatory text inside tag 'head &gt; style[amp-boilerplate]' is missing or incorrect. [Learn more](https://github.com/ampproject/amphtml/blob/master/spec/amp-boilerplate.md).`

… umm … for this content

```
<!doctype html>
<html ⚡>
<head>
  <meta charset="utf-8">
  <link rel="canonical" href="self.html" />
  <meta name="viewport" content="width=device-width,minimum-scale=1">
  <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
  <script async src="https://cdn.ampproject.org/v0.js"></script>
</head>
<body>Hello, AMP world.</body>
</html>
```

---

<div class="post-metadata">

**Author:** ![mijj](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mijj/32/1361_2.png) [@mijj](https://forum.pinegrow.com/u/mijj)\
**Post date:** [August 22, 2018, 4:05am UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/6 "2018-08-22T04:05:26Z")

</div>

![ampFail](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/6/6721f3058fa486a0a6f9010722722b7a13f3732e.png)

---

<div class="post-metadata">

**Author:** ![mijj](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mijj/32/1361_2.png) [@mijj](https://forum.pinegrow.com/u/mijj)\
**Post date:** [August 22, 2018, 4:06am UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/7 "2018-08-22T04:06:12Z")

</div>

exactly the same, except for the removal of that one single naughty space character:

 ![ampPass](https://canada1.discourse-cdn.com/flex036/uploads/pinegrow/original/2X/f/f66a78bfb95911e7a62aa0296e5224bc402a17bd.png)

---

<div class="post-metadata">

**Author:** ![mijj](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mijj/32/1361_2.png) [@mijj](https://forum.pinegrow.com/u/mijj)\
**Post date:** [August 22, 2018, 1:24pm UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/8 "2018-08-22T13:24:48Z")

</div>

After playing round, i now realize, Pinegrow formats the CSS upon loading the file (not saving).

This means, to produce valid AMP pages, the Pinegrow formatted version of …  
`<style amp-boilerplate>body{-webkit ...`  
… line needs to have formatting removed before saving.

So … maybe the feature request could be:  
In settings, an option for: No CSS formatting on load.  
… and have an button in the code panel to format the code.

---

<div class="post-metadata">

**Author:** ![mijj](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mijj/32/1361_2.png) [@mijj](https://forum.pinegrow.com/u/mijj)\
**Post date:** [August 22, 2018, 2:00pm UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/9 "2018-08-22T14:00:20Z")

</div>

… and now thinkng about it …

modify the feature request:

“auto minify the code” on saving (subject to global settings)  
and “pretty format the code” button in code panel

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [August 22, 2018, 3:49pm UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/10 "2018-08-22T15:49:24Z")

</div>

You can use the Atom editor with the Atom-minify plug-in installed, which will minify the code on save. Atom integrates with Pinegrow in real time.

> **[atom-minify](https://atom.io/packages/atom-minify)**
>
> Minifies JS and CSS files, optionally on save.

---

<div class="post-metadata">

**Author:** ![mijj](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/mijj/32/1361_2.png) [@mijj](https://forum.pinegrow.com/u/mijj)\
**Post date:** [August 22, 2018, 7:30pm UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/11 "2018-08-22T19:30:57Z")

</div>

that’s done the trick!

Excellent.

I tell it the html file is a CSS file - it works fine - it minimises the entire head. Would it mess up JS if that was there too and it presumed a CSS file? But … that’s academic right now. Thanks for the help.

---

<div class="post-metadata">

**Author:** ![Printninja](https://yyz2.discourse-cdn.com/flex036/user_avatar/forum.pinegrow.com/printninja/32/1181_2.png) [@Printninja](https://forum.pinegrow.com/u/Printninja)\
**Post date:** [August 22, 2018, 8:40pm UTC](https://forum.pinegrow.com/t/css-code-formatting-how-can-it-be-stopped/2134/12 "2018-08-22T20:40:04Z")

</div>

Glad I could help. Honestly, I knew nothing about AMP other than it stood for Accelerated Mobile Pages, but I did some research and I saw that by design the AMP boilerplate cannot be modified. So minifying from Pinegrow was your only option, which (strangely) Pinegrow doesn’t offer, but fortunately, Atom does.

Minifying the HTML and CSS should definitely be a feature in Pinegrow. Other, less sophisticated software offers this.