stailwc

Stailwc (compilador de viento de cola rápida)

Este es un transpilador de SWC experimental para llevar macros de viento de viento de tiempo de compilación a la macro Twin A-LA SWC (y NextJS) A-La. El objetivo es dar la misma gran ergonomía y flexibilidad en tiempo de compilación mientras se desempeña considerablemente mejor que las alternativas con sede en Babel. Apoya tanto emotion como styled-components para CSS-in-JS, y muchos sistemas de construcción como SWC, NEXTJS, VITE, ETC.

Tabla de compatibilidad

Actualmente estamos probando contra las siguientes versiones. Sin embargo, otras versiones fuera de estos aún pueden funcionar.

stailwc	Nextjs	Emoción	Componentes de estilo	SWC	Vite
el último	13.4.3	11.10.5	5.3.6	1.3.24	4.1.0

Gráfico de características

Característica	Emoción	Componentes de estilo
atributo tw jsx	✅	✅
Etiqueta de plantilla tw	✅	✅
Sintaxis de componentes tw	✅	✅
Sintaxis de extensión de componente tw	✅	✅
Estilos globales	✅	✅
Sugerencias de parámetros de complemento	✅	✅

Empezando

 > npm add -D stailwc
> yarn add -D stailwc
> pnpm add -D stailwc

Para comenzar con NextJS, coloque lo siguiente en su próximo.config.js. Para otras redes / herramientas, consulte los ejemplos.

next.config.js

 const stailwc = require ( "stailwc/install" ) ;

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode : true ,
  swcMinify : true ,
  experimental : {
    swcPlugins : [
      stailwc ( {
        engine : "emotion" , // or "styled-components"
      } ) ,
    ] ,
  } ,
  compiler : {
    emotion : true ,
    // or
    styledComponents : true ,
  } ,
} ;

module . exports = nextConfig ;

Opcionalmente, también puede incluir el complemento Tailwind Normalizer + Forms al incluir el componente <TailwindStyle /> . Consulte los ejemplos relevantes.

_document.tsx

 import { TailwindStyle } from "stailwc" ;

export default function App ( { Component , pageProps } ) {
  return (
    < >
      < TailwindStyle />
      < Component { ... pageProps } />
    </ >
  ) ;
}

Tipos

Hay un paso que debe dar para que funcionen los tipos. Debe agregar stailwc.d.ts a la raíz de su carpeta fuente.

Uso

La etiqueta tw

Puede interactuar con StailWC de dos maneras. El primero es a través del atributo tw JSW, y el segundo es a través de la etiqueta de plantilla tw .

 import { useState } from "react" ;

export const ColorButton = ( ) => {
  const [ clicked , setClicked ] = useState ( 0 ) ;
  return (
    < button
      tw = "p-1 m-4 text-green bg-white hover:(bg-gray text-yellow md:text-red) border-3"
      css = { clicked % 2 == 0 ? tw `border-green` : tw `border-blue` }
      onClick = { ( ) => setClicked ( clicked + 1 ) }
    >
      Clicked { clicked } times
    </ button >
  ) ;
} ;

Sintaxis de componentes

También puede crear componentes de estilo utilizando la etiqueta de plantilla tw . Esto creará automáticamente la sintaxis correcta tanto para emotion como para styled-components .

 export const StyledButton = tw . button `p-1 m-4 text-green bg-white hover:(bg-gray text-yellow md:text-red) border-3` ;
export const ShadowButton = tw ( StyledButton ) `shadow-lg` ; 

Ejemplos

Hay ejemplos disponibles tanto para emotion como para styled-components . Puede ejecutarlos clonando el repositorio y yarn en ejecución seguido de yarn dev en el directorio de ejemplo. Primero necesitará stailwc .