Update: Put styles in own component

CarbonPackages · Mar 30, 2022 · 3e2f4b4 · 3e2f4b4
1 parent b24b229
commit 3e2f4b4
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 51 deletions.
diff --git a/Resources/Private/Fusion/Components/Style.fusion b/Resources/Private/Fusion/Components/Style.fusion
@@ -0,0 +1,50 @@
+prototype(Carbon.Notification:Style) < prototype(Neos.Fusion:Component) {
+    config = ${Configuration.setting('Carbon.Notification')}
+    types = ${Array.filter(this.config.types, entry => !!entry)}
+
+    @if.hasTypesAndInBackend = ${node.context.inBackend && Array.length(this.types)}
+
+    renderer = Neos.Fusion:Join {
+        // These styles are for all types
+        generalSelectorList = Neos.Fusion:Loop {
+            @glue = ','
+            items = ${props.types}
+            itemRenderer = ${'[data-carbon-' + itemKey + ']::after'}
+        }
+        generalProperties = Neos.Fusion:Loop {
+            @glue = ';'
+            items = ${Array.filter(Array.concat(props.config.default, props.config.data.default), entry => !!entry)}
+            itemRenderer = ${itemKey + ':' + item}
+            @process.wrap = ${'{' + value + '}'}
+        }
+
+        // Set special property per type and add the text
+        content = Neos.Fusion:Loop {
+            items = ${props.types}
+            itemKey = 'type'
+            itemRenderer = Neos.Fusion:Join {
+                selectorAndContent = ${'[data-carbon-' + type + ']::after{content:attr(data-carbon-' + type + ');'}
+                properties = Neos.Fusion:Loop {
+                    @glue = ';'
+                    items = ${Array.filter(item, entry => !!entry)}
+                    itemRenderer = ${itemKey + ':' + item}
+                }
+                closeStyle = '}'
+            }
+        }
+
+        // These styles are set if the HTML has some content
+        notEmptySelectorList = Neos.Fusion:Loop {
+            @glue = ','
+            items = ${props.types}
+            itemRenderer = ${'[data-carbon-' + itemKey + ']:not(:empty)::after'}
+        }
+        notEmptyProperties = Neos.Fusion:Loop {
+            @glue = ';'
+            items = ${Array.filter(props.config.data.notEmpty, entry => !!entry)}
+            itemRenderer = ${itemKey + ':' + item}
+            @process.wrap = ${'{' + value + '}'}
+        }
+        @process.wrap = ${'<style type="text/css">' + value + '</style>'}
+    }
+}
diff --git a/Resources/Private/Fusion/Overwrite.fusion b/Resources/Private/Fusion/Overwrite.fusion
@@ -1,53 +1,3 @@
 prototype(Neos.Neos:Page) {
-    head.stylesheets.carbonNotification = Neos.Fusion:Component {
-        config = ${Configuration.setting('Carbon.Notification')}
-        types = ${Array.filter(this.config.types, entry => !!entry)}
-
-        @if.hasTypesAndInBackend = ${node.context.inBackend && Array.length(this.types)}
-
-        renderer = Neos.Fusion:Join {
-            // These styles are for all types
-            generalSelectorList = Neos.Fusion:Loop {
-                @glue = ','
-                items = ${props.types}
-                itemRenderer = ${'[data-carbon-' + itemKey + ']::after'}
-            }
-            generalProperties = Neos.Fusion:Loop {
-                @glue = ';'
-                items = ${Array.filter(Array.concat(props.config.default, props.config.data.default), entry => !!entry)}
-                itemRenderer = ${itemKey + ':' + item}
-                @process.wrap = ${'{' + value + '}'}
-            }
-
-            // Set special property per type and add the text
-            content = Neos.Fusion:Loop {
-                items = ${props.types}
-                itemKey = 'type'
-                itemRenderer = Neos.Fusion:Join {
-                    selectorAndContent = ${'[data-carbon-' + type + ']::after{content:attr(data-carbon-' + type + ');'}
-                    properties = Neos.Fusion:Loop {
-                        @glue = ';'
-                        items = ${Array.filter(item, entry => !!entry)}
-                        itemRenderer = ${itemKey + ':' + item}
-                    }
-                    closeStyle = '}'
-                }
-            }
-
-            // These styles are set if the HTML has some content
-            notEmptySelectorList = Neos.Fusion:Loop {
-                @glue = ','
-                items = ${props.types}
-                itemRenderer = ${'[data-carbon-' + itemKey + ']:not(:empty)::after'}
-            }
-            notEmptyProperties = Neos.Fusion:Loop {
-                @glue = ';'
-                items = ${Array.filter(props.config.data.notEmpty, entry => !!entry)}
-                itemRenderer = ${itemKey + ':' + item}
-                @process.wrap = ${'{' + value + '}'}
-            }
-            @process.wrap = ${'<style type="text/css">' + value + '</style>'}
-        }
-    }
+    head.stylesheets.carbonNotification = Carbon.Notification:Style
 }
-