[FEATURE] Add text roles for css and scss (#964)

Resolves #555

Author: linawolf

Documentation-rendertest/Inline-code-and-textroles/Index.rst

@@ -59,6 +59,8 @@ Examples for direct use
 *  :code:`code`
 *  :samp:`samp`
 *  :fluid:`fluid`
+*  :css:`css`
+*  :scss:`scss`
 *  :html:`html`
 *  :input:`input`
 *  :js:`js`

packages/typo3-docs-theme/resources/config/typo3-docs-theme.php

@@ -57,6 +57,7 @@
 use T3Docs\Typo3DocsTheme\Renderer\NodeRenderer\MainMenuJsonDocumentRenderer;
 use T3Docs\Typo3DocsTheme\TextRoles\ApiClassTextRole;
 use T3Docs\Typo3DocsTheme\TextRoles\ComposerTextRole;
+use T3Docs\Typo3DocsTheme\TextRoles\CssTextRole;
 use T3Docs\Typo3DocsTheme\TextRoles\FileTextRole;
 use T3Docs\Typo3DocsTheme\TextRoles\FluidTextTextRole;
 use T3Docs\Typo3DocsTheme\TextRoles\HtmlTextTextRole;
@@ -66,6 +67,7 @@
 use T3Docs\Typo3DocsTheme\TextRoles\OutputTextTextRole;
 use T3Docs\Typo3DocsTheme\TextRoles\PhpTextRole;
 use T3Docs\Typo3DocsTheme\TextRoles\RestructuredTextTextRole;
+use T3Docs\Typo3DocsTheme\TextRoles\ScssTextRole;
 use T3Docs\Typo3DocsTheme\TextRoles\ShellTextTextRole;
 use T3Docs\Typo3DocsTheme\TextRoles\SqlTextRole;
 use T3Docs\Typo3DocsTheme\TextRoles\T3extTextRole;
@@ -133,6 +135,8 @@
         ->tag('phpdoc.guides.parser.rst.text_role')
         ->set(ComposerTextRole::class)
         ->tag('phpdoc.guides.parser.rst.text_role')
+        ->set(CssTextRole::class)
+        ->tag('phpdoc.guides.parser.rst.text_role')
         ->set(FileTextRole::class)
         ->tag('phpdoc.guides.parser.rst.text_role')
         ->set(FluidTextTextRole::class)
@@ -149,6 +153,8 @@
         ->tag('phpdoc.guides.parser.rst.text_role')
         ->set(RestructuredTextTextRole::class)
         ->tag('phpdoc.guides.parser.rst.text_role')
+        ->set(ScssTextRole::class)
+        ->tag('phpdoc.guides.parser.rst.text_role')
         ->set(ShellTextTextRole::class)
         ->tag('phpdoc.guides.parser.rst.text_role')
         ->set(SqlTextRole::class)

packages/typo3-docs-theme/src/TextRoles/CssTextRole.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace T3Docs\Typo3DocsTheme\TextRoles;
+
+use phpDocumentor\Guides\Nodes\Inline\InlineNode;
+use phpDocumentor\Guides\RestructuredText\Parser\DocumentParserContext;
+use phpDocumentor\Guides\RestructuredText\TextRoles\TextRole;
+use T3Docs\Typo3DocsTheme\Nodes\Inline\CodeInlineNode;
+
+final class CssTextRole implements TextRole
+{
+    public function getName(): string
+    {
+        return 'css';
+    }
+
+    public function getAliases(): array
+    {
+        return [];
+    }
+
+    public function processNode(DocumentParserContext $documentParserContext, string $role, string $content, string $rawContent): InlineNode
+    {
+        return new CodeInlineNode($rawContent, 'Code written in CSS', 'CSS (Cascading Style Sheets) is used to style the appearance of HTML elements on a web page.');
+    }
+}

packages/typo3-docs-theme/src/TextRoles/ScssTextRole.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace T3Docs\Typo3DocsTheme\TextRoles;
+
+use phpDocumentor\Guides\Nodes\Inline\InlineNode;
+use phpDocumentor\Guides\RestructuredText\Parser\DocumentParserContext;
+use phpDocumentor\Guides\RestructuredText\TextRoles\TextRole;
+use T3Docs\Typo3DocsTheme\Nodes\Inline\CodeInlineNode;
+
+final class ScssTextRole implements TextRole
+{
+    public function getName(): string
+    {
+        return 'scss';
+    }
+
+    public function getAliases(): array
+    {
+        return ['sass'];
+    }
+
+    public function processNode(DocumentParserContext $documentParserContext, string $role, string $content, string $rawContent): InlineNode
+    {
+        return new CodeInlineNode($rawContent, 'Code written in SCSS', 'SCSS is a syntax of Sass, a CSS preprocessor that adds variables, nesting, and functions to make writing styles more powerful and maintainable.');
+    }
+}

tests/Integration/tests/code-inline/expected/index.html

@@ -14,7 +14,16 @@ <h1>Inline code<a class="headerlink" href="#inline-code" data-bs-toggle="modal"
         echo &#039;Hello&#039;</code></p>
 
 
-    <p><code class="code-inline">body <wbr>{ background: red; }</code></p>
+    <p><code class="code-inline code-inline-long"
+          translate="no"
+          data-bs-toggle="modal"
+          data-bs-target="#generalModal"
+          data-code="body { background: red; }"
+          data-shortdescription="Code written in CSS"
+          data-details="CSS (Cascading Style Sheets) is used to style the appearance of HTML elements on a web page."
+          data-morelink=""          data-bs-html="true"
+    >
+        body <wbr>{ background: red; }</code></p>
 
 
     <p><code class="code-inline"