Open SGAMERyu opened 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>
<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 })) }
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.
css
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
pinceau transform code
add a computedStyle
pinceau transform code
Maybe we need to add a props.css judgment to the transform code?