From 3eb417f83a977a7cef40f04e99cc97f371671929 Mon Sep 17 00:00:00 2001 From: honzapatCZ Date: Mon, 8 Apr 2024 23:10:10 +0200 Subject: [PATCH] remove styled macro --- Parts/Button.js | 2 +- Parts/Card.js | 2 +- Parts/Colors.js | 2 +- Parts/DropDown.js | 2 +- Parts/Input.js | 2 +- Parts/Layout.js | 6 +++--- Parts/Modal.js | 2 +- Parts/Pagination.js | 2 +- Parts/RangeSlider.js | 2 +- Parts/Table.js | 2 +- Parts/Text.js | 2 +- globalStyle.js | 1 - styledRegistry.js | 25 +++++++++++++++++++++++++ 13 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 styledRegistry.js diff --git a/Parts/Button.js b/Parts/Button.js index b2c7633..111ef91 100644 --- a/Parts/Button.js +++ b/Parts/Button.js @@ -1,6 +1,6 @@ import React from "react" import tw, { styled } from "twin.macro" -import "styled-components/macro" + import { colors, colorsDisabled, colorsHover } from "./Colors" const BtnCreator = function ({ children, type, ...props }) { diff --git a/Parts/Card.js b/Parts/Card.js index 62bc23f..9e18c07 100644 --- a/Parts/Card.js +++ b/Parts/Card.js @@ -1,6 +1,6 @@ import React from "react"; import tw, {styled} from "twin.macro" -import "styled-components/macro" + let Card = styled.div(tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`) diff --git a/Parts/Colors.js b/Parts/Colors.js index 92039b5..fc970d8 100644 --- a/Parts/Colors.js +++ b/Parts/Colors.js @@ -1,6 +1,6 @@ import tw, {styled} from "twin.macro" -import "styled-components/macro" + export let colors = { diff --git a/Parts/DropDown.js b/Parts/DropDown.js index e109d23..6371e00 100644 --- a/Parts/DropDown.js +++ b/Parts/DropDown.js @@ -3,7 +3,7 @@ import { createPopper } from "@popperjs/core"; import { usePopper } from 'react-popper'; import tw, { styled } from "twin.macro" -import "styled-components/macro" + import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors"; diff --git a/Parts/Input.js b/Parts/Input.js index 83589bd..8740572 100644 --- a/Parts/Input.js +++ b/Parts/Input.js @@ -1,7 +1,7 @@ import React from "react"; import tw, { styled } from "twin.macro"; -import "styled-components/macro"; + ; //import { useField as useFormikField, useFormikContext } from "formik"; const useFormikField = null; const useFormikContext = ()=>{}; diff --git a/Parts/Layout.js b/Parts/Layout.js index 9afc4a8..3d46be1 100644 --- a/Parts/Layout.js +++ b/Parts/Layout.js @@ -1,11 +1,11 @@ import React from "react" import tw, {styled} from "twin.macro" -import "styled-components/macro" + const Full = styled.div(tw`w-full lg:px-2 py-2`) export {Full} -const Half = styled.div(tw`w-full lg:w-6/12 lg:px-2 py-2`) +const Half = styled.div(tw`w-full lg:w-8/12 xl:w-6/12 lg:px-2 py-2`) export {Half} const Quarter = styled.div(tw`w-full lg:w-6/12 xl:w-3/12 lg:px-2 py-2 `) @@ -14,7 +14,7 @@ export {Quarter} const Sixth = styled.div(tw`w-full lg:w-1/5 xl:w-1/6 lg:px-2 py-2 `) export {Sixth} -const Third = styled.div(tw`w-full lg:w-4/12 lg:px-2 py-2 `) +const Third = styled.div(tw`w-full lg:w-8/12 xl:w-4/12 lg:px-2 py-2 `) export {Third} const TwoThird = styled.div(tw`w-full lg:w-8/12 lg:px-2 py-2 `) diff --git a/Parts/Modal.js b/Parts/Modal.js index 8cd60dd..96a922d 100644 --- a/Parts/Modal.js +++ b/Parts/Modal.js @@ -2,7 +2,7 @@ import React from "react" import { Half, Third } from "./Layout" import tw, { styled } from "twin.macro" -import "styled-components/macro" + function Modal({ isOpen, onBackdropClick, ...props }) { if (isOpen) { diff --git a/Parts/Pagination.js b/Parts/Pagination.js index 43ac140..4cefca2 100644 --- a/Parts/Pagination.js +++ b/Parts/Pagination.js @@ -1,6 +1,6 @@ import Button from "./Button"; import tw, { styled } from "twin.macro"; -import "styled-components/macro"; + ; const Btn = styled(Button)(({ active }) => [tw`rounded-none mx-0`, active && tw`bg-accent`]); diff --git a/Parts/RangeSlider.js b/Parts/RangeSlider.js index 0e922d8..9e38998 100644 --- a/Parts/RangeSlider.js +++ b/Parts/RangeSlider.js @@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from "react"; import styles from "./RangeSlider.scss" import tw from "twin.macro" -import "styled-components/macro" + export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, right = true, ...props }) { diff --git a/Parts/Table.js b/Parts/Table.js index 7364e4f..8493997 100644 --- a/Parts/Table.js +++ b/Parts/Table.js @@ -1,6 +1,6 @@ import React from "react"; import tw, {styled} from "twin.macro" -import "styled-components/macro" + export function Table(props) { return
diff --git a/Parts/Text.js b/Parts/Text.js index 52da39d..faef462 100644 --- a/Parts/Text.js +++ b/Parts/Text.js @@ -1,6 +1,6 @@ import React from "react" import tw, {styled} from "twin.macro" -import "styled-components/macro" + import { textColors, textColorsHover } from "./Colors" diff --git a/globalStyle.js b/globalStyle.js index 3d65f85..a94613e 100644 --- a/globalStyle.js +++ b/globalStyle.js @@ -1,4 +1,3 @@ -import React, { useState } from "react" import { createGlobalStyle } from "styled-components" import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro" diff --git a/styledRegistry.js b/styledRegistry.js new file mode 100644 index 0000000..10da128 --- /dev/null +++ b/styledRegistry.js @@ -0,0 +1,25 @@ +'use client' + +import React, { useState } from 'react' +import { useServerInsertedHTML } from 'next/navigation' +import { ServerStyleSheet, StyleSheetManager } from 'styled-components' + +export default function StyledComponentsRegistry({ children }) { + // Only create stylesheet once with lazy initial state + // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state + const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet()) + + useServerInsertedHTML(() => { + const styles = styledComponentsStyleSheet.getStyleElement() + styledComponentsStyleSheet.instance.clearTag() + return <>{styles} + }) + + if (typeof window !== 'undefined') return <>{children} + + return ( + + {children} + + ) +} \ No newline at end of file