An experimental transpiler to bring tailwind macros to SWC 🚀

Related tags

Learning resource nextjs swc next tailwind tailwindcss swc-plugin
Overview

stailwc (speedy tailwind compiler)

This is an experimental SWC transpiler to bring compile time tailwind macros to SWC (and nextjs) a-la twin macro. The goal is to give the same great performance and flexibility while performing considerably better than babel-based alternatives (about 11x faster in my experience, proper benchmarks coming soon!)

🚨 We currently only support NextJS 12.2.5

Getting started

> yarn add stailwc

Currently the setup process is a little bit convoluted, but it will be cleaned up in the future, once we determine the best way to package this. Place the following in your next.config.js:

next.config.js

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

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

module.exports = nextConfig;

Optionally, you can also include the tailwind normalizer.

_document.tsx

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html>
      <Head>
        <link
          rel="stylesheet"
          type="text/css"
          href="https://unpkg.com/[email protected]/src/css/preflight.css"
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

Now get hacking!

Usage

You can interact with stailwc in two ways. The first is through the tw JSW attribute, and the second is via the tw template tag.

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>
  );
};

Caveats

Next currently doesn't support the SWC error handler meaning that errors are logged only to the command line, and not shown visually on the screen. This will be supported down the line (see here: vercel/next.js#39779).

Comments
  • The automated release is failing 🚨

    The automated release is failing 🚨

    :rotating_light: The automated release from the master branch failed. :rotating_light:

    I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

    You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

    Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

    Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

    If you are not sure how to resolve this, here are some links that can help you:

    If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

    Unable to build workspace dependencies graph: Unable to parse the workspace structure starting at /home/runner/work/stailwc/stailwc/Cargo.toml

    Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the @semantic-release/exec plugin to add more helpful information.

    Good luck with your project ✨

    Your semantic-release bot :package::rocket:

    semantic-release 
    opened by arlyon 3
  • Rework mutliple tag detection

    Rework mutliple tag detection

    This case currently fails because the check isn't set up for recursive cases:

              <InputText
            register={register}
            name="value"
            tw="flex h-[20px] items-center"
            prefix={
              <button type="submit" tw="-mx-3 h-full w-full flex-1 px-3">
                <CheckIcon tw="h-5 w-5 text-neutral-400" />
              </button>
            }
          />

    Error: 
  x tw attribute already exists, ignoring
    ,----
 61 | <button type="submit" tw="-mx-3 h-full w-full flex-1 px-3">
    :                       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    `----

Error: 
  > previous encountered here
    ,----
 59 | tw="flex h-[20px] items-center"
    :    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    `----
    released 
    opened by arlyon 1
  • Support for emotion components

    Support for emotion components

    It would be nice if we could transform tw.div as well as tw(Container) style directives into the equivalent statements:

    const Box = tw.div`text-red-500`;
const BoxExtended = tw(Box)`bg-blue-500`;
---
const Box = _styled.div({
    "--tw-text-opacity": "1",
    color: "rgb(239 68 68 / var(--tw-text-opacity))"
});
const BoxExtended = _styled(Box)({
    "--tw-bg-opacity": "1",
    backgroundColor: "rgb(59 130 246 / var(--tw-bg-opacity))"
});
    opened by arlyon 1
  • support for styled-components

    support for styled-components

    hey, https://github.com/ben-rogerson/twin.macro/discussions/516#discussioncomment-4032968 the styled-components support would be really appreciated 🙏

    opened by koniuszy 1
  • Issue in example

    Issue in example

    Hi there, thanks for the addon i will be testing it but i noticed there is a small error with the node sample there is a " missing after staliwc

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

    opened by nimbit-software 1
  • Styled components support

    Styled components support

    This enables styled-components support with stailwc, bar the injected global styles due. For more info, see https://github.com/swc-project/swc/issues/6233#issuecomment-1363806515

    Closes #11 Closes #22

    opened by arlyon 0
  • The automated release is failing 🚨

    The automated release is failing 🚨

    :rotating_light: The automated release from the master branch failed. :rotating_light:

    I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

    You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

    Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

    Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

    If you are not sure how to resolve this, here are some links that can help you:

    If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

    Unable to build workspace dependencies graph: Unable to parse the workspace structure starting at /home/runner/work/stailwc/stailwc/Cargo.toml

    Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the @semantic-release/exec plugin to add more helpful information.

    Good luck with your project ✨

    Your semantic-release bot :package::rocket:

    semantic-release 
    opened by arlyon 0
  • The automated release is failing 🚨

    The automated release is failing 🚨

    :rotating_light: The automated release from the master branch failed. :rotating_light:

    I recommend you give this issue a high priority, so other packages depending on you can benefit from your bug fixes and new features again.

    You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can fix this 💪.

    Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

    Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

    If you are not sure how to resolve this, here are some links that can help you:

    If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

    Unfortunately this error doesn't have any additional information. Feel free to kindly ask the author of the @semantic-release/exec plugin to add more helpful information.

    Good luck with your project ✨

    Your semantic-release bot :package::rocket:

    semantic-release 
    opened by arlyon 0
  • Get rid of global style workarounds

    Get rid of global style workarounds

    Right now for both global styles and emotion styles we rely on some ugly workarounds to handle some 'odd' behaviour from SWC which is described in this comment: https://github.com/swc-project/swc/issues/6233#issuecomment-1363806515. Our only recourse is to sit and wait until they are resolved upstream.

    opened by arlyon 0
  • Benchmarks and profiling

    Benchmarks and profiling

    This library has been written with the goal of doing as few allocations as possible however there are probably plenty for performance / speed gains to be had still. As an idea for potential pitfalls:

    • creating too many intermediate ObjectLit
    • inefficient config loading (parse and allocate the json config per file)
    • inefficient parsing
    • inefficient match for finding commands (rust_phf?)

    I would like to build out flamegraphs for the snapshot tests to determine larger-than-expected execution times as well as run benchmarks on those to track perf over time.

    opened by arlyon 0
  • Handle negatives correctly for transform

    Handle negatives correctly for transform

    Currently -transform-x-full transpiles to transform: -translateX(100%) while the correct value is translateX(-100%). Solution is likely to have the plugin operate on the entire Subject rather than just the Literal.

    opened by arlyon 0
