profile
viewpoint
If you are wondering where the data of this site comes from, please visit https://api.github.com/users/ben-rogerson/events. GitMemory does not store any data, but only uses NGINX to cache data for a period of time. The idea behind GitMemory is simply to give users a better reading experience.
Ben Rogerson ben-rogerson Adelaide, Australia https://benrogerson.com.au Full-stack web developer powered by coffee and JS, keen mountain biker and zombie movie enthusiast

ben-rogerson/twin.macro 4450

๐Ÿฆนโ€โ™‚๏ธ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.

ben-rogerson/twin.examples 202

Packed with examples for different frameworks, this repo helps you get started with twin a whole lot faster.

ben-rogerson/agency-webpack-mix-config 88

๐Ÿ‘จโ€๐Ÿ’ป A capable website/webapp boilerplate ready for the web agency battlefield. Creates a static site with Twig templating by default. Supports Craft/Wordpress/Laravel after a few adjustments.

burgerbuds/swiff 88

๐Ÿ’ Command line tools for common local โ†” remote server tasks.

ben-rogerson/craft-storybook-starter 53

๐Ÿฃ Everything you need to create a beautiful living style guide with Twig components.

ben-rogerson/nuxt-seomatic-meta 24

A module for connecting Nuxt.js to the Craft CMS SEOmatic plugin via GraphQL. Nuxt-o-matic!

ben-rogerson/babel-plugin-twin 21

Activate twin.macroโ€™s tw prop without adding the twin import

ben-rogerson/twin.site 8

The documentation website for twin.macro

ben-rogerson/laravel-mix-twig-to-html 7

A Laravel Mix extension to convert Twig files to Html

ben-rogerson/laravel-mix-make-file-hash 5

๐Ÿ“‘ Convert Laravel Mix querystring hashing to filename hashing. Eg: main.css?id=abcd1234 to main.abcd1234.css

issue commentben-rogerson/twin.macro

Stitches config theme tokens need scale prefix token

Thanks for the reply @peduarte ๐Ÿ‘

Here's the transformation that happens with twin:

import { styled } from "twin.macro";

const Button = styled("button", {
  backgroundColor: "$gray400",  // Doesn't work - must be prefixed to 'see' the gray config value, eg: '$colors$gray400'
});

// โ†“ โ†“ โ†“ โ†“ โ†“ โ†“

import { styled as _styled } from "../stitches.config.ts";

const Button = _styled("button", {
  backgroundColor: "$gray400"
});

Wonder if it has anything to do with the renaming of the styled import?

ColmanHumphrey

comment created time in 4 days

PR closed ben-rogerson/twin.macro

Update typo in README.md

hocus โ€“> focus

+1 -1

1 comment

1 changed file

GMaiolo

pr closed time in 5 days

push eventben-rogerson/twin.macro

Ben Rogerson

commit sha dca8e37861377422305f44435a9c427fda6916b8

Add slash alphas

view details

Ben Rogerson

commit sha e5bf8beb8e419eae6ed9d12cb11fc8ead3f017b8

Merge pull request #485 from ben-rogerson/feature/slash-alpha Add slash alpha

view details

push time in 6 days

delete branch ben-rogerson/twin.macro

delete branch : feature/slash-alpha

delete time in 6 days

PR merged ben-rogerson/twin.macro

Add slash alpha

This PR adds the slash alpha syntax which gives you a super quick way to set the alpha on colors.

import tw from "twin.macro";

// Use an opacity from your tailwind config by including it after the forward slash
tw`text-red-500/25`

// Use a custom alpha value by surrounding it with square brackets
tw`text-red-500/[.555]`

// Use a css variable using var within the square brackets
tw`text-red-500/[var(--myvar)]`

// โ†“ โ†“ โ†“ โ†“ โ†“ โ†“

({
  "color": "rgba(239, 68, 68, 0.25)"
});

({
  "color": "rgba(239, 68, 68, .555)"
});

({
  "color": "rgba(239, 68, 68, var(--myvar))"
});

