f277360d by Adam Heath

In react, parse string style to object style.

1 parent a2e25c4d
1 import React from 'react' 1 import React from 'react'
2 2 import parseStyle from 'style-to-object'
3 import { COMMENT_NODE, DOCUMENT_NODE, DOCTYPE_NODE, ELEMENT_NODE, TEXT_NODE } from 'ultrahtml' 3 import { COMMENT_NODE, DOCUMENT_NODE, DOCTYPE_NODE, ELEMENT_NODE, TEXT_NODE } from 'ultrahtml'
4 import { parseHtml, createAdjuster, createMatcher, findNode } from 'astro-wt/html' 4 import { parseHtml, createAdjuster, createMatcher, findNode } from 'astro-wt/html'
5 import { decode } from 'html-entities' 5 import { decode } from 'html-entities'
...@@ -18,12 +18,16 @@ export const ReparseStaticChildren = (replaceOptions, Component) => (props) => { ...@@ -18,12 +18,16 @@ export const ReparseStaticChildren = (replaceOptions, Component) => (props) => {
18 } 18 }
19 19
20 export const fixAttributes = (attributes) => { 20 export const fixAttributes = (attributes) => {
21 const { class: className, srcset: srcSet, maxlength: maxLength, for: htmlFor, ...rest } = attributes 21 const { class: className, style, srcset: srcSet, maxlength: maxLength, for: htmlFor, ...rest } = attributes
22 const result = rest 22 const result = rest
23 if (className !== undefined) result.className = className 23 if (className !== undefined) result.className = className
24 if (srcSet !== undefined) result.srcSet = srcSet 24 if (srcSet !== undefined) result.srcSet = srcSet
25 if (maxLength !== undefined) result.maxLength = maxLength 25 if (maxLength !== undefined) result.maxLength = maxLength
26 if (htmlFor !== undefined) result.htmlFor = htmlFor 26 if (htmlFor !== undefined) result.htmlFor = htmlFor
27 if (style) {
28 const styleObject = parseStyle(style)
29 result.style = styleObject
30 }
27 return result 31 return result
28 } 32 }
29 33
......
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
10 "@reduxjs/toolkit": "^2.2.5", 10 "@reduxjs/toolkit": "^2.2.5",
11 "html-entities": "^2.5.2", 11 "html-entities": "^2.5.2",
12 "parsel-js": "^1.1.2", 12 "parsel-js": "^1.1.2",
13 "style-to-object": "^1.0.8",
13 "ultrahtml": "^1.5.3" 14 "ultrahtml": "^1.5.3"
14 }, 15 },
15 "devDependencies": { 16 "devDependencies": {
...@@ -3288,6 +3289,12 @@ ...@@ -3288,6 +3289,12 @@
3288 "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==", 3289 "integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
3289 "dev": true 3290 "dev": true
3290 }, 3291 },
3292 "node_modules/inline-style-parser": {
3293 "version": "0.2.4",
3294 "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
3295 "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q==",
3296 "license": "MIT"
3297 },
3291 "node_modules/is-arrayish": { 3298 "node_modules/is-arrayish": {
3292 "version": "0.3.2", 3299 "version": "0.3.2",
3293 "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz", 3300 "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.3.2.tgz",
...@@ -6095,6 +6102,15 @@ ...@@ -6095,6 +6102,15 @@
6095 "url": "https://github.com/sponsors/sindresorhus" 6102 "url": "https://github.com/sponsors/sindresorhus"
6096 } 6103 }
6097 }, 6104 },
6105 "node_modules/style-to-object": {
6106 "version": "1.0.8",
6107 "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
6108 "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
6109 "license": "MIT",
6110 "dependencies": {
6111 "inline-style-parser": "0.2.4"
6112 }
6113 },
6098 "node_modules/supports-color": { 6114 "node_modules/supports-color": {
6099 "version": "5.5.0", 6115 "version": "5.5.0",
6100 "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", 6116 "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
......
...@@ -15,6 +15,7 @@ ...@@ -15,6 +15,7 @@
15 "@reduxjs/toolkit": "^2.2.5", 15 "@reduxjs/toolkit": "^2.2.5",
16 "html-entities": "^2.5.2", 16 "html-entities": "^2.5.2",
17 "parsel-js": "^1.1.2", 17 "parsel-js": "^1.1.2",
18 "style-to-object": "^1.0.8",
18 "ultrahtml": "^1.5.3" 19 "ultrahtml": "^1.5.3"
19 }, 20 },
20 "devDependencies": { 21 "devDependencies": {
......