In react, parse string style to object style.
Showing
3 changed files
with
23 additions
and
2 deletions
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": { | ... | ... |
-
Please register or sign in to post a comment