amp-custom

amp-custom

Optimize CSS source for AMP HTML.

If you are using PostCSS, use postcss-amp-custom.

CLI

Run amp-custom by CLI.

npx amp-custom input.css output.css

API

Install package.

npm install --save-dev amp-custom

Run amp-custom by API.

const AmpCustom = require('amp-custom')
const ampCustom = new AmpCustom()
const cssSource = `@charset "UTF-8";
body {
  font-size: 16px;
}
@page hoge {
  size: portrait;
  margin: 15mm;
}
a {
  color: #39c !important;
  text-decoration: none;
}
@viewport {
  min-width: 640px;
  max-width: 800px;
}
@supports not (display: flex) {
  .flexbox {
    overflow: hidden;
  }
  .flexbox div {
    float: left;
  }
}`

ampCustom.optimize(cssSource) // 'body{font-size:16px}a{color:#39c;text-decoration:none}'

optimize(cssSource: String): String

Optimize CSS for AMP.

const cssSource = `@charset "UTF-8";
body {
  font-size: 16px;
}
@page hoge {
  size: portrait;
  margin: 15mm;
}
a {
  color: #39c !important;
  text-decoration: none;
}
@viewport {
  min-width: 640px;
  max-width: 800px;
}
@supports not (display: flex) {
  .flexbox {
    overflow: hidden;
  }
  .flexbox div {
    float: left;
  }
}`

ampCustom.optimize(cssSource) // 'body{font-size:16px}a{color:#39c;text-decoration:none}'

isOverMaxByte(cssSource: String): Boolean

Check the CSS string size meets the AMP rules (75KB).

const cssSource = 'body{font-size:16px}a{color:#39c;text-decoration:none}'

ampCustom.isOverMaxByte(cssSource) // false

License

MIT License.