amp-custom
v1.4.0
Published
Optimize CSS source for AMP HTML.
Downloads
209
Maintainers
Readme
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