Skip to content

Conversation

@philipp-spiess
Copy link
Member

This PR moves support for opacity modifies from the CSS theme() function into the plugin theme() implementation, this will allow plugins to use this, too:

let plugin = plugin(function ({ addUtilities, theme }) {
    addUtilities({
      '.percentage': {
        color: theme('colors.red.500 / 50%'),
      },
      '.fraction': {
        color: theme('colors.red.500 / 0.5'),
      },
      '.variable': {
        color: theme('colors.red.500 / var(--opacity)'),
      },
    })
  })
}

There's a small behavioral change for the CSS theme() function. Since tuples are resolved by default for the CSS theme() function only, these will no longer have opacity applied to their first values. This is probably fine given the reduced complexity as I don't expect the first values of tuples to be colors and the fix would mean we would have to parse the modifier in different places.

@philipp-spiess philipp-spiess force-pushed the fix/plugin-theme-fn-opacity-modifier branch from 5d84d73 to 73368bd Compare September 5, 2024 08:27
@philipp-spiess philipp-spiess merged commit 8f8803d into next Sep 5, 2024
@philipp-spiess philipp-spiess deleted the fix/plugin-theme-fn-opacity-modifier branch September 5, 2024 10:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants