From 12beb14bc39c94ec5cb38db168831931c29bcab9 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Sat, 23 Apr 2022 17:40:46 +0900
Subject: [PATCH] Doc: Restrictions - Import

---
 docs/Restrictions.md | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/docs/Restrictions.md b/docs/Restrictions.md
index cd4eb0c..9b5b247 100644
--- a/docs/Restrictions.md
+++ b/docs/Restrictions.md
@@ -12,6 +12,7 @@
   * [Shadow DOM](#shadow-dom)
   * [XUL](#xul)
   * [Namespace](#namespace)
+  * [Import](#import)
 
 <!-- markdown-toc end -->
 
@@ -162,3 +163,33 @@ If you want to limit the coverage to some pages, you can use [`@-moz-document`](
   /* Your CSS */
 }
 ```
+
+### Import
+There are a few caveats when you [`@import`](https://developer.mozilla.org/en-US/docs/Web/CSS/@import) the CSS.  
+It's because of specification definition, not Firefox design, but to prevent some mistakes.
+
+`@import` rule is not a [nested statement](https://developer.mozilla.org/en-US/docs/Web/CSS/Syntax#nested_statements). Therefore, it cannot be used inside [conditional group at-rules](https://developer.mozilla.org/en-US/docs/Web/CSS/At-rule#conditional_group_rules).
+
+```css
+/* Precede */
+@import url("YourFile.css"); /* Works */
+
+/* Nested */
+@supports -moz-bool-pref("userChrome.test.pref") {
+  @import url("AnotherFile.css"); /* Not Works */
+}
+```
+
+Any [`@namespace`](https://developer.mozilla.org/en-US/docs/Web/CSS/@namespace) rules must follow all `@charset` and @import rules, and precede all other at-rules and style declarations in a style sheet.
+
+```css
+/* Before - Namespace */
+@import url("YourFile.css"); /* Works */
+
+/* Declare - Namespace */
+@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
+@namespace html url("http://www.w3.org/1999/xhtml");
+
+/* After - Namespace */
+@import url("YourFile.css"); /* Not Works */
+```