The stylelint config to enforce CSS requirements of Accelerated Mobile Pages
AMP CSS requirements: https://amp.dev/documentation/guides-and-tutorials/develop/style_and_layout/style_pages/
This is stylelint config you may use either in authoring CSS for Accelerated Mobile Pages or for lint against requirements from Supported CSS for AMP and AMP HTML Specification.
All allowed CSS code on that page must be inlined at single <style amp-custom> tag at a document <head>,
so, you may use this config either from building tools during linting before inlining the CSS task or if your IDE support stylelint linting for inline rules.
Enforces all requirements that can be checked using current stylelint rules, including tag and classes names blacklist.
Note: the config is tested against AMP project homepage CSS that at the moment appears to violate it's own rules.
npm install stylelint-config-amp --save-devIf you've installed stylelint-config-amp locally within your project, just set your stylelint config to:
{
"extends": "stylelint-config-amp"
}If you've globally installed stylelint-config-amp using the -g flag, then you'll need to use the absolute path to stylelint-config-amp in your config e.g.
{
"extends": "/absolute/path/to/stylelint-config-amp"
}Lint from a build script:
const config = require("stylelint-config-amp")
const { readFileSync } = require("fs")
const stylelint = require("stylelint")
function lint(filename, warningsCount) {
return stylelint.lint({
code: readFileSync(filename), "utf8"),
config,
})
.then(result => {
const { results: [{ warnings }] } = result
expect(warnings.length).toBe(warningsCount)
})
}Lint task for npm / yarn package.json:
"scripts": {
"lint:amp-css": "stylelint --config=stylelint-config-amp src/stylesheets/amp/*.css"
},
"devDependencies": {
"stylelint": "^10.0.0",
"stylelint-config-amp": "^2.0.0"
}stylelint at the moment has no rules to check allowed declarations within @keyframes and I'm planing to submit pull request for such rule(s).
We also don't check for maximum CSS size, nor for pseudo selectors used without tag names (it's prohibited at AMP) - I'm planing to submit such rules pull request to stylelint too.