➖(styling) replace twMerge dependency with template literals

Replacing the twMerge dependency with template literals eliminates unnecessary complexity. Using native features instead of an external library streamlines the codebase and reduces dependencies.
numerique-gouv · Apr 3, 2024 · 339308c · 339308c
1 parent 4c56bba
commit 339308c
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 51 deletions.
diff --git a/package.json b/package.json
@@ -15,8 +15,7 @@
     "next": "14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "swiper": "11.0.5",
-    "tailwind-merge": "2.2.1"
+    "swiper": "11.0.5"
   },
   "devDependencies": {
     "@types/node": "20.11.10",

diff --git a/src/components/Br.tsx b/src/components/Br.tsx
@@ -1,4 +1,3 @@
-import { twMerge } from 'tailwind-merge'
 import React from 'react'
 
 interface BrProps {
@@ -18,7 +17,7 @@ interface BrProps {
  */
 export const Br: React.FC<BrProps> = ({ showOnMobile = false }) => (
   <br
-    className={twMerge('hidden sm:inline', showOnMobile && 'inline')}
+    className={showOnMobile ? 'inline' : 'hidden sm:inline'}
     aria-hidden={true}
   />
 )
diff --git a/src/components/Button.tsx b/src/components/Button.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import { twMerge } from 'tailwind-merge'
 import React from 'react'
 
 interface ButtonProps {
@@ -9,20 +8,24 @@ interface ButtonProps {
   variant?: 'outline'
 }
 
-export const ButtonStyle =
-  'flex justify-center align-middle items-center min-h-10 text-base font-medium text-white py-2.5 px-6 w-fit bg-blue-1 hover:bg-dsfr-blue-2 transition ease-in-out delay-50 duration-300 text-center'
+const transition = 'transition ease-in-out delay-50 duration-300'
+const core =
+  'flex justify-center align-middle items-center py-2.5 px-6 min-h-10 text-base w-fit text-center'
+
+export const buttonStyles = {
+  default: `${core} ${transition} font-medium text-white bg-blue-1 hover:bg-dsfr-blue-2`,
+  outline: `${core} ${transition} bg-transparent border border-2 font-bold border-blue-1 text-blue-1 hover:backdrop-brightness-95 hover:bg-transparent`,
+}
 
 export const Button: React.FC<ButtonProps> = ({
   children,
   href,
   variant,
   'aria-label': ariaLabel,
 }) => {
-  const classNames = twMerge(
-    ButtonStyle,
-    variant === 'outline' &&
-      'bg-transparent border border-2 font-bold border-blue-1 text-blue-1 hover:backdrop-brightness-95 hover:bg-transparent'
-  )
+  const classNames =
+    variant === 'outline' ? buttonStyles.outline : buttonStyles.default
+
   return (
     <>
       {href ? (

diff --git a/src/components/ContentSection.tsx b/src/components/ContentSection.tsx
@@ -1,5 +1,4 @@
 import { HTMLAttributes, PropsWithChildren } from 'react'
-import { twMerge } from 'tailwind-merge'
 
 interface ContentSectionProps
   extends PropsWithChildren,
@@ -14,19 +13,12 @@ export const ContentSection: React.FC<ContentSectionProps> = ({
   padding = true,
   ...props
 }) => {
-  const classNames = twMerge(
-    'overflow-hidden flex justify-center',
-    background == 'gray' && 'bg-white-1',
-    padding && 'py-[50px] md:py-20'
-  )
-
   return (
-    <div className={classNames}>
+    <div
+      className={`overflow-hidden flex justify-center ${background === 'gray' && 'bg-white-1'} ${padding && 'py-[50px] md:py-20'}`}
+    >
       <div
-        className={twMerge(
-          'flex flex-col items-center w-full lg:w-[64em] gap-[50px]',
-          padding && 'px-4'
-        )}
+        className={`flex flex-col items-center w-full lg:w-[64em] gap-[50px] ${padding && 'px-4'}`}
         {...props}
       >
         {children}

diff --git a/src/components/ExternalLink.tsx b/src/components/ExternalLink.tsx
@@ -1,6 +1,5 @@
 import Image from 'next/image'
-import { ButtonStyle } from '@/components/Button'
-import { twMerge } from 'tailwind-merge'
+import { buttonStyles } from '@/components/Button'
 
 import LinkWhiteSvg from '@/assets/link-white.svg'
 
@@ -54,7 +53,7 @@ export const ButtonExternalLink: React.FC<LinkProps> = ({
   ...subprops
 }) => (
   <ExternalLink
-    className={twMerge(ButtonStyle, className)}
+    className={`${buttonStyles.default} ${className || ''}`}
     {...subprops}
     aria-label={ariaLabel || children}
   >

diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -1,5 +1,4 @@
 import Link from 'next/link'
-import { twMerge } from 'tailwind-merge'
 import { Br } from '@/components/Br'
 import { ExternalLink, LinkProps } from '@/components/ExternalLink'
 
@@ -45,7 +44,7 @@ export const Footer = () => (
             {externalLinks.map((link) => (
               <li
                 key={link.href}
-                className={twMerge('mr-6 my-2 decoration-grey-5', hover)}
+                className={`mr-6 my-2 decoration-grey-5 ${hover}`}
               >
                 <ExternalLink
                   className="font-bold text-sm text-grey-5 external-link-grey"
@@ -66,7 +65,7 @@ export const Footer = () => (
                 key={link.href}
                 className="inline internal-link-footer text-xs text-grey-3"
               >
-                <Link {...link} className={twMerge('border-grey-1', hover)}>
+                <Link {...link} className={`border-grey-1 ${hover}`}>
                   {link.children}
                 </Link>
               </li>
@@ -78,10 +77,7 @@ export const Footer = () => (
             Sauf mention contraire, tous les contenus de ce site sont sous{' '}
             <ExternalLink
               href="https://github.com/etalab/licence-ouverte/blob/master/LO.md"
-              className={twMerge(
-                'relative underline underline-offset-4 external-link-grey',
-                hover
-              )}
+              className={`relative underline underline-offset-4 external-link-grey ${hover}`}
             >
               licence etalab-2.0
             </ExternalLink>

diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
@@ -3,7 +3,6 @@ import { NavBar } from '@/components/NavBar'
 import { Footer } from '@/components/Footer'
 import { TITLE_SITE } from '@/constant'
 import React from 'react'
-import { twMerge } from 'tailwind-merge'
 
 export const Layout: React.FC<{
   children: React.ReactNode
@@ -17,13 +16,10 @@ export const Layout: React.FC<{
   const isHomepage = title === TITLE_SITE
   const pageTitle = isHomepage ? title : `${title} - ${TITLE_SITE}`
 
-  const classNames = twMerge(
-    'min-h-screen flex flex-col bg-white text-body',
-    background == 'gray' && 'bg-white-1'
-  )
-
   return (
-    <div className={classNames}>
+    <div
+      className={`min-h-screen flex flex-col text-body ${background === 'gray' ? 'bg-white-1' : 'bg-white'}`}
+    >
       <Head>
         <title>{pageTitle}</title>
         <meta

diff --git a/src/sections/Initiatives.tsx b/src/sections/Initiatives.tsx
@@ -3,14 +3,13 @@ import { SwiperWrapper } from '@/components/SwiperWrapper'
 import { ContentSection } from '@/components/ContentSection'
 import { Br } from '@/components/Br'
 import { Button } from '@/components/Button'
-import { twMerge } from 'tailwind-merge'
 
 import IllustrationIdea from '@/assets/idea.webp'
 import StripeWhiteSvg from '@/assets/stripe-white.svg'
 
 const WhiteSquare: React.FC<{ className: string }> = ({ className }) => (
   <span
-    className={twMerge('h-[28px] w-[28px] bg-white absolute z-10', className)}
+    className={`h-[28px] w-[28px] bg-white absolute z-10 ${className || ''}`}
   />
 )
 

diff --git a/yarn.lock b/yarn.lock
@@ -12,7 +12,7 @@
   resolved "https://registry.yarnpkg.com/@alloc/quick-lru/-/quick-lru-5.2.0.tgz#7bf68b20c0a350f936915fcae06f58e32007ce30"
   integrity sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==
 
-"@babel/runtime@^7.23.2", "@babel/runtime@^7.23.7":
+"@babel/runtime@^7.23.2":
   version "7.23.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.9.tgz#47791a15e4603bb5f905bc0753801cf21d6345f7"
   integrity sha512-0CX6F+BI2s9dkUqr08KFrAIZgNFj75rdBU/DjCyYLIaV/quFjkk6T+EJ2LkZHyZTbEV4L5p97mNkUsHl2wLFAw==
@@ -2379,13 +2379,6 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/swiper/-/swiper-11.0.5.tgz#6ed1ad06e6906ba42fd4b93d4988f0626a49046e"
   integrity sha512-rhCwupqSyRnWrtNzWzemnBLMoyYuoDgGgspAm/8iBD3jCvAWycPLH4Z3TB0O5520DHLzMx94yUMH/B9Efpa48w==
 
-[email protected]:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.2.1.tgz#3f10f296a2dba1d88769de8244fafd95c3324aeb"
-  integrity sha512-o+2GTLkthfa5YUt4JxPfzMIpQzZ3adD1vLVkvKE1Twl9UAhGsEbIZhHHZVRttyW177S8PDJI3bTQNaebyofK3Q==
-  dependencies:
-    "@babel/runtime" "^7.23.7"
-
 [email protected]:
   version "3.4.1"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.4.1.tgz#f512ca5d1dd4c9503c7d3d28a968f1ad8f5c839d"