profile
viewpoint
Rai Butera rbutera RSTLSS London http://rstlss.org London born, raised on the www. Making websites since 2001. Love startups and shaping the future of the web! JS evangelist, and React, Vue and GatsbyJS fanboy.

gatsbyjs/gatsby 48679

Build blazing fast, modern apps and websites with React

ben-rogerson/twin.macro 3051

🦹‍♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components and goober) at build time.

rbutera/bumpmap-cli2 2

Location-based notice boards, chat and messaging app.

alpha-homes/alphahomesuk.com 1

Website for Alpha Homes - London Property Specialists Since 2008

bumpmap/bumpmap 1

Location-based notice boards, chat and messaging app.

njcrisp-com/NJCrisp.com 1

Sound Design and Audio Production Portfolio for Natan James Crisp

rbutera/choon 1

node.js command line tool using Offliberty to download a YouTube video as MP3

rbutera/csio 1

International Offensive (CSIO): Translations Radio Mod for CSGO

startedkettanaito/test-flat

started time in an hour

starteddqisme/Hactor

started time in an hour

startedtonsky/FiraCode

started time in an hour

startedvueuse/head

started time in 2 hours

startedwbyoung/avn

started time in 3 hours

startedtj/n

started time in 3 hours

startednikitavoloboev/cv

started time in 17 hours

startedKeyang/node-csvtojson

started time in a day

issue commentben-rogerson/twin.macro

Extended colour does not change on reload (Next.js)

@ben-rogerson is this issue solved? I have nextjs + emotion + tailwndcss + twin.macro setup. After extending a tw class in tailwind.config.js, I have to restart the dev server to take effect.

package.json

{
  "name": "nextjs",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/react": "^11.1.4",
    "@emotion/styled": "^11.0.0",
    "next": "10.0.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "twin.macro": "^2.0.8"
  },
  "devDependencies": {
    "@babel/core": "^7.12.10",
    "@types/node": "^14.14.20",
    "@types/react": "^17.0.0",
    "postcss": "^8.2.4",
    "tailwindcss": "^2.0.2",
    "typescript": "^4.1.3"
  }
}

twin.d.ts

// twin.d.ts
import "twin.macro";
import styledImport from "@emotion/styled";
import { css as cssImport } from "@emotion/react";

// The css prop
// https://emotion.sh/docs/typescript#css-prop
import {} from "@emotion/react/types/css-prop";

declare module "twin.macro" {
  // The styled and css imports
  const styled: typeof styledImport;
  const css: typeof cssImport;
}

// The 'as' prop on styled components
declare global {
  namespace JSX {
    interface IntrinsicAttributes<T> extends DOMAttributes<T> {
      as?: string;
    }
  }
}

.babelrc

{
  "presets": [
    [
      "next/babel",
      {
        "preset-react": {
          "runtime": "automatic",
          "importSource": "@emotion/react"
        }
      }
    ]
  ],
  "plugins": ["@emotion/babel-plugin", "babel-plugin-macros"]
}
theairbend3r

comment created time in 2 days

issue commentben-rogerson/twin.macro

framer-motion + styled-components doesn't work with prop styling

@ben-rogerson, interesting. While the reproduction uses NPM, we ran into this issue in our Yarn workspaces monorepo. And yes, we were able to work around it as well by doing this:

const MotionDiv = motion.div

// snip

<MotionDiv tw="..." />

In that case, the transpilation properly defined var MotionDiv = _framerMotion.motion.div. My uneducated guess here is that the Babel transform is probably just taking what it finds in the JSX call (i.e., <motion.div>) and putting it in the styled component (i.e., styled(motion.div)) in a way that doesn't consider ES6 -> CommonJS interop changes.

I'd be happy to dig in a bit more and help implement a fix if you could point me in the right direction, specifically where the AST fransformation is happening within the Babel macro implementation.

Thanks!

migueloller

comment created time in 2 days

startedkettanaito/naming-cheatsheet

started time in 2 days

startedfelixrieseberg/macintosh.js

started time in 2 days

issue commentben-rogerson/twin.macro

styled-components preset doesn't work with certain React elements

When testing this, I had no issues using yarn, but I experienced the described error when using npm to install the dependencies. I also had no issues with emotion so this issue seems localised to twin + styled-components + npm.

Here's the workaround I've found:

import React from 'react'
import tw from 'twin.macro'
import { Button, Logo } from './components'
import { motion } from 'framer-motion'

const Motion = tw(motion.div)``

