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 | };
|
---|