fix: don't inline css in csp mode.

Also add `angular-csp.css` to the resulting build.

3 files changed, 8 insertions, 1 deletions

diff --git a/src/ng/directive/ngCloak.js b/src/ng/directive/ngCloak.js
index 6e39bdfc..d430ae52 100644
--- a/src/ng/directive/ngCloak.js
+++ b/src/ng/directive/ngCloak.js
@@ -15,7 +15,8 @@
  * of the browser view.
  *
  * `ngCloak` works in cooperation with the following css rule embedded within `angular.js` and
- *  `angular.min.js`:
+ * `angular.min.js`.
+ * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}).
  *
  * <pre>
  * [ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
diff --git a/src/ng/directive/ngCsp.js b/src/ng/directive/ngCsp.js
index f1a71d4c..fc90d46a 100644
--- a/src/ng/directive/ngCsp.js
+++ b/src/ng/directive/ngCsp.js
@@ -19,6 +19,10 @@
  * evaluate all expressions up to 30% slower than in non-CSP mode, but no security violations will
  * be raised.
  *
+ * CSP forbids JavaScript to inline stylesheet rules. In non CSP mode Angular automatically
+ * includes some CSS rules (e.g. {@link ng.directive:ngCloak ngCloak}).
+ * To make those directives work in CSP mode, include the `angular-csp.css` manually.
+ *
  * In order to use this feature put the `ngCsp` directive on the root element of the application.
  *
  * *Note: This directive is only available in the `ng-csp` and `data-ng-csp` attribute form.*
diff --git a/src/ng/directive/ngShowHide.js b/src/ng/directive/ngShowHide.js
index cdfa0604..5b13a57b 100644
--- a/src/ng/directive/ngShowHide.js
+++ b/src/ng/directive/ngShowHide.js
@@ -9,6 +9,7 @@
  * provided to the ngShow attribute. The element is shown or hidden by removing or adding
  * the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined
  * in AngularJS and sets the display style to none (using an !important flag).
+ * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}).
  *
  * <pre>
  * <!-- when $scope.myValue is truthy (element is visible) -->
@@ -161,6 +162,7 @@ var ngShowDirective = ['$animate', function($animate) {
  * provided to the ngHide attribute. The element is shown or hidden by removing or adding
  * the `ng-hide` CSS class onto the element. The `.ng-hide` CSS class is predefined
  * in AngularJS and sets the display style to none (using an !important flag).
+ * For CSP mode please add `angular-csp.css` to your html file (see {@link ng.directive:ngCsp ngCsp}).
  *
  * <pre>
  * <!-- when $scope.myValue is truthy (element is hidden) -->