diff --git a/blog/style/css.ts b/blog/style/css.ts index 1321dfc..57322f1 100644 --- a/blog/style/css.ts +++ b/blog/style/css.ts @@ -36,15 +36,14 @@ type CssProperty = | { gridTemplateColumns: string }; type CssProperties = { - [Key in keyof T]: T[Key]; + [Key in keyof Partial]: T[Key]; }; export function cssElement( cssObject: { elementName: HtmlElement } & CssObject, ): CssElement { - const { styleProperties, mergedCssProperties } = adjustAndMergeCssProps( - cssObject, - ); + const { styleProperties, mergedCssProperties } = + adjustAndMergeCssProps(cssObject); const style = ` ${cssObject.elementName} { ${styleProperties.join("\n ")} @@ -59,9 +58,8 @@ ${cssObject.elementName} { } export function cssClass(cssObject: { className: string } & CssObject) { - const { styleProperties, mergedCssProperties } = adjustAndMergeCssProps( - cssObject, - ); + const { styleProperties, mergedCssProperties } = + adjustAndMergeCssProps(cssObject); const style = ` .${cssObject.className} { @@ -87,23 +85,27 @@ type CssOutput = { type CssObject = { properties: CssProperties; - from?: { - cssProperties: Record; - } | undefined; + from?: + | { + cssProperties: Record; + } + | undefined; }; function adjustAndMergeCssProps(cssObject: CssObject) { const propertiesUnited = Object.entries( cssObject.from?.cssProperties ?? {}, ).concat( - Object.entries(cssObject.properties as never as object) - .map(([key, value]) => [fromCamelCaseToKebabCase(key), value]), + Object.entries(cssObject.properties as never as object).map( + ([key, value]) => [fromCamelCaseToKebabCase(key), value], + ), ); const mergedCssProperties = Object.fromEntries(propertiesUnited); - const styleProperties = Object.entries(mergedCssProperties) - .map(([key, value]) => `${key}: ${value};`); + const styleProperties = Object.entries(mergedCssProperties).map( + ([key, value]) => `${key}: ${value};`, + ); return { styleProperties, mergedCssProperties }; } diff --git a/blog/style/mainCss.ts b/blog/style/mainCss.ts index b843af8..0056c84 100644 --- a/blog/style/mainCss.ts +++ b/blog/style/mainCss.ts @@ -73,6 +73,25 @@ export const rowClass = cssClass({ }, }); +export const h1Element = cssElement({ + elementName: "h1", + properties: { + color: "#ff9061", + }, +}); +const h2Element = cssElement({ + elementName: "h2", + properties: { + color: "#eba157", + }, +}); +const h3Element = cssElement({ + elementName: "h3", + properties: { + color: "#ebd057", + }, +}); + export const styleCssFile = cssFile({ aStyle, htmlStyle, @@ -80,4 +99,7 @@ export const styleCssFile = cssFile({ mainClass, hoverAStyle, preStyle, + h1Element, + h2Element, + h3Element, });