const App = () => (
  <Motion
    as="span"
    css={[
      tw`flex flex-col items-center justify-center h-screen`,
      tw`bg-gradient-to-b from-electric to-ribbon`,
    ]}
  >
    <Motion tw="flex flex-col justify-center h-full space-y-5">
      <Button isPrimary>Submit</Button>
      <Button isSecondary>Cancel</Button>
      <Button isSmall>Close</Button>
    </Motion>
    <Logo />
  </Motion>
)

export default App

Note that you can change from a div to another element with the as prop.

I'll have to have a better dig into this before I can explain exactly what's happening.

migueloller

comment created time in 2 days

issue openedben-rogerson/twin.macro

styled-components preset doesn't work with certain React elements

We ran into this issue when attempting to use Framer Motion with twin.macro. The gist of it is that using the tw prop on an element like motion.div results in the commonjs transpilation improperly importing the bindings, which causes this error: image

Here's what some transpiled output looks like:

var _framerMotion = require("framer-motion");

// snip

var _StyledMotionDiv = (0, _styledComponents.default)(motion.div).withConfig({
  displayName: "Dialog___StyledMotionDiv",
  componentId: "sc-1ji47xs-0"
})({
  "position": "absolute",
  "top": "0px",
  "right": "0px",
  "bottom": "0px",
  "left": "0px",
  "pointerEvents": "none",
  "--tw-bg-opacity": "1",
  "backgroundColor": "rgba(0, 0, 0, var(--tw-bg-opacity))"
});

Notice that instead of _framerMotion.motion.div, the styled component is just called with motion.div and since motion isn't defined, that results in an error. The code that transpiles to this looks somewhat like this:

import { motion } from 'framer-motion'

// snip

  <motion.div tw="absolute inset-0 pointer-events-none bg-black">

This can easily be reproduced by doing the following:

Follow the instructions at https://github.com/ben-rogerson/twin.examples/tree/master/react-styled-components:

npx degit https://github.com/ben-rogerson/twin.examples/react-styled-components folder-name
cd folder-name
npm install framer-motion

And apply the following changes to src/App.js:

 import React from 'react'
 import tw from 'twin.macro'
 import { Button, Logo } from './components'
+import { motion } from 'framer-motion'
 
 const App = () => (
-  <div
+  <motion.div
     css={[
       tw`flex flex-col items-center justify-center h-screen`,
       tw`bg-gradient-to-b from-electric to-ribbon`,
     ]}
   >
-    <div tw="flex flex-col justify-center h-full space-y-5">
+    <motion.div tw="flex flex-col justify-center h-full space-y-5">
       <Button isPrimary>Submit</Button>
       <Button isSecondary>Cancel</Button>
       <Button isSmall>Close</Button>
-    </div>
+    </motion.div>
     <Logo />
-  </div>
+  </motion.div>
 )
 
 export default App

Run npm start and open the console in the browser and you'll see the error.

created time in 3 days

issue commentben-rogerson/twin.macro

twin.macro not playing nicely with Next.JS and shared components in a yarn workspaces

Thanks Frank — that thought did occur to me.

Unfortunately tweaking the order, in the built module file, doesn't help.

Here's how TextInput is being called in that built file:

function Input(props) {
  var icon = props.icon,
      rest = _objectWithoutProperties(props, ["icon"]);

  return InputWrapper(null, [icon && icon({
    size: 24
  }), TextInput(Object.assign({}, rest))]);
}

Unfortunately, TextInput seems to be returned as an object by _styled2.

PaddyMann

comment created time in 3 days

issue commentben-rogerson/twin.macro

twin.macro not playing nicely with Next.JS and shared components in a yarn workspaces

I would say that const TextInput is not hoisted. What about changing the order?

PaddyMann

comment created time in 3 days

issue commentben-rogerson/twin.macro

twin.macro not playing nicely with Next.JS and shared components in a yarn workspaces

The rollup solution I've got currently works well with a simple styled component, e.g.:

import tw, {styled} from 'twin.macro';

const PageCenter = styled.div((props) => [
  tw`
    flex
    items-center
    justify-center
    h-screen
  `,
]);

export default PageCenter;

However, it doesn't seem to support something a little more complex:

import React from 'react';
import PropTypes from 'prop-types';
import tw, {styled} from 'twin.macro';

Input.propTypes = {
  icon: PropTypes.func,
};

Input.defaultProps = {
};

