Tahul / pinceau

🖌️ Make your <script> lighter and your <style> smarter
https://pinceau.dev
MIT License
684 stars 19 forks source link

Component using cssProp problem? #46

Open SGAMERyu opened 1 year ago

SGAMERyu commented 1 year ago

When a component has a cssProp property in its props but no variants or computedStyle, the code for the pinceau transform does not include the usePinceauRuntime method for example no variants and computedStyle component

<script lang="ts" setup>
import { cssProp } from 'pinceau/runtime'

defineProps({
  css: cssProp,
})
</script>

<template>
  <button class="test-button">
    CSS
  </button>
</template>

<style lang="ts">
css({
  '.test-button': {
    color: 'red'
  }
})
</style>

pinceau transform code

<script lang="ts" setup>
import { cssProp } from 'pinceau/runtime'

defineProps({
  css: cssProp,
})
</script>

<template>
  <button class="test-button">
    CSS
  </button>
</template>

<style lang="postcss" transformed>
.test-button{color:red;}
</style>

add a computedStyle

<script lang="ts" setup>
import { cssProp } from 'pinceau/runtime'

defineProps({
  css: cssProp,
})
</script>

<template>
  <button class="test-button">
    CSS
  </button>
</template>

<style lang="ts">
css({
  '.test-button': {
    color: 'red',
    background: (props) => 'red',
  }
})
</style>

pinceau transform code

<script lang="ts" setup>
const _2K2_background = computed(() => ((props = __$pProps, utils = __$pUtils) => 'red')())

import { ref } from 'vue'

import { getCurrentInstance } from 'vue'

import { computed } from 'vue'

import { reactive } from 'vue'

import { usePinceauRuntime, utils as __$pUtils } from 'pinceau/runtime'

import { cssProp } from 'pinceau/runtime'

const __$pProps = defineProps({
  css: cssProp,
})

const { $pinceau } = usePinceauRuntime(computed(() => __$pProps),undefined,ref({ _2K2_background })) 
</script>

<template>
  <button class="test-button" :class="[$pinceau]">
    CSS
  </button>
</template>

<style lang="postcss" transformed>
.test-button{color:red;background:var(---2k2-background);}
</style>

Maybe we need to add a props.css judgment to the transform code?

if (_$pProps.css) {
   const { $pinceau } = usePinceauRuntime(computed(() => __$pProps),undefined,ref({ _2K2_background })) 
}
Tahul commented 1 year ago

Oh!

You right about this, I need to fix that out! 🤣

Current workaround would be to create empty variants object in css, that would enable runtime styles transforms for this component.