The slash alpha feature works with these types of classes:

  • tw`placeholder-red-500/25`
  • tw`bg-red-500/25`
  • tw`from-red-500/25`
  • tw`via-red-500/25`
  • tw`to-red-500/25`
  • tw`border-red-500/25`
  • tw`ring-red-500/25`
  • tw`ring-offset-red-500/25`
  • tw`text-red-500/25`
  • tw`stroke-red-500/25` (with tailwind.config adjustment: stroke: theme => theme('colors'),
  • tw`fill-red-500/25` (with tailwind.config adjustment: fill: theme => theme('colors'),
+1201 -249

0 comment

28 changed files

ben-rogerson

pr closed time in 6 days

issue commentben-rogerson/twin.macro

Can't render mdx when twin installed in Storybook + NextJS

I got this working :tada: Remove the .babelrc file in the .storybook directory and add this to .storybook/main.js:

const path = require("path");
const fs = require("fs");

function getPackageDir(filepath) {
  let currDir = path.dirname(require.resolve(filepath));
  while (true) {
    if (fs.existsSync(path.join(currDir, "package.json"))) {
      return currDir;
    }
    const { dir, root } = path.parse(currDir);
    if (dir === root) {
      throw new Error(
        `Could not find package.json in the parent directories starting from ${filepath}.`
      );
    }
    currDir = dir;
  }
}

module.exports = {
  stories: [
    "../stories/**/*.stories.mdx",
    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
  ],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  webpackFinal: async (config) => {
    config.resolve.alias = {
      "@emotion/core": getPackageDir("@emotion/react"),
      "@emotion/styled": getPackageDir("@emotion/styled"),
    };
    return config;
  },
  babel: async (options) => {
    options.plugins.push(
      ...[
        [
          "@emotion/babel-plugin-jsx-pragmatic",
          {
            export: "jsx",
            import: "__cssprop",
            module: "@emotion/react",
          },
        ],
        [
          "@babel/plugin-transform-react-jsx",
          {
            pragma: "__cssprop",
          },
          "twin css prop",
        ],
      ]
    );
    return options;
  },
};

hamatoyogi

comment created time in 8 days

PR opened ben-rogerson/twin.macro

Add slash alpha

This PR adds the slash alpha syntax which gives you a super quick way to set the alpha on colors.

import tw from "twin.macro";

// Use an opacity from your tailwind config by including it after the forward slash
tw`text-red-500/25`

// Use a custom alpha value by surrounding it with square brackets
tw`text-red-500/[.555]`

// Use a css variable using var within the square brackets
tw`text-red-500/[var(--myvar)]`

// โ†“ โ†“ โ†“ โ†“ โ†“ โ†“

({
  "color": "rgba(239, 68, 68, 0.25)"
});

({
  "color": "rgba(239, 68, 68, .555)"
});

({
  "color": "rgba(239, 68, 68, var(--myvar))"
});

The slash alpha feature works with these types of classes:

  • tw`placeholder-red-500/25`
  • tw`bg-red-500/25`
  • tw`from-red-500/25`
  • tw`via-red-500/25`
  • tw`to-red-500/25`
  • tw`border-red-500/25`
  • tw`ring-red-500/25`
  • tw`ring-offset-red-500/25`
  • tw`text-red-500/25`
  • tw`stroke-red-500/25` (with tailwind.config adjustment: stroke: theme => theme('colors'),
  • tw`fill-red-500/25` (with tailwind.config adjustment: fill: theme => theme('colors'),
+1201 -249

0 comment

28 changed files

pr created time in 9 days

create barnchben-rogerson/twin.macro

branch : feature/slash-alpha

created branch time in 9 days

issue commentben-rogerson/twin.macro

Stitches config theme tokens need scale prefix token

Hey there

I took a look into this and yeah there's definitely an issue here.

Seems the token aware values aren't working unless importing directly from stitches (while calling their global({}) somewhere high up in the app):

import { styled } from '@stitches/react'

const Test = styled('div', {
  backgroundColor: '$gray400',
})

I think the CSS is looking for the variable called just --gray400, but the variable is --colours-gray400, so it doesn't find the variable.

This is what I found too. Initial thoughts are, that the transformations twin does confuses stitches enough to make it think we haven't used the token.

I can't look into this further right now as I've got a full schedule, but I'll see what's going on next time I'm working on stitches.

ColmanHumphrey

comment created time in 10 days

pull request commentben-rogerson/twin.macro

Update typo in README.md

Hocus is a custom class in twin, it's a combination of hover: and focus:.

  • Prefix with hocus: to style hover + focus at the same time

๐Ÿ‘

GMaiolo

comment created time in 11 days

issue commentben-rogerson/twin.examples

[next-styled-components] Type parameter ("T") defined but never used

Cheers for letting me know, I'll take a look into this ๐Ÿ‘

lguima

comment created time in 14 days

PR opened ben-rogerson/twin.macro

Add peer variants

This PR adds the peer-x variants which can be used like this:

// When the `peer` element is hovered/focussed, the second div gets a `display: block`
<div>
	<div className="peer"/><div tw="peer-hover:peer-focus:block />
</div>

Here's the conversion that takes place:

import tw from "twin.macro";

tw`peer-hover:peer-focus:block`;

// โ†“ โ†“ โ†“ โ†“ โ†“ โ†“

({
  ".peer:hover:focus ~ &": {
    "display": "block"
  }
});
+348 -36

0 comment

5 changed files

pr created time in 17 days

create barnchben-rogerson/twin.macro

branch : feature/peer-variants

created branch time in 17 days

issue commentben-rogerson/twin.macro

Can't render mdx when twin installed in Storybook + NextJS

Sorry, I had no luck on this.

I was able to get a "documentation only" story to show up in Storybook by removing the .storybook/.babelrc file but I wasn't able to get twin to work in there:

// stories/Introduction.stories.mdx
import { Meta } from "@storybook/addon-docs";
import "twin.macro";

<Meta title="Example/Introduction" />

<div tw="bg-black">Hi</div>

It looks like the custom babel implementation in .storybook/.babelrc trumps storybooks own babel file.

I'm in the middle of the tailwind update project right now so I'll have to circle back around to this afterwards - sorry

hamatoyogi

comment created time in 18 days

push eventben-rogerson/twin.macro

Ben Rogerson

commit sha f73f76eb9836337a212bde756d2e470041c8c061

Add marker variant

view details

push time in 20 days

PR opened ben-rogerson/twin.macro

Add content class by default

This PR adds the content class by default whenever a before: or after: pseudo variant is used.

import tw from "twin.macro";

tw`before:block`;


// โ†“ โ†“ โ†“ โ†“ โ†“ โ†“

({
  ":before": {
    "content": "\"\"",
    "display": "block"
  }
});
+68 -1

0 comment

6 changed files

pr created time in 20 days

create barnchben-rogerson/twin.macro

branch : feature/before-after-content

created branch time in 20 days

PR opened ben-rogerson/twin.macro

Add bag of variants

This pr adds the following variants featured in tailwindcss@2.2.2:

  • autofill:
  • in-range:
  • out-of-range:
  • first-letter:
  • first-line:
  • only:
  • empty:
  • selection:
+93 -14

0 comment

3 changed files

pr created time in 23 days

create barnchben-rogerson/twin.macro

branch : feature/variant-bag

created branch time in 23 days

pull request commentben-rogerson/twin.macro

Fix css function usage - styled-components

Thanks for checking up on this and providing a pr ๐Ÿ‘ The styled component guide is more of a generic guide (not just for the styled-components library) so I'll have to see what the story is with emotion/goober etc before merging this in. If the syntax differs in typescript, I'll probably split it into a couple of examples.

lguima

comment created time in 23 days

issue commentben-rogerson/twin.macro

Gastby FOUC when using GlobalStyles technique

Great to hear you found the issue!

Perhaps the twin example should be updated with the same strategy you're using now. It seems like much more of a "global" solution, and should automatically work on pages like 404.js. Might need to ponder on this a little more, cheers for bringing it up ๐Ÿป

mosesoak

comment created time in 24 days

fork ben-rogerson/stitches

CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.

https://stitches.dev

fork in 24 days

issue commentlightyen/vscode-tailwindcss-twin

Support for twin.macro 2.5.0

I'll make sure I cover all those cases in the next version ๐Ÿ‘

luknl

comment created time in 25 days

issue commentben-rogerson/twin.macro

Gastby FOUC when using GlobalStyles technique

Just tested again using the emotion+gatsby starter with throttling and I'm not seeing the issue in production.

How have you setup your GlobalStyles/globalStyles? Gatsby requires a common layout file containing the global styles which should wrap all of your pages.

If that doesn't help then perhaps you could supply a minimal bug reproduction repo?

mosesoak

comment created time in 25 days

issue closedben-rogerson/twin.macro

Error "Identifier '_styled' has already been declared" with styled-components + ts + next.js

Looks like the compiler duplicates the import statement of styled-components with the one created by the babel macro when mixing <div tw="..." /> usage with <code>tw.div``</code>.

This happens when using:

  • twin.macro
  • Nextjs
  • styled-components
  • Typescript

Error:

Module parse failed: Identifier '_styled' has already been declared (3:7)
File was processed with these loaders:
 * ./node_modules/@next/react-refresh-utils/loader.js
 * ./node_modules/next/dist/build/webpack/loaders/next-babel-loader.js
You may need an additional loader to handle the result of these loaders.
| import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
| import _styled from "styled-components";
> import _styled from "styled-components";

To reproduce:

  • With error: https://github.com/lopezjurip/twin.macro-nextjs-styled-ts-error
  • With commented lines to make it work: https://github.com/lopezjurip/twin.macro-nextjs-styled-ts-error/commit/507900c0e295bab5a5408cd8e98fbaffdda2ccf8

Maybe this is related to https://github.com/ben-rogerson/twin.macro/issues/192?

closed time in a month

lopezjurip

issue commentben-rogerson/twin.macro

Error "Identifier '_styled' has already been declared" with styled-components + ts + next.js

Okay, a patch is up in twin.macro@2.6.2 ๐Ÿ‘

lopezjurip

comment created time in a month

release ben-rogerson/twin.macro

2.6.2

released time in a month

created tagben-rogerson/twin.macro

tag2.6.2

๐Ÿฆนโ€โ™‚๏ธ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, stitches and goober) at build time.

created time in a month

push eventben-rogerson/twin.macro

Ben Rogerson

commit sha 4e9a3533189dd2db8feb2572a7667c44b347e6b5

Fix autoCssProp causing excess import

view details

Ben Rogerson

commit sha 898b50e1b1f7046b9fd507be9e78a7bba1f57d4b

2.6.2

view details

push time in a month

issue commentben-rogerson/twin.macro

Error "Identifier '_styled' has already been declared" with styled-components + ts + next.js

I see the error in the attached example (thanks @yy921010), I've had issues replicating the issue outside of next.js but I'll keep at it and release a patch once fixed.

lopezjurip

comment created time in a month