Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is it possible to import other functions in <style lang="ts"> #83

Open
SGAMERyu opened this issue Apr 12, 2023 · 2 comments
Open

Is it possible to import other functions in <style lang="ts"> #83

SGAMERyu opened this issue Apr 12, 2023 · 2 comments

Comments

@SGAMERyu
Copy link
Contributor

example

<style scoped lang="ts">
import { test } from './test'

css({
  '.demo-button': {
    '--button-primary': (props) => `{color.${props.color}.600}`,
    '--button-secondary': (props) => `{color.${props.color}.500}`,
    display: 'inline-block',
    borderRadius: '{radii.xl}',
    transition: '{transition.all}',
    color: () => test(),
    boxShadow: `0 5px 0 {button.primary}, 0 12px 16px {color.dimmed}`,
    span: {
      display: 'inline-block',
      fontFamily: '{font.secondary}',
      borderRadius: '{radii.lg}',
      fontSize: '{fontSize.xl}',
      lineHeight: '{lead.none}',
      transition: '{transition.all}',
      backgroundColor: '{button.primary}',
      boxShadow: 'inset 0 -1px 1px {color.dark}',
    },
    '&:hover': {
      span: {
        backgroundColor: '{button.secondary}',
      }
    },
    '&:active': {
      span: {
        transform: 'translateY({space.4})'
      }
    }
  },
  variants: {
    size: {
      sm: {
        span: {
          padding: '{space.4} {space.6}',
        },
      },
      md: {
        span: {
          padding: '{space.6} {space.8}'
        },
      },
      lg: {
        span: {
          padding: '{space.8} {space.12}'
        },
      },
      xl: {
        span: {
          padding: '{space.12} {space.24}'
        },
      },
      options: {
        default: {
          initial: 'sm',
          md: 'md',
          lg: 'lg',
          xl: 'xl'
        },
      },
    },
  },
})
</style>

For component library scenarios, we may need to be compatible with various types of props and different components will reuse similar logic. We can try to introduce this approach to achieve logic reuse. The reason for not using utils is that utils must use dynamic imports, and its meaning is more about style reuse rather than logic judgment reuse.

@SGAMERyu
Copy link
Contributor Author

I have created a pull request for this, but there are still some issues that exist currently. Once I have refined the details, I will push it.

@Tahul
Copy link
Owner

Tahul commented Apr 13, 2023

Hey @SGAMERyu :)

Thank you so much for the pull request!

I would like to reach you out concerning your work on Pinceau, could we talk on Discord?

I think I sent you a message recently there!

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

No branches or pull requests

2 participants