Update dependency twin.macro to v2.8.2 #101

renovate · 2021-06-12T08:01:10Z

This PR contains the following updates:

Package	Change	Age	Adoption	Passing	Confidence
twin.macro	`2.4.2` -> `2.8.2`

Release Notes

ben-rogerson/twin.macro

`v2.8.2`

Compare Source

This patch contains a few changes for those using the styled-components preset.

⚠️ Possible breaking changes

Remove auto css prop
The css prop can now be added with babel-plugin-styled-components - Setup info →
Tweak the styled import preset
The default import was changed from import "styled-components/macro" to import "styled-components" - More info →

Edit: Try the new rc with the latest changes npm i twin.macro@rc

`v2.8.1`

Compare Source

Allow font face values added via addBase (#563)

`v2.8.0`: The Arbitrary Variants release

Compare Source

🌟 New: Arbitrary Variants (#546)

The star feature of this release is the addition of a new variant that creates a custom selector for classes.

Usage is easy, just add the selector within square brackets and prefix it on any class (or round-bracketed set):

// Style child elements with the strong tag from the parent container
;<div tw="[strong]:text-red-500">
    <strong>I'm red</strong>
</div>

Before this feature, the styling above would need help from the css prop:

// Style child elements with the strong tag from the parent container
;<div css={{ strong: tw`text-red-500` }}>
    <strong>I'm red</strong>
</div>

There are a wide range of uses for Arbitrary Variants:

// Style the current element based on a theming/scoping className
;<body className="dark-theme">
    <div tw="[.dark-theme &]:(bg-black text-white)">I'm dark theme</div>
</body>

// Add custom height queries
;<div tw="[@&#8203;media (min-height: 800px)]:hidden">
    I'm shown only on smaller window heights
</div>

// Add custom group selectors
;<button className="group" disabled>
    <span tw="[.group:disabled &]:text-gray-500">I'm gray</span>
</button>

// Use custom at-rules like @&#8203;supports
;<div tw="[@&#8203;supports (display: grid)]:grid">I'm grid</div>

// Style the current element based on a dynamic className
;const Component = ({ isLarge }) => <div className={isLarge && 'is-large'} tw="text-base [&.is-large]:text-lg">...</div>

I hope you enjoy using this powerful feature!

🐛 Bugfixes

Allow dot notation components to be styled with twin (eg: <Menu.Item tw="block">) (#534)
Add array value types for the screen import (#555) - thanks @mutewinter
Avoid bg-color classes from trumping bg-opacity-x classes (#552)
Add helpful feedback when a peer class is used as a tailwind class (#551)
Convert all numeric values to strings (#540)
Fix issue with css variables declared in :root using addBase in plugins (#521)
Enable variants to be used with the container class (#518)
Restrict debug mode to development (#497) - thanks @u3u

`v2.7.0`: The JIT release

Compare Source

This release brings the same special features we all love from the Tailwind JIT release! (v2.2.0-2.2.7) 🎉🌮
As this is the same feature set as Tailwind, you can read some more information about each feature in the Tailwind release notes.

Larger features

A bunch of new variants

peer-*: variants for styling sibling elements (PR)
first-letter: and first-line: pseudo-elements (PR)
selection: for styling text selections (PR)
marker: for styling list markers (PR)
and more: autofill:, in-range:, out-of-range:, first-letter:, first-line:, only:, empty:, selection:, marker:, rtl: and ltr: (PR)

Check the variant config for a full list →

Shorthand color opacity syntax (PR)

Add a slash opacity value to set the opacity on any color classes:

tw`bg-black/50`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "backgroundColor": "rgba(0, 0, 0, 0.5)"
});

This slash value comes from your opacity setting in your tailwind config.
For custom slash opacity values, use square brackets:

tw`bg-black/[.22]`
tw`bg-black/[--my-opacity-variable]`

Extended arbitrary value support (PR)

The "dash square bracket" syntax adds custom values on just about every dynamic class (like bg-[xxx], not block):

tw`col-start-[73] placeholder-[#aabbcc] object-[50%]`

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "gridColumnStart": "73",
  "::placeholder": {
    "--tw-placeholder-opacity": "1",
    "color": "rgba(170, 187, 204, var(--tw-placeholder-opacity))"
  },
  "objectPosition": "50%"
});

This feature almost replace twin's "short css" feature but short css is still great for more obscure css as you can specify custom properties too:

tw`--my-var[red]`
tw`-webkit-gradient[gradient here]`

Per-side border color utilities (PR)

You can now specify border color and border width on a specific border direction:

// Colors
tw`border-t-gray-50`;
tw`border-b-red-500`;

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "--tw-border-opacity": "1",
  "borderTopColor": "rgba(249, 250, 251, var(--tw-border-opacity))"
});
({
  "--tw-border-opacity": "1",
  "borderBottomColor": "rgba(239, 68, 68, var(--tw-border-opacity))"
});

// Widths
tw`border-t-4`;
tw`border-b-4`;

// ↓ ↓ ↓ ↓ ↓ ↓

({
  "borderTopWidth": "4px"
});
({
  "borderBottomWidth": "4px"
});

Smaller features

before: and after: variants now automatically add content: '' (PR)
No more requirement for the content class every time we use pseudo classes
Simplified transform and filter composition
Now there's no need to add transform or filter to make your actual transform or filter classes work (Possible breaking change - check Adams PR notes)
Add new transform-cpu class
This class uses translateX and translateY instead of translate3d which is added by transform-gpu
Background origin utilities (Thanks @theonesean) (PR)
Classes for controlling how an element's background is positioned relative to borders, padding, and content - Docs
Caret color utilities (PR)
Specify the color of the carat in textareas/inputs/contenteditables (eg: tw`caret-red-500` )

Support

If you’re kicking ass with twin - especially if you’re in a team - then please consider becoming a sponsor.
It will really help out with the continued development of twin - cheers! 🍻

`v2.6.2`

Compare Source

Patched regression with styled-components and the autoCssProp which caused excess imports (#241)

`v2.6.1`

Compare Source

Fixes release 2.6.0: There was a finger slip on the last release 🤦

`v2.5.0`: Arbitrary values, screen import and important prefix

Compare Source

New: Arbitrary values (#447)

Twin now supports the same arbitrary values syntax popularized by Tailwind’s jit ("Just-in-Time") mode.

tw`top-[calc(100vh - 2rem)]`

// ↓ ↓ ↓ ↓ ↓ ↓

;({ top: 'calc(100vh - 2rem)' })

This is a great way to add once-off values that don’t need to be in your tailwind config.

New: Important prefix (#449)

Also from Tailwind JIT, is the bang ! prefix to add important styles:

tw`!block`;

// ↓ ↓ ↓ ↓ ↓ ↓

;({ "display": "block !important" })

Twin will continue to support a bang at the end of the class too - so you've got a couple of options.

See the pr for more info →

New: Screen import (#408)

The screen import creates media queries for custom css that sync with your tailwind config screen values (sm, md, lg, etc).

Usage with the css prop

import tw, { screen, css } from 'twin.macro'

const styles = [
  screen`sm`({ display: 'block', ...tw`inline` }),
]

<div css={styles} />

Usage with styled components

import tw, { styled, screen, css } from 'twin.macro'

const Component = styled.div(() => [
  screen`sm`({ display: 'block', ...tw`inline` }),
])

<Component />

Bugfixes

Fix values issues on [divide/space]-[x-/y-]reverse (#359)

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

renovate · 2023-03-24T13:28:39Z

Edited/Blocked Notification

Renovate will not automatically rebase this PR, because it does not recognize the last commit author and assumes somebody else may have edited the PR.

You can manually request rebase by checking the rebase/retry box above.

⚠️ Warning: custom changes will be lost.

renovate bot force-pushed the renovate/twin.macro-2.x branch from 72fb20f to 3f4de98 Compare July 3, 2021 06:42

renovate bot changed the title ~~Update dependency twin.macro to v2.5.0~~ Update dependency twin.macro to v2.6.1 Jul 3, 2021

renovate bot force-pushed the renovate/twin.macro-2.x branch from 3f4de98 to f924f6c Compare July 8, 2021 09:33

renovate bot changed the title ~~Update dependency twin.macro to v2.6.1~~ Update dependency twin.macro to v2.6.2 Jul 8, 2021

renovate bot force-pushed the renovate/twin.macro-2.x branch from f924f6c to c6d7901 Compare October 18, 2021 23:31

renovate bot changed the title ~~Update dependency twin.macro to v2.6.2~~ Update dependency twin.macro to v2.8.0 Oct 18, 2021

Update dependency twin.macro to v2.8.2

74d83ea

renovate bot force-pushed the renovate/twin.macro-2.x branch from c6d7901 to 74d83ea Compare March 7, 2022 15:18

renovate bot changed the title ~~Update dependency twin.macro to v2.8.0~~ Update dependency twin.macro to v2.8.2 Mar 7, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update dependency twin.macro to v2.8.2 #101

Update dependency twin.macro to v2.8.2 #101

renovate bot commented Jun 12, 2021 •

edited

renovate bot commented Mar 24, 2023 •

edited

Update dependency twin.macro to v2.8.2 #101

Are you sure you want to change the base?

Update dependency twin.macro to v2.8.2 #101

Conversation

renovate bot commented Jun 12, 2021 • edited

Release Notes

v2.8.2

v2.8.1

v2.8.0: The Arbitrary Variants release

🌟 New: Arbitrary Variants (#​546)

🐛 Bugfixes

v2.7.0: The JIT release

Larger features

A bunch of new variants

Shorthand color opacity syntax (PR)

Extended arbitrary value support (PR)

Per-side border color utilities (PR)

Smaller features

Support

v2.6.2

v2.6.1

v2.5.0: Arbitrary values, screen import and important prefix

New: Arbitrary values (#​447)

New: Important prefix (#​449)

New: Screen import (#​408)

Bugfixes

Configuration

renovate bot commented Mar 24, 2023 • edited

Edited/Blocked Notification

renovate bot commented Jun 12, 2021 •

edited

`v2.8.2`

`v2.8.1`

`v2.8.0`: The Arbitrary Variants release

🌟 New: Arbitrary Variants (#546)

`v2.7.0`: The JIT release

`v2.6.2`

`v2.6.1`

`v2.5.0`: Arbitrary values, screen import and important prefix

New: Arbitrary values (#447)

New: Important prefix (#449)

New: Screen import (#408)

renovate bot commented Mar 24, 2023 •

edited