source: imaps-frontend/node_modules/nano-css/addon/amp.js@ d565449

main
Last change on this file since d565449 was d565449, checked in by stefan toskovski <stefantoska84@…>, 4 weeks ago

Update repo after prototype presentation

  • Property mode set to 100644
File size: 3.8 KB
Line 
1'use strict';
2
3var addonLimit = require('./limit').addon;
4
5// Banned CSS declaration property names, for security reasons.
6var banned = [
7 'behavior',
8 '-moz-binding',
9];
10
11var 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
27var 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
37var 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
68var 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
87var 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
102var 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
115exports.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};
Note: See TracBrowser for help on using the repository browser.