@saithodev/amp-css
v1.1.10
Published
Provides a binary to compile SCSS files and validate them for AMP.
Downloads
45
Maintainers
Readme
AMP-CSS
AMP (Accelerated Mobile Pages) is a project by Google and the Digital News Initiative aiming to improve the speed of websites by utilizing a special JavaScript framework.
This comes with restrictions to the size and contents of CSS. This package provides a binary to compile SCSS files only if the resulting CSS is valid for AMP. Also it provides a way to insert CSS into a (static) HTML page.
Installing
NPM
npm install --save-dev @saithodev/amp-css
PNPM
pnpm install --save-dev @saithodev/amp-css
Yarn
yarn add --dev @saithodev/amp-css
Command overview
Compile SCSS to CSS
The following example will compile the file path/to/my/scss/style.scss
into the CSS file path/to/my/css/style.css
if there is no invalid CSS inside and the file size does not exceed AMP's size limit.
amp-css process path/to/my/scss/style.scss path/to/my/css/style.css
Alternatively you can also set an output directory. The following line does exactly the same as the line above:
amp-css process --output-dir path/to/my/css path/to/my/scss/style.scss
Inserting CSS into a HTML file
AMP requires websites to embed the stylings using inline CSS. There is a command that will look for the "Custom AMP CSS" area in a HTML file and overwrite its contents with the content of a given CSS file.
amp-css assign -s mycss.css index.html
Using in build scripts
We recommend defining scripts inside your projects package.json:
"scripts": {
"build": "npm run-script build-css && npm run-script assign-css",
"build-css": "amp-css process -s assets/scss/styles.scss assets/css/styles.css",
"assign-css": "amp-css assign -s assets/css/styles.css index.html"
}
In the example above calling npm run-script build
(or yarn build
) will compile the CSS file and insert it into the index.html file.
Processing multiple files
There currently is no support for compiling multiple SCSS files or inserting multiple CSS files. I currently don't see a use case for that.
If your stylings consists of multiple stylings, @import
them all in one SCSS file which you then compile.