diff --git a/core/includes/theme.inc b/core/includes/theme.inc
index d2ee056..851674a 100644
--- a/core/includes/theme.inc
+++ b/core/includes/theme.inc
@@ -1816,6 +1816,9 @@ function drupal_common_theme() {
     'html_tag' => [
       'render element' => 'element',
     ],
+    'import' => [
+      'variables' => ['url' => NULL],
+    ],
     // From theme.maintenance.inc.
     'maintenance_page' => [
       'render element' => 'page',
diff --git a/core/lib/Drupal/Core/Asset/CssCollectionRenderer.php b/core/lib/Drupal/Core/Asset/CssCollectionRenderer.php
index c3c83e1..860bc0a 100644
--- a/core/lib/Drupal/Core/Asset/CssCollectionRenderer.php
+++ b/core/lib/Drupal/Core/Asset/CssCollectionRenderer.php
@@ -163,7 +163,10 @@ public function render(array $css_assets) {
                 // control browser-caching. IE7 does not support a media type on
                 // the @import statement, so we instead specify the media for
                 // the group on the STYLE tag.
-                $import[] = '@import url("' . Html::escape(file_url_transform_relative(file_create_url($next_css_asset['data'])) . '?' . $query_string) . '");';
+                $import[] = [
+                  '#theme' => 'import',
+                  '#url' => file_url_transform_relative(file_create_url($next_css_asset['data'])) . '?' . $query_string,
+                ];
                 // Move the outer for loop skip the next item, since we
                 // processed it here.
                 $i = $j;
@@ -188,7 +191,7 @@ public function render(array $css_assets) {
                 // string. This means that we can use ^ and $ on one line at a
                 // time, and not worry about style tags since they'll never
                 // match the regex.
-                $element['#value'] = "\n" . implode("\n", $import_batch) . "\n";
+                $element['#value'] = \Drupal::service('renderer')->renderRoot($import_batch);
                 $element['#attributes']['media'] = $css_asset['media'];
                 $element['#browsers'] = $css_asset['browsers'];
                 $elements[] = $element;
diff --git a/core/modules/system/templates/import.html.twig b/core/modules/system/templates/import.html.twig
new file mode 100644
index 0000000..548ada9
--- /dev/null
+++ b/core/modules/system/templates/import.html.twig
@@ -0,0 +1,12 @@
+{#
+/**
+ * @file
+ * Default theme implementation for a generic 'import' element.
+ *
+ * Available variables
+ * - value: The url of the css file to import.
+ *
+ * @ingroup themeable
+ */
+#}
+@import url("{{ url }}");