Drop the sass dependency and ship plain CSS

.changeset/plain-css.md

@@ -0,0 +1,7 @@
+---
+"dropzone": patch
+---
+
+Drop the `sass` dependency. The stylesheets are plain CSS now, and `dist/dropzone.css` and `dist/basic.css` are unchanged in what they do: the output was compared declaration by declaration, and every difference is a value-level equivalence the minifier applies, such as `padding: 20px 20px` collapsing to `padding: 20px`.
+
+This only affects you if you were importing `dropzone/src/dropzone.scss` directly rather than the built CSS. Import `dropzone/src/dropzone.css` instead, or the compiled `dropzone/dist/dropzone.css`.

.gitignore

@@ -2,7 +2,6 @@ build
 components
 node_modules
 .DS_Store
-.sass-cache
 _site
 _config.yaml
 .idea

packages/dropzone/package.json

@@ -50,10 +50,9 @@
   "scripts": {
     "watch": "vite build --watch",
     "build": "vite build && vite build --config vite.config.global.mjs && pnpm run css && pnpm run build:types",
-    "css": "sass src/:dist/ --style compressed",
+    "css": "lightningcss --minify --sourcemap --browserslist src/dropzone.css -o dist/dropzone.css && lightningcss --minify --sourcemap --browserslist src/basic.css -o dist/basic.css",
     "build:types": "tsc",
     "typecheck": "tsc --noEmit",
-    "watch-css": "sass src/:dist/ --watch --style compressed",
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
     "test:watch": "vitest",
@@ -63,11 +62,17 @@
   "devDependencies": {
     "@vitest/browser-playwright": "^4.1.11",
     "@vitest/coverage-v8": "^4.1.11",
-    "sass": "^1.33.0",
+    "lightningcss-cli": "^1.33.0",
     "typescript": "^6.0.3",
     "vite": "^8.2.2",
     "vitest": "^4.1.11"
   },
+  "browserslist": [
+    "chrome >= 58",
+    "firefox >= 54",
+    "safari >= 11",
+    "edge >= 16"
+  ],
   "engines": {
     "node": ">=20.19.0"
   },

packages/dropzone/src/basic.css

@@ -0,0 +1,49 @@
+/* The minimal stylesheet: layout only, no theming. */
+
+.dropzone,
+.dropzone * {
+  box-sizing: border-box;
+}
+
+.dropzone {
+  position: relative;
+}
+.dropzone .dz-preview {
+  position: relative;
+  display: inline-block;
+  width: 120px;
+  margin: 0.5em;
+}
+.dropzone .dz-preview .dz-progress {
+  display: block;
+  height: 15px;
+  border: 1px solid #aaa;
+}
+.dropzone .dz-preview .dz-progress .dz-upload {
+  display: block;
+  height: 100%;
+  width: 0;
+  background: green;
+}
+.dropzone .dz-preview .dz-error-message {
+  color: red;
+  display: none;
+}
+.dropzone .dz-preview.dz-error .dz-error-message,
+.dropzone .dz-preview.dz-error .dz-error-mark {
+  display: block;
+}
+.dropzone .dz-preview.dz-success .dz-success-mark {
+  display: block;
+}
+.dropzone .dz-preview .dz-error-mark,
+.dropzone .dz-preview .dz-success-mark {
+  position: absolute;
+  display: none;
+  left: 30px;
+  top: 30px;
+  width: 54px;
+  height: 58px;
+  left: 50%;
+  margin-left: -27px;
+}