stylelint-config-amp
v2.0.0
Published
stylelint config to enforce Accelerated Mobile Pages CSS restrictions
Downloads
24
Maintainers
Readme
stylelint-config-amp
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.
Installation
npm install stylelint-config-amp --save-dev
Usage
If 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"
}
Limitations
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.