Skip to content

Instantly share code, notes, and snippets.

View konstantinmuenster's full-sized avatar
🙌

Konstantin Münster konstantinmuenster

🙌
View GitHub Profile
@konstantinmuenster
konstantinmuenster / css2obj.js
Created November 8, 2022 12:25
Transform a string that contains CSS into an object that can be used to style React components via the `style` property.
const css2obj = css => {
const regex = /(?<=^|;)\s*([^:]+)\s*:\s*([^;]+)\s*/g
const styles = {};
css.replace(regex, (_,p,value) => {
const property = p.replace(/-(.)/g, (_,p) => p.toUpperCase())
styles[property] = value
});
return styles;
import * as Stitches from '@stitches/react';
import { theme } from '@config/stitches.config';
const COLOR_PATTERN = '$––color––';
const REGEX = /\"([^\"]*?\$––color––[^\"]*?)\"/;
export const generateColorPaletteVariants = (css: Stitches.CSS) => {
const cssString = JSON.stringify(css);
const Button = styled('button', {
// base styles
variants: {
color: generateColorPaletteVariants({ backgroundColor: '$––color––' }),
},
});
() => <Button color="violet">Button</Button>;
const Button = styled('button', {
// base styles
variants: {
color: {
background: { backgroundColor: '$background' },
surface50: { backgroundColor: '$surface50' },
surface100: { backgroundColor: '$surface100' },
surface250: { backgroundColor: '$surface250' },
surface500: { backgroundColor: '$surface500' },
const Button = styled('button', {
// base styles
variants: {
color: {
violet: { backgroundColor: 'blueviolet' },
gray: { backgroundColor: 'gainsboro' },
},
},
});
<div style={{ position: 'relative', overflow: 'hidden', height: '600px' }}>
<Image
src={image.srcUrl}
alt="Image"
fill={true}
style={{ objectFit: 'cover' }}
/>
</div>
<Image
src={image.srcUrl}
alt="Image"
width={600} // If you import the image locally, you can omit this
height={600} // If you import the image locally, you can omit this
/>
@konstantinmuenster
konstantinmuenster / hero.js
Created June 4, 2020 19:36
hero.js (2) - How To Gatsby Portfolio
...
const Hero = ({ content }) => {
const { frontmatter, rawMarkdownBody } = content
return (
<StyledSection id="hero">
<h1 className="title">
{frontmatter.greetings}{" "}
<span role="img" aria-label="emoji">
{frontmatter.emoji}
</span>
@konstantinmuenster
konstantinmuenster / index.js
Created June 4, 2020 19:33
index.js (5) - How To Gatsby Portfolio
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
import Hero from "../components/hero"
const IndexPage = ({ data }) => {
return (
<Layout>
<Hero content={data.hero.edges[0].node} />
@konstantinmuenster
konstantinmuenster / index.js
Created June 4, 2020 19:24
index.js (4) - How To Gatsby Portfolio
export const pageQuery = graphql`
{
hero: allMarkdownRemark {
edges {
node {
frontmatter {
title
greetings
emoji
subtitlePrefix