Component using cssProp problem?
SGAMERyu opened this issue · 1 comments
SGAMERyu commented
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
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.