Releases(0.11.0)
Owner
Alexander Lyon
I love making great teams build things quickly. You can usually find me working on tooling / libraries.
Alexander Lyon
GitHub https://npmjs.com/package/stailwc
A transpiler from golang's type to typescript's type for collaboration between frontend & backend.

go2type go2type.vercel.app (backup site) A typescript transpiler that convert golang's type to typescript's type. Help front-end developer to work fas

Oanakiaja 8 Sep 26, 2022
SWC plugin for transforming import path.

swc-plugin-transform-import Inspired from babel-plugin-transform-imports Installation npm i -D swc-plugin-transform-import Uses with webpack-config //

Ankit Chouhan 35 Dec 24, 2022
convert SWC to Babel AST

SWC-to-babel Convert SWC JavaScript AST to Babel AST. To use SWC parser with babel tools like: @babel/traverse @babel/types etc... The thing is @babel

coderaiser 23 Oct 28, 2022
Storybook add-on to enable SWC builds.

storybook-addon-swc Storybook addon that improves build time by building with swc. ?? Examples webpack4 webpack5 ?? Installation $ npm install -D stor

Karibash 49 Dec 20, 2022
💅 A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, Prettier, GitHub Action releases and more.

Electron App ??  A ready-to-go with a well-thought-out structure Electron app boilerplate with ReactJS, TypeScript, CSS / SASS modules, SWC, Eslint, P

Dalton Menezes 155 Dec 29, 2022
LearnR is an educators application that aims to bring together students and teachers on the community platform.

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

Emerenini Cynthia Ngozi 0 Sep 5, 2022
CodeTogether is a platform that aims to bring all the developers and coders together to appreciate collaborative coding by resolving issues faced by programmers on normal IDEs/platforms

CodeTogether is a platform that aims to bring all the developers and coders together to appreciate collaborative coding by resolving issues faced by programmers on normal IDEs/platforms. It allows developers to communicate with their fellow developers or collaborators through online voice call and realtime chat. Besides, the whiteboard makes the framing of an algorithm easier by helping programmers working collaboratively to discuss and plan their approach together

Shayan Debroy 5 Jan 20, 2022
A custom element that helps save alienated player API's to bring back their true inner HTMLMediaElement API

A custom element that helps save alienated player API's to bring back their true inner HTMLMediaElement API

Wesley Luyten 5 Oct 14, 2022
This repo was made to bring to light all discord scams, and show how to tell if you are being scammed and how to remove malware from scams

DMV (Discord Malware Variants) is a repository made to bring light to harmful programs used by bad actors in order to steal sensitive information from

Credit 43 Dec 29, 2022
MUI Core is a collection of React UI libraries for shipping new features faster. Start with Material UI, our fully-loaded component library, or bring your own design system to our production-ready components.

MUI Core MUI Core contains foundational React UI component libraries for shipping new features faster. Material UI is a comprehensive library of compo

MUI 83.6k Dec 30, 2022
This repo was made to bring to light all discord scams, and show how to tell if you are being scammed and how to remove malware from scams

DMV (Discord Malware Variants) is a repository made to bring light to harmful programs used by bad actors in order to steal sensitive information from

opsec-bot 26 Sep 5, 2022
🤑💰 Crowdfunding Platform backed by Ethereum Blockchain to bring your creative projects to life

Crypto Crowdfund For Creators Lacking the money to bring your Creative Venture to Life? Crypto Crowdfund Campaigns will help you turn your creative id

Man of Justice 4 Oct 3, 2022
A Tailwind plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and all variations.

Tailwind Labeled Groups A plugin that allows to create multiple groups utilities such as group-card or group-1 and works with Tailwind 3 features and

Max 18 Nov 21, 2022
⏪ Rewinds – Remix Tailwind Starter Kit with Tailwind CSS, Headless UI, Radix UI, and more

⏪ Rewinds – Remix Tailwind Starter Kit Rewinds is a Remix starter kit with Tailwind CSS v3 family of libraries. This is an example demo to combine the

M Haidar Hanif 81 Dec 24, 2022
Experimental URL->CID index using b trees (chunky-trees from @mikeal)

ipfs-url-index Experimental IPFS index for URL->CID, implemented using chunky-trees B-Tree implementation. API Server Run node main.js to start the ap

Ilya Kreymer 2 Mar 14, 2022
Bitburner-bbpm - An experimental package manager for the game Bitburner.

BPPM - BitBurner Package Manager An experimental package manager for the game Bitburner. Install Instructions Download the latest release of bbpm.js.

null 3 Mar 24, 2022
experimental web browser optimized for rabbit-holing

Cartographist Cartographist is an experimental web browser optimized for rabbit-holing. Instead of opening new windows (with cmd-click), Cartographist

Szymon Kaliski 160 Jan 2, 2023
Halfwit is an experimental golfing language that fits most commands in half a byte.

Halfwit Halfwit is an experimental golfing language that fits most commands in half a byte. It's stack-based. Usage npm install halfwit

Chunkybanana 12 Jun 27, 2022
An experimental framework-aware Firebase CLI

Firebase Experimental framework-aware CLI Usage $ npm i -g firebase-frameworks $ cd <MY-APP> $ firebase-frameworks init $ firebase-frameworks build $

null 146 Dec 27, 2022