Open
Description
Great tool and fantastic work. The JS / TS build toolchain can always use something clean like this.
I can't tell if this is an issue with tsdown, the config I'm using or just my own misunderstanding.
I have a .vue file with the following style tag
<style scoped lang="scss">
@use 'sass:map';
$variants: (
'light-blue': (
background: #fff,
border: rgb(var(--v-theme-neutral-200)),
text: rgb(var(--v-theme-neutral-600)),
title: rgb(var(--v-theme-neutral-600)),
iconBg: rgb(var(--v-theme-blue-50)),
iconColor: rgb(var(--v-theme-blue-300)),
dividerColor: rgb(var(--v-theme-neutral-200)),
), // more variants later...
);
$cardSpacing: 20px;
.base-card {
width: 100%;
min-height: 200px;
border-radius: 10px;
box-shadow: none;
.v-card-title,
.v-card-text,
.v-card-actions {
padding: $cardSpacing;
}
.v-card-title {
.card-icon {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
}
}
::v-deep(.v-divider) {
margin: 0 $cardSpacing;
}
@each $name, $map in $variants {
&.variant--#{$name} {
background: map.get($map, background);
border: 1px solid map.get($map, border);
color: map.get($map, text);
.v-card-title {
color: map.get($map, title);
.card-icon {
background: map.get($map, iconBg);
/* overrides the color for v-icon */
::v-deep(svg),
::v-deep(.v-icon) {
fill: map.get($map, iconColor);
}
}
}
.v-divider {
color: map.get($map, dividerColor);
}
}
}
}
</style>
This is my tsdown.config
import { defineConfig } from 'tsdown'
import { Vuetify3Resolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/rollup'
import Vue from 'unplugin-vue/rolldown'
export default defineConfig([
{
entry: ['./src/plugins/index.ts', './src/components/index.ts'],
platform: 'browser',
copy: [
{
from: 'src/assets/*',
to: 'dist/assets',
},
],
plugins: [Components({ resolvers: [Vuetify3Resolver()] }), Vue()],
dts: {
vue: true,
},
},
])
When I try and compile the .vue file I get:
[plugin unplugin-vue] [redacted]src/components/RpCard.vue?vue&type=style&index=0&scoped=7e80c5d2&lang.scss:83:18
CssSyntaxError: [redacted]src/components/RpCard.vue:44:18: Unknown word $name
at Input.error ([redacted]node_modules/postcss/lib/input.js:135:16)
at Parser.unknownWord ([redacted]node_modules/postcss/lib/parser.js:595:22)
at Parser.other ([redacted]node_modules/postcss/lib/parser.js:437:12)
at Parser.parse ([redacted]node_modules/postcss/lib/parser.js:472:16)
at parse ([redacted]node_modules/postcss/lib/parse.js:11:12)
at new LazyResult ([redacted]node_modules/postcss/lib/lazy-result.js:165:16)
at Processor.process ([redacted]node_modules/postcss/lib/processor.js:53:14)
at doCompileStyle ([redacted]node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19511:36)
at Object.compileStyleAsync ([redacted]node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:19431:10)
at transformStyle (file://[redacted]node_modules/unplugin-vue/dist/core-6WmY9pT9.js:1322:40)
at normalizeErrors (file://[redacted]node_modules/rolldown/dist/shared/src-PO2pehsE.mjs:2247:18)
at handleOutputErrors (file://[redacted]node_modules/rolldown/dist/shared/src-PO2pehsE.mjs:4407:34)
at transformToRollupOutput (file://[redacted]node_modules/rolldown/dist/shared/src-PO2pehsE.mjs:4401:2)
at RolldownBuild.write (file://[redacted]node_modules/rolldown/dist/shared/src-PO2pehsE.mjs:5642:11)
at async build (file://[redacted]node_modules/rolldown/dist/shared/src-PO2pehsE.mjs:5687:22)
at async file://[redacted]node_modules/tsdown/dist/index.js:724:5
at async Promise.all (index 0)
at async rebuild (file://[redacted]node_modules/tsdown/dist/index.js:717:3)
at async buildSingle (file://[redacted]node_modules/tsdown/dist/index.js:708:2)
at async Promise.all (index 0) {
errors: [Getter/Setter]
I'm guessing this is not a bug just my misunderstanding something. I've tried adding in rollup sass plugins but those don't seem to work.
Any help would be appreciated