diff options
Diffstat (limited to 'packages')
7 files changed, 72 insertions, 11 deletions
diff --git a/packages/astro/test/0-css.test.js b/packages/astro/test/0-css.test.js index 734e16445..06b9c0d14 100644 --- a/packages/astro/test/0-css.test.js +++ b/packages/astro/test/0-css.test.js @@ -238,8 +238,7 @@ describe('Styles SSR', function () { expect(bundledCSS).to.match(new RegExp(`.svelte-css.${scopedClass}[^{]*{font-family:"Comic Sans MS"`)); }); - // TODO: fix Sass in Svelte - it.skip('<style lang="sass">', async () => { + it('<style lang="sass">', async () => { const $ = index$; const el = $('#svelte-sass'); const classes = el.attr('class').split(' '); @@ -252,8 +251,7 @@ describe('Styles SSR', function () { expect(bundledCSS).to.match(new RegExp(`.svelte-sass.${scopedClass}[^{]*{font-family:"Comic Sans MS"`)); }); - // TODO: fix Sass in Svelte - it.skip('<style lang="scss">', async () => { + it('<style lang="scss">', async () => { const $ = index$; const el = $('#svelte-scss'); const classes = el.attr('class').split(' '); diff --git a/packages/astro/test/fixtures/0-css/src/pages/index.astro b/packages/astro/test/fixtures/0-css/src/pages/index.astro index 599632065..85269eb21 100644 --- a/packages/astro/test/fixtures/0-css/src/pages/index.astro +++ b/packages/astro/test/fixtures/0-css/src/pages/index.astro @@ -15,8 +15,8 @@ import VueSass from '../components/VueSass.vue'; import VueScoped from '../components/VueScoped.vue'; import VueScss from '../components/VueScss.vue'; import SvelteCSS from '../components/SvelteCSS.svelte'; -// import SvelteSass from '../components/SvelteSass.svelte'; -// import SvelteScss from '../components/SvelteScss.svelte'; +import SvelteSass from '../components/SvelteSass.svelte'; +import SvelteScss from '../components/SvelteScss.svelte'; import ReactDynamic from '../components/ReactDynamic.jsx'; --- @@ -55,8 +55,8 @@ import ReactDynamic from '../components/ReactDynamic.jsx'; <VueScoped /> <VueScss /> <SvelteCSS /> - <!-- <SvelteSass /> - <SvelteScss /> --> + <SvelteSass /> + <SvelteScss /> <ReactDynamic client:load /> </div> </body> diff --git a/packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte b/packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte new file mode 100644 index 000000000..d74ae47ec --- /dev/null +++ b/packages/astro/test/fixtures/svelte-component/src/components/TypeScript.svelte @@ -0,0 +1,5 @@ +<script lang="ts"> + export let message: string; +</script> + +<div id="svelte-ts">{ message }</div> diff --git a/packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro b/packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro new file mode 100644 index 000000000..229ec763b --- /dev/null +++ b/packages/astro/test/fixtures/svelte-component/src/pages/typescript.astro @@ -0,0 +1,25 @@ +--- +import TypeScript from '../components/TypeScript.svelte' +--- +<html lang="en"> + <head> + <meta charset="utf-8" /> + <meta name="viewport" content="width=device-width" /> + <title>Svelte TypeScript</title> + <style> + html, + body { + font-family: system-ui; + margin: 0; + } + body { + padding: 2rem; + } + </style> + </head> + <body> + <main> + <TypeScript message="Hello, TypeScript" /> + </main> + </body> +</html> diff --git a/packages/astro/test/svelte-component.test.js b/packages/astro/test/svelte-component.test.js new file mode 100644 index 000000000..0d79be3de --- /dev/null +++ b/packages/astro/test/svelte-component.test.js @@ -0,0 +1,22 @@ +import { expect } from 'chai'; +import cheerio from 'cheerio'; +import { loadFixture } from './test-utils.js'; + +describe('Svelte component', () => { + let fixture; + + before(async () => { + fixture = await loadFixture({ + projectRoot: './fixtures/svelte-component/', + renderers: ['@astrojs/renderer-svelte'], + }); + await fixture.build(); + }); + + it('Works with TypeScript', async () => { + const html = await fixture.readFile('/typescript/index.html'); + const $ = cheerio.load(html); + + expect($('#svelte-ts').text()).to.equal('Hello, TypeScript'); + }); +}); diff --git a/packages/renderers/renderer-svelte/index.js b/packages/renderers/renderer-svelte/index.js index 502ba6bfa..93ecfcdfc 100644 --- a/packages/renderers/renderer-svelte/index.js +++ b/packages/renderers/renderer-svelte/index.js @@ -1,10 +1,11 @@ import { svelte } from '@sveltejs/vite-plugin-svelte'; +import preprocess from 'svelte-preprocess'; export default { name: '@astrojs/renderer-svelte', client: './client.js', server: './server.js', - viteConfig() { + viteConfig({ mode }) { return { optimizeDeps: { include: ['@astrojs/renderer-svelte/client.js', 'svelte', 'svelte/internal'], @@ -13,7 +14,16 @@ export default { plugins: [ svelte({ emitCss: true, - compilerOptions: { hydratable: true }, + compilerOptions: { dev: mode === 'development', hydratable: true }, + preprocess: [ + preprocess({ + less: true, + sass: { renderSync: true }, + scss: { renderSync: true }, + stylus: true, + typescript: true, + }), + ], }), ], }; diff --git a/packages/renderers/renderer-svelte/package.json b/packages/renderers/renderer-svelte/package.json index b4e51374b..2b676577c 100644 --- a/packages/renderers/renderer-svelte/package.json +++ b/packages/renderers/renderer-svelte/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "@sveltejs/vite-plugin-svelte": "^1.0.0-next.30", - "svelte": "^3.44.1" + "svelte": "^3.44.2", + "svelte-preprocess": "^4.9.8" }, "engines": { "node": "^12.20.0 || ^14.13.1 || >=16.0.0" |