sveltejs / sveltejs/kit

`npm run package` stucks when there's a component with `<style lang="sass">`

Open
#13,159 3 comments 2 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

pkg:svelte-package
Dominant language
JavaScript
Stars
20.8k
Forks
2.3k
Avg merge
1d 16h
Merged PRs (30d)
156

Description

Describe the bug

I try to npm run package, and it stucks if there are components in /src/lib that contains <style lang="sass">:

PS D:\tools\ui> npm run package

> @anfr/ui@1.0.0 package
> svelte-kit sync && svelte-package && publint

If bundling, conditions should include development or production. If not bundling, conditions or NODE_ENV should include development or production. See https://www.npmjs.com/package/esm-env for tips on setting conditions in popular bundlers and runtimes.
src\lib -> dist

If I remove all the components with sass style tag, it gets built. For example, if we leave just Box.svelte and Text.svelte which don't have sass styles inside.

If there is a <style> tag (without lang attribute), it gets built.

// svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://svelte.dev/docs/kit/integrations
	// for more information about preprocessors
	preprocess: vitePreprocess(),

	kit: {
		// adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
		// If your environment is not supported, or you settled on a specific environment, switch out the adapter.
		// See https://svelte.dev/docs/kit/adapters for more information about adapters.
		adapter: adapter()
	}
};

export default config;
// vite.config.ts
import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
	plugins: [sveltekit()],
});

The package.json content:

{
	"name": "@anfr/ui",
	"version": "1.0.0",
	"description": "The Svelte component library for Anafro tools",
	"keywords": [
		"svelte",
		"svelte-components",
		"svelte-component-library",
		"ui",
		"ui-components",
		"anafro",
		"anafro-tools"
	],
	"homepage": "https://github.com/anafro/ui",
	"author": {
		"name": "Anatoly Frolov",
		"email": "anatolyfroloff@gmail.com",
		"url": "https://anafro.ru"
	},
	"scripts": {
		"dev": "vite dev",
		"build": "vite build && npm run package",
		"preview": "vite preview",
		"package": "svelte-kit sync && svelte-package && publint",
		"prepublishOnly": "npm run package",
		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
	},
	"files": [
		"dist",
		"!dist/**/*.test.*",
		"!dist/**/*.spec.*"
	],
	"sideEffects": [
		"**/*.css"
	],
	"svelte": "./dist/index.js",
	"types": "./dist/index.d.ts",
	"type": "module",
	"exports": {
		".": {
			"types": "./dist/index.d.ts",
			"svelte": "./dist/index.js"
		}
	},
	"peerDependencies": {
		"svelte": "^5.0.0"
	},
	"devDependencies": {
		"@sveltejs/adapter-auto": "^3.3.1",
		"@sveltejs/kit": "^2.11.1",
		"@sveltejs/package": "^2.3.7",
		"@sveltejs/vite-plugin-svelte": "^5.0.2",
		"publint": "^0.2.12",
		"sass-embedded": "^1.83.0",
		"svelte": "^5.12.0",
		"svelte-check": "^4.1.1",
		"typescript": "^5.7.2",
		"vite": "^6.0.3"
	},
	"dependencies": {
		"npm-check-updates": "^17.1.11",
		"svelte-preprocess-sass": "^2.0.1"
	}
}
Reproduction

https://github.com/anafro/ui

Logs
(none)
System Info
System:
    OS: Windows 11 10.0.22631
    CPU: (12) x64 Intel(R) Core(TM) i7-9750H CPU @ 2.60GHz
    Memory: 1.01 GB / 7.88 GB
  Binaries:
    Node: 20.16.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.8.1 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Chromium (127.0.2651.74)
    Internet Explorer: 11.0.22621.3527
  npmPackages:
    @sveltejs/adapter-auto: ^3.3.1 => 3.3.1
    @sveltejs/kit: ^2.11.1 => 2.11.1
    @sveltejs/package: ^2.3.7 => 2.3.7
    @sveltejs/vite-plugin-svelte: ^5.0.2 => 5.0.2
    svelte: ^5.12.0 => 5.12.0
    vite: ^6.0.3 => 6.0.3
Severity

blocking all usage of SvelteKit

Additional Information

(none)

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing npm run package in the linked repository with and without the <style lang="sass"> components, then inspect svelte.config.js, vite.config.ts, and package.json. The issue is complete when packaging finishes successfully while Sass-styled components remain present, without hanging.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, sass, typescript
Domain
build-system, tooling
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.