[d565449] | 1 | 'use strict';
|
---|
| 2 |
|
---|
| 3 | var addonLimit = require('./limit').addon;
|
---|
| 4 |
|
---|
| 5 | // Banned CSS declaration property names, for security reasons.
|
---|
| 6 | var banned = [
|
---|
| 7 | 'behavior',
|
---|
| 8 | '-moz-binding',
|
---|
| 9 | ];
|
---|
| 10 |
|
---|
| 11 | var warnOnImportant = function (renderer) {
|
---|
| 12 | var putRaw = renderer.putRaw;
|
---|
| 13 |
|
---|
| 14 | renderer.putRaw = function (rawCssRule) {
|
---|
| 15 | if (rawCssRule.indexOf('!important') > -1) {
|
---|
| 16 | console.error(
|
---|
| 17 | '!important modifier is not allowed in AMP apps. ' +
|
---|
| 18 | 'Detected !important modifier in below CSS rule. ' +
|
---|
| 19 | rawCssRule
|
---|
| 20 | );
|
---|
| 21 | }
|
---|
| 22 |
|
---|
| 23 | return putRaw(rawCssRule);
|
---|
| 24 | };
|
---|
| 25 | };
|
---|
| 26 |
|
---|
| 27 | var removeImportant = function (renderer) {
|
---|
| 28 | var putRaw = renderer.putRaw;
|
---|
| 29 |
|
---|
| 30 | renderer.putRaw = function (rawCssRule) {
|
---|
| 31 | rawCssRule = rawCssRule.replace(/!important/g, '');
|
---|
| 32 |
|
---|
| 33 | return putRaw(rawCssRule);
|
---|
| 34 | };
|
---|
| 35 | };
|
---|
| 36 |
|
---|
| 37 | var warnOnReservedSelectors = function (renderer) {
|
---|
| 38 | var putRaw = renderer.putRaw;
|
---|
| 39 |
|
---|
| 40 | renderer.putRaw = function (rawCssRule) {
|
---|
| 41 | var pos = rawCssRule.indexOf('{');
|
---|
| 42 |
|
---|
| 43 | if (pos < 0)
|
---|
| 44 | return putRaw(rawCssRule);
|
---|
| 45 |
|
---|
| 46 | var selectors = ' ' + rawCssRule.substr(0, pos);
|
---|
| 47 |
|
---|
| 48 | if (selectors.match(/\s\.-amp-/g)) {
|
---|
| 49 | console.error(
|
---|
| 50 | 'Detected class name that starts with "-amp-". ' +
|
---|
| 51 | 'Class names starting with "-amp-" are reserved from AMP components. ' +
|
---|
| 52 | rawCssRule
|
---|
| 53 | );
|
---|
| 54 | }
|
---|
| 55 |
|
---|
| 56 | if (selectors.match(/\si-amp-/g)) {
|
---|
| 57 | console.error(
|
---|
| 58 | 'Detected CSS selector that matches "i-amp-" elements. ' +
|
---|
| 59 | 'Slectors for "i-amp-" elements are reserved from AMP components. ' +
|
---|
| 60 | rawCssRule
|
---|
| 61 | );
|
---|
| 62 | }
|
---|
| 63 |
|
---|
| 64 | return putRaw(rawCssRule);
|
---|
| 65 | };
|
---|
| 66 | };
|
---|
| 67 |
|
---|
| 68 | var removeReservedSelectors = function (renderer) {
|
---|
| 69 | var putRaw = renderer.putRaw;
|
---|
| 70 |
|
---|
| 71 | renderer.putRaw = function (rawCssRule) {
|
---|
| 72 | var pos = rawCssRule.indexOf('{');
|
---|
| 73 |
|
---|
| 74 | if (pos < 0)
|
---|
| 75 | return putRaw(rawCssRule);
|
---|
| 76 |
|
---|
| 77 | var selectors = ' ' + rawCssRule.substr(0, pos);
|
---|
| 78 |
|
---|
| 79 | if (selectors.match(/\s\.-amp-/g) || selectors.match(/\si-amp-/g)) {
|
---|
| 80 | return;
|
---|
| 81 | }
|
---|
| 82 |
|
---|
| 83 | return putRaw(rawCssRule);
|
---|
| 84 | };
|
---|
| 85 | };
|
---|
| 86 |
|
---|
| 87 | var warnOnBanned = function (renderer) {
|
---|
| 88 | var decl = renderer.decl;
|
---|
| 89 |
|
---|
| 90 | renderer.decl = function (prop, value) {
|
---|
| 91 | if (banned.indexOf(renderer.kebab(prop)) > -1) {
|
---|
| 92 |
|
---|
| 93 | console.error(
|
---|
| 94 | 'Detected banned CSS prop, "' + prop + '" is not allowed in AMP apps.'
|
---|
| 95 | );
|
---|
| 96 | }
|
---|
| 97 |
|
---|
| 98 | return decl(prop, value);
|
---|
| 99 | };
|
---|
| 100 | };
|
---|
| 101 |
|
---|
| 102 | var removeBanned = function (renderer) {
|
---|
| 103 | var decl = renderer.decl;
|
---|
| 104 |
|
---|
| 105 | renderer.decl = function (prop, value) {
|
---|
| 106 | if (banned.indexOf(renderer.kebab(prop)) > -1) {
|
---|
| 107 |
|
---|
| 108 | return '';
|
---|
| 109 | }
|
---|
| 110 |
|
---|
| 111 | return decl(prop, value);
|
---|
| 112 | };
|
---|
| 113 | };
|
---|
| 114 |
|
---|
| 115 | exports.addon = function (renderer, config) {
|
---|
| 116 | config = config || {};
|
---|
| 117 |
|
---|
| 118 | if (process.env.NODE_ENV !== 'production') {
|
---|
| 119 | require('./__dev__/warnOnMissingDependencies')('limit', renderer, ['putRaw']);
|
---|
| 120 | }
|
---|
| 121 |
|
---|
| 122 | if (renderer.client) return;
|
---|
| 123 |
|
---|
| 124 | // Enforce max style sheet size.
|
---|
| 125 | addonLimit(renderer, config.limit || 50000);
|
---|
| 126 |
|
---|
| 127 | // Warn on `!important` specifiers, which are not allowed.
|
---|
| 128 | if (process.env.NODE_ENV !== 'production') {
|
---|
| 129 | warnOnImportant(renderer);
|
---|
| 130 | }
|
---|
| 131 |
|
---|
| 132 | // Remove all !important modifiers.
|
---|
| 133 | if (config.removeImportant) {
|
---|
| 134 | removeImportant(renderer);
|
---|
| 135 | }
|
---|
| 136 |
|
---|
| 137 | // Warn on reserved selectors.
|
---|
| 138 | if (process.env.NODE_ENV !== 'production') {
|
---|
| 139 | warnOnReservedSelectors(renderer);
|
---|
| 140 | }
|
---|
| 141 |
|
---|
| 142 | // Remove reserved selectors ".-amp-" and "i-amp-".
|
---|
| 143 | if (config.removeReserved) {
|
---|
| 144 | removeReservedSelectors(renderer);
|
---|
| 145 | }
|
---|
| 146 |
|
---|
| 147 | // Warn on banned CSS properties.
|
---|
| 148 | if (process.env.NODE_ENV !== 'production') {
|
---|
| 149 | warnOnBanned(renderer);
|
---|
| 150 | }
|
---|
| 151 |
|
---|
| 152 | // Remove banned CSS properties.
|
---|
| 153 | if (config.removeBanned) {
|
---|
| 154 | removeBanned(renderer);
|
---|
| 155 | }
|
---|
| 156 | };
|
---|