CSS code formatting .. how can it be stopped?

Styling (CSS)
,
1

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

2

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.

3

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?

4

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

5

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>
6

ampFail

7

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

ampPass
ampPass.PNG717×440 15.6 KB

8

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.

9

… 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

10

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.

1 Like
11

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.

12

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.