function Input (props) {
  const {
    icon,
  } = props;

  return <InputWrapper>
    {icon && icon({size: 24})}
    <TextInput />
  </InputWrapper>;
}

const InputWrapper = styled.div((props) => [
  tw`
    flex
    border
    w-full
    px-3
    pl-2.5
    h-11
    border-gray-300
    text-gray-700
    svg:self-center
    svg:text-gray-400
  `,
]);

const TextInput = styled.input((props) => [
  tw`
    outline-none
    w-full
    ml-2
  `,
]);

export default Input;

The error I get is:

TypeError: TextInput is not a function

In the built module, I can see TextInput is included, but it's wrapped as a styled-components object:

;

var TextInput = _styled2.input.withConfig({
  displayName: "Input__TextInput",
  componentId: "sc-15h421e-1"
})(function (props) {
  return [{
    "outline": "2px solid transparent",
    "outlineOffset": "2px",
    "width": "100%",
    "marginLeft": "0.5rem"
  }];
});

Any ideas how to resolve this?

PaddyMann

comment created time in 3 days

issue commentben-rogerson/twin.macro

twin.macro not playing nicely with Next.JS and shared components in a yarn workspaces

I've now got it working with rollup — thank you sir!

PaddyMann

comment created time in 3 days

issue commentben-rogerson/twin.macro

twin.macro not playing nicely with Next.JS and shared components in a yarn workspaces

I've just re-read your response and realize the next step is to look at the linked repo. I'll be doing that now — thanks @ben-rogerson :)

PaddyMann

comment created time in 3 days

issue commentben-rogerson/twin.macro

twin.macro not playing nicely with Next.JS and shared components in a yarn workspaces

Thanks for reviewing @ben-rogerson (and epic work on twin btw — amazing to find so much support + examples of making it work with so many other libraries!)

I'm a little unclear on what the next steps are. Is this something I can resolve at my end, or does it need to be addressed either in twin or styled-components? :)

PaddyMann

comment created time in 3 days

issue commentben-rogerson/twin.macro

Overriding existing utilities in tailwind.config.js has no effect when using with Next.js

@ben-rogerson Yes, I think that's the best solution for now...thank you for this excellent project.

amrnn90

comment created time in 4 days

issue commentben-rogerson/twin.macro

twin.macro not playing nicely with Next.JS and shared components in a yarn workspaces

Thanks for the great issue repo. I've used Rollup to create a shared component library and the trick there was to pre-compile the library before importing it into my project. I believe what's happening here is that shared-components doesn't precompile the library beforehand so when next attempts to use the component, styled hasn't been replaced with the css-in-js library import.

PaddyMann

comment created time in 4 days

issue commentben-rogerson/twin.macro

Overriding existing utilities in tailwind.config.js has no effect when using with Next.js

Ah yes, it's similar for Gatsby also but it's the .cache dir in that case. If I'm adjusting the config often enough I'll change the dev script to rimraf the dir before starting the dev server.

amrnn90

comment created time in 4 days

issue openedben-rogerson/twin.macro

twin.macro not playing nicely with Next.JS and shared components in a yarn workspaces

Our monorepo has both a create-react-app (CRA) and a Next.JS app.

I'm trying to set up a shared components library, and have got it working for the CRA app.

I've also managed to set up Next.JS to load shared components using next-transpile-modules, but I'm having issues when importing {styled} from twin.macro.

With this code... :

import tw, {styled} from 'twin.macro';

... styled is coming out as undefined.

I've recreated the issue here: https://github.com/PaddyMann/twin-yarn-workspaces-issue

created time in 4 days

issue commentben-rogerson/twin.macro

Overriding existing utilities in tailwind.config.js has no effect when using with Next.js

@drymek Yes, that's what happens with me also. I don't usually override existing utilities anyway, so I'll just remove the .next directory for now 😅

amrnn90

comment created time in 4 days

startedtorch2424/as-bind

started time in 4 days

startedtaniarascia/takenote

started time in 4 days

startedjmcdo29/nestjs-commander

started time in 4 days

issue commentben-rogerson/twin.macro

Overriding existing utilities in tailwind.config.js has no effect when using with Next.js

In my case, it is not enough to change the file or restart service. I looked for this bug for a while (I thought it was a wrong tailwind configuration) - only removing the .next directory works for me. However, I use it everywhere, so I'm not able to easy test it without twin.macro

amrnn90

comment created time in 4 days

fork blutooth/svelte-tailwindcss-template

Template for building basic applications with Svelte

fork in 4 days

more