Fix inline CSS via drupal_add_css (#166)

Author: mglaman

src/functions/common.php

@@ -272,6 +272,7 @@ function drupal_add_css(string|null $data = null, array|string|null $options = n
     if ($data === null) {
         return [];
     }
+
     $attachment_subscriber = \Drupal::getContainer()->get(AttachmentResponseSubscriber::class);
     assert($attachment_subscriber instanceof AttachmentResponseSubscriber);
 
@@ -280,10 +281,26 @@ function drupal_add_css(string|null $data = null, array|string|null $options = n
     } elseif ($options === null) {
         $options = [];
     }
+    $options += [
+        'type' => 'file',
+        'group' => CSS_DEFAULT,
+        'weight' => 0,
+        'every_page' => false,
+        'media' => 'all',
+        'preprocess' => true,
+        'data' => $data,
+        'browsers' => [],
+    ];
     $type = $options['type'] ?? 'file';
+
+    // Files with a query string cannot be preprocessed.
+    if ($options['type'] === 'file' && $options['preprocess'] && str_contains($data, '?')) {
+        $options['preprocess'] = false;
+    }
+
     if ($type === 'inline') {
         $attachment_subscriber->addAttachments([
-            'css' => $options,
+            'css' => [$options],
         ]);
     } elseif ($data) {
         $attachment_subscriber->addAttachments([

tests/src/Unit/Render/AttachmentResponseSubscriberTest.php

@@ -13,8 +13,15 @@
 use Symfony\Component\HttpKernel\Event\ResponseEvent;
 use Symfony\Component\HttpKernel\HttpKernelInterface;
 
+/**
+ * @coversDefaultClass \Retrofit\Drupal\Render\AttachmentResponseSubscriber
+ */
 final class AttachmentResponseSubscriberTest extends TestCase
 {
+    /**
+     * @covers ::addAttachments
+     * @covers ::onResponse
+     */
     public function testAddAttachments(): void
     {
         $sut = new AttachmentResponseSubscriber();
@@ -25,6 +32,7 @@ public function testAddAttachments(): void
         drupal_add_library('system', 'jquery');
         drupal_add_js(['hello' => 'World'], ['type' => 'setting']);
         drupal_add_css('https://example.com/cdn.js');
+        drupal_add_css('.foo { color: pink }', ['type' => 'inline']);
 
         $response = new HtmlResponse();
         $event = new ResponseEvent(
@@ -39,7 +47,26 @@ public function testAddAttachments(): void
             'library' => ['core/jquery'],
             'drupalSettings' => ['hello' => 'World'],
             'css' => [
-                'https://example.com/cdn.js' => [],
+                'https://example.com/cdn.js' => [
+                    'type' => 'file',
+                    'group' => 0,
+                    'weight' => 0,
+                    'every_page' => false,
+                    'media' => 'all',
+                    'preprocess' => true,
+                    'data' => 'https://example.com/cdn.js',
+                    'browsers' => [],
+                ],
+                [
+                    'type' => 'inline',
+                    'group' => 0,
+                    'weight' => 0,
+                    'every_page' => false,
+                    'media' => 'all',
+                    'preprocess' => true,
+                    'data' => '.foo { color: pink }',
+                    'browsers' => [],
+                ]
             ],
         ], $response->getAttachments());
     }

tests/src/Unit/Render/RetrofitHtmlResponseAttachmentsProcessorTest.php

@@ -17,16 +17,19 @@
 final class RetrofitHtmlResponseAttachmentsProcessorTest extends TestCase
 {
     /**
+     *
+     * @param array<string, mixed> $attachments
+     * @param array<string, mixed> $expected
+     *
+     * @covers ::__construct
      * @covers ::processAttachments
+     *
+     * @dataProvider dataAttachments
      */
-    public function testProcessAttachments(): void
+    public function testProcessAttachments(array $attachments, array $expected): void
     {
         $response = new HtmlResponse('');
-        $response->setAttachments([
-            'library' => [
-                ['foo', 'bar']
-            ],
-        ]);
+        $response->setAttachments($attachments);
         $inner = $this->createMock(AttachmentsResponseProcessorInterface::class);
         $inner->expects(self::once())
             ->method('processAttachments')
@@ -35,14 +38,63 @@ public function testProcessAttachments(): void
         $libraryDiscovery = $this->createMock(RetrofitLibraryDiscovery::class);
         $sut = new RetrofitHtmlResponseAttachmentsProcessor($inner, $jsCollectionRenderer, $libraryDiscovery);
         $sut->processAttachments($response);
-        self::assertEquals(
-            [
-                'library' => [
-                    'foo/bar',
-                    'retrofit/NXhscRe0440PFpI5dSznEVgmauL25KojD7u4e9aZwOM',
+        self::assertEquals($expected, $response->getAttachments());
+    }
+
+    /**
+     * @return array<string, array<int, array<string, array<int, array<int|string, array<string, array<string,
+     *     string>|int|string>|bool|int|string>|string>>>>
+     */
+    public static function dataAttachments(): array
+    {
+        return [
+            'legacy libraries' => [
+                [
+                    'library' => [
+                        ['foo', 'bar']
+                    ],
+                ],
+                [
+                    'library' => [
+                        'foo/bar',
+                        'retrofit/NXhscRe0440PFpI5dSznEVgmauL25KojD7u4e9aZwOM',
+                    ],
+                ],
+            ],
+            'inline css' => [
+                [
+                    'css' => [
+                        [
+                            'type' => 'inline',
+                            'group' => 0,
+                            'weight' => 0,
+                            'every_page' => false,
+                            'media' => 'all',
+                            'preprocess' => true,
+                            'data' => '.foo { color: pink }',
+                            'browsers' => [],
+                        ],
+                    ],
                 ],
+                [
+                    'html_head' => [
+                        [
+                            [
+                                '#tag' => 'style',
+                                '#value' => '.foo { color: pink }',
+                                '#weight' => 0,
+                                '#attributes' => [
+                                    'media' => 'all',
+                                ],
+                            ],
+                            'retrofit:0',
+                        ],
+                    ],
+                    'library' => [
+                        'retrofit/p0pYMgU_NanStScEFSFfzy8t6FiwrwJCbJdc0EbwWk0',
+                    ],
+                ]
             ],
-            $response->getAttachments()
-        );
+        ];
     }
 }