When Mimcss first activates a style definition class, it generates unique names for all of CSS entities defined in the class. As we have seen before, the name generated for the borderShape<\/code> property is generated once and will be reused when other classes deriving from the BorderTheme<\/code> class are activated.<\/p>\n\n\n\n

The activate<\/code> function returns an instance of the activated class, which we store in the theme<\/code> variable of type BorderTheme<\/code>. Having this variable tells the TypeScript compiler that it has access to all the properties from the BorderTheme<\/code>. This allows us to write the following rendering code for a fictional component:<\/p>\n\n\n\n

render()\n{\n  return <div>\n    <input type=\"text\" className={theme.borderShape.name} \/>\n  <\/div>\n}<\/code><\/pre>\n\n\n\n
All that is left to write is the code that allows the user to choose one of the two themes and activate it.<\/p>\n\n\n\n
onToggleTheme()\n{\n  if (theme instanceof SquareBorderTheme)\n    theme = css.activate(RoundBorderTheme);\n  else\n    theme = css.activate(SquareBorderTheme);\n}<\/code><\/pre>\n\n\n\n
Note that we didn\u2019t have to deactivate the old theme. One of the features of the ThemeDefinition<\/code> class (as opposed to the StyleDefintion<\/code> class) is that for every theme declaration class, it allows only a single theme to be active at the same time. That is, in our case, either RoundBorderTheme<\/code> or SquareBorderTheme<\/code> can be active, but never both. Of course, for multiple theme hierarchies, multiple themes can be simultaneously active. That is, if we have another hierarchy with the ColorTheme<\/code> declaration class and the derived DarkTheme<\/code> and LightTheme<\/code> classes, a single ColorTheme<\/code>-derived class can be co-active with a single BorderTheme<\/code>-derived class. However, DarkTheme<\/code> and LightTheme<\/code> cannot be active at the same time.<\/p>\n\n\n
Referencing Mimcss themes<\/h3>\n\n\n
In the example we just looked at, we used a theme object directly but themes frequently define elements like colors, sizes, and fonts that can be referenced by other style definitions. This is especially useful for separating the code that defines themes from the code that defines styles for a component that only wants to use the elements defined by the currently active theme.<\/p>\n\n\n\n
CSS custom properties are perfect for declaring elements from which styles can be built. So, let\u2019s define two custom properties in our themes: one for the foreground color, and one for the background color. We can also create a simple component and define a separate style definition class for it. Here is how we define the theme declaration class:<\/p>\n\n\n\n
class ColorTheme extends css.ThemeDefinition\n{\n  bgColor = this.$var( \"color\")\n  frColor = this.$var( \"color\")\n}<\/code><\/pre>\n\n\n\n
The $var<\/code> method defines a CSS custom property. The first parameter specifies the name of the CSS style property, which determines acceptable property values. Note that we don\u2019t specify the actual values here; in the declaration class, we only want Mimcss to create unique names for the custom CSS properties (e.g. --n13<\/code>) while the values are specified in the theme implementation classes, which we do next.<\/p>\n\n\n\n
class LightTheme extends ColorTheme\n{\n  bgColor = this.$var( \"color\", \"white\")\n  frColor = this.$var( \"color\", \"black\")\n}\n\nclass DarkTheme extendsBorderTheme\n{\n  bgColor = this.$var( \"color\", \"black\")\n  frColor = this.$var( \"color\", \"white\")\n}<\/code><\/pre>\n\n\n\n
Thanks to the Mimcss (and of course TypeScript\u2019s) typing system, developers cannot mistakenly reuse, say, the bgColor<\/code> property with a different type; nor they can specify values that are not acceptable for a color type. Doing so would immediately produce a compilation error, which may save developers quite a few cycles (one of the declared goals of Mimcss).<\/p>\n\n\n\n
Let\u2019s define styles for our component by referencing the theme\u2019s custom CSS properties:<\/p>\n\n\n\n
class MyStyles extends css.StyleDefinition\n{\n  theme = this.$use(ColorTheme)\n\n  container = this.$class({\n    color: this.theme.fgColor,\n    backgroundColor: this.theme.bgColor,\n  })\n}<\/code><\/pre>\n\n\n\n
The MyStyles<\/code> style definition class references the ColorTheme<\/code> class by calling the Mimcss $use<\/code> method. This returns an instance of the ColorTheme<\/code> class through which all its properties can be accessed and used to assign values to CSS properties.<\/p>\n\n\n\n
We don\u2019t need to write the var()<\/code> function invocation because it\u2019s already done by Mimcss when the $var<\/code> property is referenced. In effect, the CSS class for the container<\/code> property creates the following CSS rule (with uniquely generated names, of course):<\/p>\n\n\n\n
.container {\n  color: var(--fgColor);\n  backgroundColor: var(--bgColor);\n}<\/code><\/pre>\n\n\n\n
Now we can define our component (in pseudo-React style):<\/p>\n\n\n\n
class MyComponent extends Component\n{\n  private styles = css.activate(MyStyles);\n\n  componentWillUnmount()\n  {\n    css.deactivate(this.styles);\n  }\n\n  render()\n  {\n    return <div className={this.styles.container.name}>\n      This area will change colors depending on a selected theme.\n    <\/div>\n  }\n}<\/code><\/pre>\n\n\n\n
Note one important thing in the above code: our component is completely decoupled from the classes that implement actual themes. The only class our component needs to know about is the theme declaration class ColorTheme<\/code>. This opens a door to easily “externalize” creation of themes\u2014they can be created by third-party vendors and delivered as regular JavaScript packages. As long as they derive from the ColorTheme<\/code> class, they can be activated and our component reflects their values.<\/p>\n\n\n\n
Imagine creating a theme declaration class for, say, Material Design<\/a> styles along with multiple theme classes that derive from this class. The only caveat is that since we are using an existing system, the actual names of the CSS properties cannot be generated by Mimcss\u2014they must be the exact names that the Material Design system uses (e.g. --mdc-theme--primary<\/code>). Thankfully, for all named CSS entities, Mimcss provides a way to override its internal name generation mechanism and use an explicitly provided name. Here is how it can be done with Material Design CSS properties:<\/p>\n\n\n\n
class MaterialDesignThemeBase extends css.ThemeDefinition\n{\n  primary = this.$var( \"color\", undefined, \"mdc-theme--primary\")\n  onPrimary = this.$var( \"color\", undefined, \"mdc-theme--on-primary\")\n  \/\/ ...\n}<\/code><\/pre>\n\n\n\n
The third parameter in the $var<\/code> call is the name, which is given to the CSS custom property. The second parameter is set to undefined<\/code> meaning we aren\u2019t providing any value for the property since this is a theme declaration, and not a concrete theme implementation.<\/p>\n\n\n\n
The implementation classes do not need to worry about specifying the correct names because all name assignments are based on the theme declaration class:<\/p>\n\n\n\n
class MyMaterialDesignTheme extends MaterialDesignThemeBase\n{\n  primary = this.$var( \"color\", \"lightslategray\")\n  onPrimary = this.$var( \"color\", \"navy\")\n  \/\/ ...\n}<\/code><\/pre>\n\n\n
Multiple themes on one page<\/h3>\n\n\n
As mentioned earlier, only a single theme implementation can be active from among the themes derived from the same theme declaration class. The reason is that different theme implementations define different values for the CSS rules with the same names. Thus, if multiple theme implementations were allowed to be active at the same time, we would have multiple definitions of identically-named CSS rules. This is, of course, a recipe for disaster.<\/p>\n\n\n\n
Normally, having a single theme active at a time is not a problem at all\u2014it is likely what we want in most cases. Themes usually define the overall look and feel of the entire page and there is no need to have different page sections to use different themes. What if, however, we are in that rare situation where we do need to apply different themes to different parts of our page? For example, what if before a user chooses a light or dark theme, we want to allow them to compare the two modes side-by-side?<\/p>\n\n\n\n
The solution is based on the fact that custom CSS properties can be redefined under CSS rules. Since theme definition classes usually contain a lot of custom CSS properties, Mimcss provides an easy way to use their values from different themes under different CSS rules.<\/p>\n\n\n\n
Let\u2019s consider an example where we need to display two elements using two different themes on the same page. The idea is to create a style definition class for our component so that we could write the following rendering code:<\/p>\n\n\n\n
public render()\n{\n  return <div>\n    <div className={this.styles.top.name}>\n      This should be black text on white background\n    <\/div>\n    <div className={this.styles.bottom.name}>\n      This should be white text on black background\n    <\/div>\n  <\/div>\n}<\/code><\/pre>\n\n\n\n
We need to define the CSS top<\/code> and bottom<\/code> classes so that we redefine the custom properties under each of them taking values from different themes. We essentially want to have the following CSS:<\/p>\n\n\n\n
.block {\n  backgroundColor: var(--bgColor);\n  color: var(--fgColor);\n}\n\n.block.top {\n  --bgColor: while;\n  --fgColor: black;\n}\n\n.block.bottom {\n  --bgColor: black;\n  --fgColor: white;\n}<\/code><\/pre>\n\n\n\n
We use the block<\/code> class for optimization purposes and to showcase how Mimcss handles inheriting CSS styles, but it is optional.<\/p>\n\n\n\n
Here is how this is done in Mimcss:<\/p>\n\n\n\n
class MyStyles extends css.StyleDefinition\n{\n  theme = this.$use(ColorTheme)\n\n  block = this.$class({\n    backgroundColor: this.theme.bgColor,\n    color: this.theme.fgColor\n  })\n\n  top = this.$class({\n    \"++\": this.block,\n    \"--\": [LightTheme],\n  })\n\n  bottom = this.$class({\n    \"++\": this.block,\n    \"--\": [DarkTheme],\n  })\n}<\/code><\/pre>\n\n\n\n
Just as we did previously, we reference our ColorTheme<\/code> declaration class. Then we define a helper block<\/code> CSS class, which sets the foreground and background colors using the custom CSS properties from the theme. Then we define the top<\/code> and bottom<\/code> classes and use the \"++\"<\/code> property to indicate that they inherit<\/em> from the block<\/code> class. Mimcss supports several methods of style inheritance; the \"++\"<\/code> property simply appends the name of the referenced class to our class name. That is, the value returned by the styles.top.name<\/code> is \"top block\"<\/code> where we\u2019re combining the two CSS classes (the actual names are randomly generated, so it would be something like \"n153 n459\"<\/code>).<\/p>\n\n\n\n
Then we use the \"--\"<\/code> property to set values of the custom CSS variables. Mimcss supports several methods of redefining custom CSS properties in a ruleset; in our case, we just reference a corresponding theme definition class. This causes Mimcss to redefine all custom CSS properties found in the theme class with their corresponding values.<\/p>\n\n\n
What do you think?<\/h3>\n\n\n
Theming in Mimcss is intentionally based on style definition inheritance. We looked at exactly how this works, where we get the best of both theming worlds: the ability to use alternate stylesheets alongside the ability to swap out CSS property values using an object-oriented approach.<\/p>\n\n\n\n
At runtime, Mimcss applies a theme without changing the HTML whatsoever. At build-time, Mimcss leverages the well-tried and easy-to-use class inheritance technique. Please check out the Mimcss documentation<\/a> for a much deeper dive on the things we covered here. You can also visit the Mimcss Playground<\/a> where you can explore a number of examples and easily try your own code.<\/p>\n\n\n\n
And, of course, tell me what you think of this approach! This has been my go-to solution for theming and I\u2019d like to continue making it stronger based on feedback from developers like yourself.<\/p>\n","protected":false},"excerpt":{"rendered":"
Theming UI refers to the ability to perform a change in visual styles in a consistent manner that defines the […]<\/p>\n","protected":false},"author":286838,"featured_media":287344,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library by Michael Michlin","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"_share_on_mastodon":"0","_share_on_mastodon_status":"%title% %permalink%"},"categories":[4],"tags":[1535,17249,18719],"class_list":["post-355894","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-articles","tag-css-in-js","tag-inheritance","tag-theming"],"acf":{"show_toc":"No"},"share_on_mastodon":{"url":"","error":""},"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/css-tricks.com\/wp-content\/uploads\/2019\/05\/squiggle-multicolor-2.svg","jetpack-related-posts":[{"id":254332,"url":"https:\/\/css-tricks.com\/css-custom-properties-theming\/","url_meta":{"origin":355894,"position":0},"title":"CSS Custom Properties and Theming","author":"Chris Coyier","date":"May 1, 2017","format":false,"excerpt":"We posted not long ago about the difference between native CSS variables (custom properties) and preprocessor variables. There are a few esoteric things preprocessor variables can do that native variables cannot, but for the most part, native variables can do the same things. But, they are more powerful because of\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":288127,"url":"https:\/\/css-tricks.com\/material-theming-making-material-your-own\/","url_meta":{"origin":355894,"position":1},"title":"Material Theming: Making Material Your Own!","author":"Una Kravets","date":"June 3, 2019","format":false,"excerpt":"The web is a beautiful, expressive medium that\u2019s evolved over time as trends and technology have changed. Moments of delight and flair are what set companies apart from one another. At the same time, today\u2019s top products rely on scalable, component-based design systems to efficiently develop a coherent brand. And\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/google-material.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/google-material.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/google-material.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/google-material.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/05\/google-material.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":325393,"url":"https:\/\/css-tricks.com\/color-theming-with-css-custom-properties-and-tailwind\/","url_meta":{"origin":355894,"position":2},"title":"Color Theming with CSS Custom Properties and Tailwind","author":"Michelle Barker","date":"November 19, 2020","format":false,"excerpt":"Custom properties not only enable us to make our code more efficient, but allow us to work some real magic with CSS too. One area where they have huge potential is theming. At Atomic Smash we use Tailwind CSS, a utility class framework, for writing our styles. In this article,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/tailwind-custom-properties-color-theming.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/tailwind-custom-properties-color-theming.png?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/tailwind-custom-properties-color-theming.png?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/tailwind-custom-properties-color-theming.png?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/tailwind-custom-properties-color-theming.png?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":359033,"url":"https:\/\/css-tricks.com\/personalize-it\/","url_meta":{"origin":355894,"position":3},"title":"Personalize it!","author":"Una Kravets","date":"December 22, 2021","format":false,"excerpt":"Ensuring accessibility is a clear path to making your website better. When you make your site accessible, you grow your audience, improve the experience for all people using it (not just those with accessibility needs), and you get SEO benefits as well. Along the same lines, preference-query customization is another\u2026","rel":"","context":"In "2021 End-of-Year Thoughts"","block_context":{"text":"2021 End-of-Year Thoughts","link":"https:\/\/css-tricks.com\/category\/2021-end-of-year-thoughts\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?fit=1200%2C535&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?fit=1200%2C535&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?fit=1200%2C535&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?fit=1200%2C535&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/12\/G3-vugcmBuc3YZ1R6tls18nK7PGkfEOsUXUD7hyussUQs8LYiz-mp4iAccN5g6GT_O451LP3J4b1PkvKd4kbKYXfCMPU3iVpY5IDXf2yGXPeSgW_f401v99ZhgBF3gtLvW87hIcdemdPGByih2rHgHemsEEjxCU4JYaK_t-kWhA920IA.jpg?fit=1200%2C535&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":271218,"url":"https:\/\/css-tricks.com\/dark-theme-in-a-day\/","url_meta":{"origin":355894,"position":4},"title":"Dark theme in a day","author":"Robin Rendle","date":"May 21, 2018","format":false,"excerpt":"Marcin Wichary has written a great piece that dives into how he used CSS Variables to create a night mode and high contrast theme in an app. There\u2019s so many neat tricks about how to use CSS Variables (Chris has also looked at theming) as well as how to organize\u2026","rel":"","context":"In "Links"","block_context":{"text":"Links","link":"https:\/\/css-tricks.com\/category\/links\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/dark-theme-in-a-day.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/dark-theme-in-a-day.jpg?fit=1200%2C600&ssl=1&resize=350%2C200 1x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/dark-theme-in-a-day.jpg?fit=1200%2C600&ssl=1&resize=525%2C300 1.5x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/dark-theme-in-a-day.jpg?fit=1200%2C600&ssl=1&resize=700%2C400 2x, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/dark-theme-in-a-day.jpg?fit=1200%2C600&ssl=1&resize=1050%2C600 3x"},"classes":[]},{"id":259251,"url":"https:\/\/css-tricks.com\/using-custom-properties-modify-components\/","url_meta":{"origin":355894,"position":5},"title":"Using Custom Properties to Modify Components","author":"Robin Rendle","date":"August 18, 2017","format":false,"excerpt":"Instead of using custom properties to style whole portions of a website\u2019s interface I think we should use them to customize and modify tiny components. Here\u2019s why. Whenever anyone mentions CSS custom properties they often talk about the ability to theme a website\u2019s interface in one fell swoop. For example,\u2026","rel":"","context":"In "Articles"","block_context":{"text":"Articles","link":"https:\/\/css-tricks.com\/category\/articles\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355894","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/286838"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=355894"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355894\/revisions"}],"predecessor-version":[{"id":356648,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/355894\/revisions\/356648"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/287344"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=355894"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=355894"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=355894"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}