scss-prettier 4.0.4 → 4.0.8

package/LICENSE.txt

@@ -0,0 +1,27 @@
+Proprietary License
+
+Copyright (c) 2015.12.06-2026 Daekyung Yoo. All rights reserved.
+
+This software and associated documentation files (the "Software") are the
+exclusive property of Daekyung Yoo.
+
+1. GRANT OF USE: You are granted a non-exclusive, non-transferable license
+   to use the Software solely through official distribution channels
+   (Visual Studio Code Marketplace, npm registry, and the author's servers)
+   for your personal or internal business purposes.
+
+2. RESTRICTIONS: You may NOT, without prior written permission from the
+   copyright holder:
+   - Copy, modify, merge, or create derivative works of the Software
+   - Distribute, sublicense, sell, or transfer the Software
+   - Reverse engineer, decompile, or disassemble the Software
+   - Remove or alter any proprietary notices or labels
+
+3. TERMINATION: This license is effective until terminated. It will
+   terminate automatically if you fail to comply with any term of this
+   license.
+
+4. DISCLAIMER: THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
+   KIND, EXPRESS OR IMPLIED. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE
+   LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY ARISING FROM THE USE
+   OF THE SOFTWARE.

package/README.md

@@ -0,0 +1,257 @@
+[한국어](README.ko.md)
+
+# SCSS Prettier
+
+**Professional CSS/SCSS/LESS formatter with property sorting, inline & expanded modes, and smart cascade protection.**
+
+The only formatter that combines **property sorting + inline formatting** in a single tool. No more juggling Prettier + Stylelint + postcss-sorting.
+
+---
+
+## Why SCSS Prettier?
+
+| Feature | Prettier | Stylelint+Order | CSScomb | **SCSS Prettier** |
+|---------|:--------:|:---------------:|:-------:|:-----------------:|
+| Property Sorting | No | Plugin | Dead | **Built-in** |
+| Inline Mode | No | No | Yes | **Yes (default)** |
+| Expanded Mode | Yes | N/A | Yes | **Yes** |
+| Zero Config | Yes | No | No | **Yes** |
+| SCSS Deep Support | Good | Good | Outdated | **Excellent** |
+| Format on Save | Yes | Partial | Dead | **Yes** |
+| Cascade Protection | No | No | No | **Yes** |
+| Active Maintenance | Yes | Yes | No | **Yes** |
+
+---
+
+## Quick Start
+
+**Install** → **Save** → **Done.**
+
+```scss
+/* Before - messy properties */
+.box { color: red; padding: 10px; background: blue; display: flex; margin: 5px; }
+
+/* After - Ctrl+S */
+.box { display: flex; padding: 10px; margin: 5px; background: blue; color: red; }
+```
+
+Properties are automatically sorted: **position → display → width → padding → margin → background → color**
+
+---
+
+## Installation
+
+### VS Code Marketplace
+1. Open Extensions (`Ctrl+Shift+X`)
+2. Search "SCSS Prettier"
+3. Click Install
+
+### Command Line
+```bash
+code --install-extension Drangon-Knight.scss-prettier
+```
+
+### npm CLI
+```bash
+npm install -g scss-prettier
+scss-prettier --write src/**/*.scss
+```
+
+---
+
+## Format Modes
+
+### Inline (Default)
+Properties on one line — compact and scroll-efficient.
+
+```scss
+.card {
+  display: flex; padding: 20px; margin: 10px; background: white; color: #333;
+}
+```
+
+### Expanded
+Each property on its own line — like Prettier.
+
+```scss
+.card {
+  display: flex;
+  padding: 20px;
+  margin: 10px;
+  background: white;
+  color: #333;
+}
+```
+
+### Minify
+Everything compressed.
+
+```scss
+.card{display:flex;padding:20px;margin:10px;background:white;color:#333;}
+```
+
+Set globally: `"scssPrettier.formatMode": "expanded"`
+
+Override per-rule with `///expand` or `///minify` directives.
+
+---
+
+## Sort Presets
+
+| Preset | Order |
+|--------|-------|
+| `default` | Layout → Box Model → Typography → Visual → Animation |
+| `alphabetical` | A-Z |
+| `concentric` | Outside → Inside (position → margin → border → padding → dimensions) |
+| `smacss` | Display → Position → Box → Spacing → Border → Typography → Visual |
+| `custom` | Your own array via `propsPriority` |
+
+```json
+{
+  "scssPrettier.sortPreset": "concentric"
+}
+```
+
+---
+
+## Configuration
+
+### VS Code Settings
+
+| Setting | Default | Description |
+|---------|---------|-------------|
+| `scssPrettier.enable` | `true` | Enable/disable formatter |
+| `scssPrettier.formatMode` | `"inline"` | `inline` / `expanded` / `minify` |
+| `scssPrettier.sortPreset` | `"default"` | Sort order preset |
+| `scssPrettier.indentSize` | `2` | Spaces per indent level |
+| `scssPrettier.propsPriority` | `null` | Custom sort order array |
+| `scssPrettier.groupSeparator` | `false` | Blank lines between groups (expanded) |
+| `scssPrettier.shorthandCascade` | `true` | Protect shorthand/longhand order |
+| `scssPrettier.removeEmptyRules` | `false` | Remove empty rule blocks |
+| `scssPrettier.duplicateProperties` | `"ignore"` | `ignore` / `warn` / `remove` |
+| `scssPrettier.exclude` | `[]` | File patterns to skip |
+| `scssPrettier.debugJson` | `false` | Export AST to JSON |
+
+### Workspace Config (`.scssPrettier.json`)
+
+```json
+{
+  "propsPriority": ["position", "display", "width", "height", "padding", "margin"]
+}
+```
+
+Priority: `.scssPrettier.json` > VS Code settings > Default preset
+
+---
+
+## Features
+
+### Selector Formatting
+```scss
+/* Before */
+h1,h2,h3,h4{margin:0;padding:0;}
+
+/* After */
+h1,
+h2,
+h3,
+h4 {
+  padding: 0; margin: 0;
+}
+```
+
+### Sass Map Formatting
+```scss
+/* Before */
+$colors:(primary:#007bff,secondary:#6c757d,success:#28a745);
+
+/* After */
+$colors: (
+  primary: #007bff,
+  secondary: #6c757d,
+  success: #28a745
+);
+```
+
+### CSS Variable Preservation
+Custom properties (`--*`) maintain their authored order in any selector.
+
+### Smart Cascade Protection
+```scss
+/* Shorthand always before longhand — cascade safe */
+.box { margin: 10px; margin-left: 0; }
+```
+
+### Vendor Prefix Grouping
+```scss
+/* Grouped together */
+.box { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }
+```
+
+### Directives
+```scss
+///minify
+.utility { display: flex; width: 100%; }
+/* Output: .utility{display:flex;width:100%;} */
+
+///expand
+.detailed { display: flex; width: 100%; }
+/* Output: Each property on its own line */
+```
+
+### Deep SCSS Support
+- `$variables` and `#{interpolation}` preservation
+- `@include`, `@extend`, `@use`, `@forward` handling
+- `@keyframes` proper formatting
+- `@font-face` auto-expand
+- Nested rules and `&` selectors
+
+---
+
+## CLI Usage
+
+```bash
+# Format and write back
+scss-prettier --write src/**/*.scss
+
+# Check formatting (CI/CD)
+scss-prettier --check "styles/**/*.css"
+
+# Custom options
+scss-prettier --mode expanded --preset concentric --indent 4 src/main.scss
+
+# With config file
+scss-prettier --write --config .scssPrettier.json "**/*.scss"
+```
+
+### Git Hooks (lint-staged)
+```json
+{
+  "lint-staged": {
+    "*.{scss,css,less}": "scss-prettier --write"
+  }
+}
+```
+
+---
+
+## Keyboard Shortcuts
+
+| Shortcut | Action |
+|----------|--------|
+| `Ctrl+S` | Format on save (automatic) |
+| `Ctrl+Alt+F` | Format current document |
+| `Shift+Alt+F` | Format document (VS Code standard) |
+| Status bar click | Toggle enable/disable |
+
+---
+
+## Links
+
+- [VS Code Marketplace](https://marketplace.visualstudio.com/items?itemName=Drangon-Knight.scss-prettier)
+- [GitHub](https://github.com/Yoodaekyung/SCSS-Prettier)
+- [npm CLI](https://www.npmjs.com/package/scss-prettier)
+
+---
+
+**Created by DragonKnight (Daekyung Yoo)**