Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v5.0.0-rc.1 #48

Merged
merged 25 commits into from
Apr 1, 2021
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions .vscode/settings.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,5 @@
},
"search.exclude": {
"out": true // set this to false to include "out" folder in search results
},
"liveServer.settings.root": "/_site"
}
}
84 changes: 73 additions & 11 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -16,19 +16,80 @@ Types of changes
- Fixed for any bug fixes.
- Security in case of vulnerabilities.
- Breaking changes for break in new revision
- Other for noteable changes that do not
- Other for notable changes that do not
-->

>:warning: v5 release candidates (tagged `rc`) may have breaking changes from one release to the next. All changes, breaking or otherwise, will be displayed here. These changes will then be condensed into a single list for the official v5 release

# Changelog
All notable changes to this project will be documented in this file.

## [5.0.0-rc.1] - 2021-04-01

### Breaking changes
- Not dependant on `ritwickdey.LiveServer` as there was no actual code dependencies in the extension ([#23](https://github.com/glenn2223/vscode-live-sass-compiler/issues/23)). If you require the Live Server extension, it can still be installed from [here](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)
- Changes to the `showOutputWindow` setting, **now called `showOutputWindowOn`** ([#26](https://github.com/glenn2223/vscode-live-sass-compiler/issues/26))
- The system now acts as more of a logger rather than a mass of information
- Accepted values are now `Trace`, `Debug`, `Information`, `Warning` or `Error`
- The default is now `Warning`
- Changes to [`autoprefix` settings](https://github.com/glenn2223/vscode-live-sass-compiler/blob/master/docs/settings.md#livesasscompilesettingsautoprefix) ([#41](https://github.com/glenn2223/vscode-live-sass-compiler/issues/41))
- The default is now `defaults` *(as per Autoprefixer recommendations)*
- The setting no longer accepts `string[] OR null`, but a `string[] OR boolean`
- Rather than `null`, you now use `false`
- No longer supporting `brace expansion` glob patterns ([#27](https://github.com/glenn2223/vscode-live-sass-compiler/issues/27))
- This is because the underlying glob pattern matching has moved from `minimatch` to `picomatch`. A full feature comparison can be found [here](https://github.com/micromatch/picomatch#library-comparisons)
- Only works on VS Code v1.52 and newer ([#34](https://github.com/glenn2223/vscode-live-sass-compiler/issues/34))
- Settings have been updated for continuity and to better aid extension performance ([#30](https://github.com/glenn2223/vscode-live-sass-compiler/issues/30))
- `formats[].savePath` must start with a path separator but not end in one
- `includeItems` must start with a path separator and end in either `.sass` or `.scss` (for performance purposes)
- `forceBaseDirectory` must start with a path separator but not end in one

### Changed
- Now using `fdir` with `picomatch` instead of `glob` and `minimatch`
- Speed improvements, the most significant of which will be on larger projects
- Greater support for glob patterns

### Added
- When `autoprefix` is true we will search for either:
- a `.browserlistsrc` file or,
- `"browserslist": [ string[] ]` in a `package.json` file

*(This allows you to use the same setting across your solution, rather than duplicating content)*
- Increased range of glob pattern support
- Full support for `extglobs`
- Added support for `posix brackets`
- Added support for `regex syntax`
- *Full comparison can be found [here](https://github.com/micromatch/picomatch#library-comparisons)*
- When a change is detected the initial output now includes a date and time stamp - See [this comment](https://github.com/glenn2223/vscode-live-sass-compiler/issues/26#issuecomment-788133683) on [#26](https://github.com/glenn2223/vscode-live-sass-compiler/issues/26)

### Fixed
- Fixed: the `formats[].savePathSegmentKeys` setting would allow non string values in the array
- Fixed: the `excludeList` setting would allow non string values in the array
- Fixed: the `includeItems` setting would allow non string values in the array
- Fixed: the `autoprefix` setting would allow non string values in the array
- Fixed: some setting descriptions have been updated for better clarity/readability


### Updated
- `autoprefixer` from `10.2.4` to `10.2.5`
- Fixed `:` support in `@supports`
- `postcss` from `8.2.4` to `8.2.9`
- Small fixes *(nothing user facing)*
- `sass` from `1.32.5` to `1.32.8`
- Allow `@forward...with` to take arguments that have a `!default` flag without a trailing comma.
- Improve the performance of unitless and single-unit numbers.
- Other small changes *(nothing user facing)*
- Various dev dependency updates *(nothing user facing)*

---

## [4.4.1] - 2021-01-31

### Fixed
- Fixed: `forceBaseDirectory` has full support in multi-root workspaces
- Fixed: the path in `forceBaseDirectory` is now checked to see if it exists. If not a user friendly message is displayed in the output
- Fixed: an error when checking files would still compile what it could. This would hide the error message from the user
- Incorrect patern matches in settings show user friendly messages rather than "does not match pattern"
- Incorrect pattern matches in settings show user friendly messages rather than "does not match pattern"

## [4.4.0] - 2021-01-31

Expand All @@ -41,28 +102,28 @@ All notable changes to this project will be documented in this file.
### Updates
- `autoprefixer` from `10.2.1` to `10.2.4`
- Small bug fixes (nothing user facing)
- Various dev-dependancy updates
- Various dev-dependency updates

### Fixed
- Part fix: Slow file handling #22. Full fix in v5 as some small breaking changes
- The glob pattern matcher is causing bottlenecks, reducing load calls with small patch. However moving away from glob is the end-game (which will be happening in v5)
- Fix: `compileCurrentSass` shows wrong message on fail
- When you run `compileCurrentSass` and it would fail (for whatever reason) it would cause the output to show `Success` rather than `Error` (just the output was wrong, nothing else)
- Fix: Status bar inconsistancies during display changes
- Fix: Status bar inconsistencies during display changes
- When command bar is changing between visuals it was possible to cause the status and the shown message to be out of sync (due to clicks while setTimeouts are pending), the setup also meant you couldn't sync them again (unless you did a manual compile command)


## [4.3.4] - 2021-01-21

### Fixed
- Fixed [#18](https://github.com/glenn2223/vscode-live-sass-compiler/issues/18): On launch there is no output, nor any `Live SASS Compile` ouput selection, when the setting `watchOnLaunch` is `true`
- Fixed [#18](https://github.com/glenn2223/vscode-live-sass-compiler/issues/18): On launch there is no output, nor any `Live SASS Compile` output selection, when the setting `watchOnLaunch` is `true`
- Fixed: Autoprefixer warning saying `undefined` for file path when `generateMap` is `false`
- Fixed: Autoprefixer `grid: "autoplace"` was forced
- If [this feature](https://github.com/postcss/autoprefixer#does-autoprefixer-polyfill-grid-layout-for-ie) is wanted then add `/* autoprefixer grid: autoplace */` to the start of your file

### Updates
- `sass` from `1.32.4` to `1.32.5`
- **Potentially breaking bug fix:** When using @for with numbers that have units, the iteration variable now matches the unit of the initial number. This matches the behavior of Ruby Sass and LibSass.
- **Potentially breaking bug fix:** When using @for with numbers that have units, the iteration variable now matches the unit of the initial number. This matches the behaviour of Ruby Sass and LibSass.
- Others: see [sass release notes](https://github.com/sass/dart-sass/releases/tag/1.32.5)

## [4.3.3] - 2021-01-18
Expand Down Expand Up @@ -109,7 +170,7 @@ All notable changes to this project will be documented in this file.
- Small optimisation to some underlying async operations

### Other
- Small bit of general tidying, adjustment to README, new dev dependancy for @.types/glob
- Small bit of general tidying, adjustment to README, new dev dependency for @.types/glob

## [4.2.0] - 2020-12-22

Expand Down Expand Up @@ -138,7 +199,7 @@ All notable changes to this project will be documented in this file.
* When `true` it will automatically compile all Sass files when watching is started. *Default value is `true`*

### Changed
- Updated the issue report command text from `Create an 'Unexpected Error' issue` to `Report an issue` to simpilfy and be more inline with the normality.
- Updated the issue report command text from `Create an 'Unexpected Error' issue` to `Report an issue` to simplify and be more inline with the normality.
- Now using webpack to minify and speed up the extension

### Other
Expand Down Expand Up @@ -166,7 +227,7 @@ All notable changes to this project will be documented in this file.
* Errors are logged in a workspace folder
* New command to help log issues for unhandled errors `liveSass.command.createIssue`

<br><hr><br>
---

| Version | Date | Changelog|
| ------- | -------- | ------ |
Expand Down Expand Up @@ -202,7 +263,8 @@ All notable changes to this project will be documented in this file.



[Unreleased]: https://github.com/glenn2223/vscode-live-sass-compiler/compare/v4.4.1...HEAD
[Unreleased]: https://github.com/glenn2223/vscode-live-sass-compiler/compare/v5.0.0-rc.1...HEAD
[5.0.0-rc.1]: https://github.com/glenn2223/vscode-live-sass-compiler/compare/v4.4.1...v5.0.0-rc.1
[4.4.1]: https://github.com/glenn2223/vscode-live-sass-compiler/compare/v4.4.0...v4.4.1
[4.4.0]: https://github.com/glenn2223/vscode-live-sass-compiler/compare/v4.3.4...v4.4.0
[4.3.4]: https://github.com/glenn2223/vscode-live-sass-compiler/compare/v4.3.3...v4.3.4
Expand All @@ -213,4 +275,4 @@ All notable changes to this project will be documented in this file.
[4.2.0]: https://github.com/glenn2223/vscode-live-sass-compiler/compare/v4.1.0...v4.2.0
[4.1.0]: https://github.com/glenn2223/vscode-live-sass-compiler/compare/v4.0.0...v4.1.0
[4.0.0]: https://github.com/glenn2223/vscode-live-sass-compiler/compare/v3.0.0...v4.0.0
[3.0.0]: https://github.com/ritwickdey/vscode-live-sass-compiler/compare/v2.2.1...v3.0.0
[3.0.0]: https://github.com/ritwickdey/vscode-live-sass-compiler/compare/v2.2.1...v3.0.0
33 changes: 8 additions & 25 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
>:warning: v5 release candidates (tagged `rc`) may have breaking changes from one release to the next. All changes, breaking or otherwise, will be displayed in the [changelog](CHANGELOG.md). These changes will then be condensed into a single list for the official v5 release

# Live Sass Compiler
[![VSCode Marketplace Badge](https://img.shields.io/vscode-marketplace/v/glenn2223.live-sass.svg?label=VSCode%20Marketplace&style=flat-square)](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass) [![Total Install](https://img.shields.io/vscode-marketplace/d/glenn2223.live-sass.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass) [![Average Rating Badge](https://img.shields.io/vscode-marketplace/r/glenn2223.live-sass.svg?style=flat-square)](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass) [![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square)](https://github.com/glenn2223/vscode-live-sass-compiler/)

**_Like it? [Please leave a review](https://marketplace.visualstudio.com/items?itemName=glenn2223.live-sass#review-details). Found something wrong? [Report an issue](https://github.com/glenn2223/vscode-live-sass-compiler/issues/new)._**

A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at real-time with live browser reload.

![App Preview](./images/Screenshot/AnimatedPreview.gif)
A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CSS files at real-time.

## Usage/Shortcuts
1. Click to `Watch Sass` from the status bar to turn on the live compilation and then click to `Stop Watching Sass` from the status bar to turn off live compilation .
Expand All @@ -20,37 +20,20 @@ A VSCode Extension that help you to compile/transpile your SASS/SCSS files to CS
* Customizable exported CSS style (`expanded`, `compressed`).
* Customizable extension name (`.css` or `.min.css`).
* Quick status bar control.
* Exclude specific folders by settings.
* Live reload to browser (Dependency on `Live Server` extension).
* Autoprefix support (See settings section)
* Exclude specific folders by settings.
* Autoprefix support (See [settings section](https://github.com/glenn2223/vscode-live-sass-compiler/blob/master/docs/settings.md#livesasscompilesettingsautoprefix))

## Installation
Open VSCode Editor and Press `ctrl+P`, type `ext install glenn2223.live-sass`.

## Settings
All settings are now listed in the [Settings Docs](./docs/settings.md).
## Settings & Commands
All settings are now listed in the [Settings & Commands Docs](./docs/settings.md).

## FAQ
*All FAQs are now listed in the [FAQ Docs](./docs/faqs.md)*

## Extension Dependency
This extension has dependency on _[Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer)_ extension for live browser reload.

## What's new ?

**Breaking changes in v4:**
- Output options are now only `expanded` and `compressed`
- Only works on VS Code v1.50 and newer

### 4.4.1 - 2021-01-31

### Fixed
- Fixed: `forceBaseDirectory` has full support in multi-root workspaces
- Fixed: the path in `forceBaseDirectory` is now checked to see if it exists. If not a user friendly message is displayed in the output
- Fixed: an error when checking files would still compile what it could. This would hide the error message from the user
- Incorrect patern matches in settings show user friendly messages rather than "does not match pattern"

*See the full changelog [here](CHANGELOG.md).*
See the full changelog [here](CHANGELOG.md).

## LICENSE
This extension is licensed under the [MIT License](LICENSE)
Expand Down
97 changes: 82 additions & 15 deletions docs/faqs.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,14 @@

## FAQ (For Beginners)
# FAQs

### How to config the settings in my project?
### Q. How do I change the settings?

Create a `.vscode` folder in the root of project. Inside of `.vscode` folder create a JSON file named `settings.json`.
Inside of the `settings.json`, type following key-value pairs. By the way you'll get intellisense.
<details>
<summary>Answer</summary>

Create a `.vscode` folder in the root of your project. Inside the `.vscode` folder create a JSON file named `settings.json`.

Open the `settings.json` file and type following key-value pairs. *By the way, you'll get intellisense!*

```json
{
Expand All @@ -26,23 +30,86 @@ Inside of the `settings.json`, type following key-value pairs. By the way you'll
],
"liveSassCompile.settings.generateMap": true,
"liveSassCompile.settings.autoprefix": [
"> 0.5%",
"last 2 versions",
"Firefox ESR",
"not dead"
"defaults"
]
}
```

### My files aren't compiling
</details>

---

### Q. Why isn't it starting?

<details>
<summary>Answer</summary>

If the extension doesn't activate (show up in the status bar), then it's most likely that you don't have any `.scss` or`.sass` files in your project.

Just create a SASS file, or open one, and the extension will activate

</details>

---

### Q. Why isn't it compiling my files?

<details>
<summary>Answers</summary>

A common issue is the glob patterns used in the include/exclude settings, please [check your glob pattern](https://globster.xyz/) first.
1. Open the command pallete (`F1` or the `(Ctrl/Cmd) + P` keys)
A common issue is incorrectly configured glob patterns used in the include/exclude settings. You can check your glob patterns [here](https://globster.xyz/) (*be aware that this site doesn't match all [picomatch expressions](https://github.com/micromatch/picomatch#library-comparisons)*).

Still having problems? Try the below steps
1. Open the command palette by pressing <kbd>F1</kbd> or (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd>) + <kbd>Shift</kbd> + <kbd>P</kbd>
1. Run `liveSass.command.debugInclusion`, this will open the output and tell you if the file is included based on your settings
1. If you can't resolve the issue with the information present then move on below
1. Next run `liveSass.command.debugFileList`
1. Try to resolve your issue using the returned information in the output
1. Still no luck?
- Run `liveSass.command.createIssue`
- Information is automatically placed in your clipboard and your browser will open a new window
- Please make sure to paste the information, which is now in your clipboard, into the location stated. Also include the information returned in the `liveSass.command.debugFileList` command

Still no luck?
1. Run `liveSass.command.createIssue`
1. Information is automatically placed in your clipboard and your browser will open a new window
1. Please make sure to paste the information, which is now in your clipboard, into the location stated. Also include the information returned by the `liveSass.command.debugFileList` command from step 4 above

</details>

---

### Q. I'm migrating from Ritwick Dey's extension, what do I need to know?

<details>
<summary>Answer</summary>

Well, **lots of things**.

Firstly, welcome! I'm glad you're here!

Here's some of the most important changes:
- We now require VS Code version 1.52
- We are no longer dependant on `ritwickdey.LiveServer`. You can manually add this package to VS Code, if you need it
- Some settings have been changed
- `formats[].format` only accepts `compressed` or `expanded`
- `autoprefix`:
- The default is `defaults`
- `null` is no longer accepted, use `false` instead
- When `true` we will find a `.browserslistrc` file or `browserslist` in your `package.json`. No more duplicating settings!
- `showOutputWindow` is now `showOutputWindowOn` and uses log values (`Debug`, `Error`, etc.). It's default log level is `Warning`
- Some settings are new!
- `savePathSegmentKeys` and `savePathReplaceSegmentsWith`: when used in combination you can choose a to replace folder segments in the save path
- `watchOnLaunch`: state whether you want to watch files upon launch
- `compileOnWatch`: state if files should be compiled upon watching
- `forceBaseDirectory`: state the base directory of all you SASS files. Aids in reducing wasted resources while searching for files

Here are some things you probably won't care about as much
- The extension has had a massive overhaul. Performance optimisation, and new features!
- We abandoned `glob` (the package, not the patterns) and we now use `fdir` which is blazingly fast
- New commands!
- `liveSass.command.compileCurrentSass`: perform a one-time compilation of the current SASS file
- `liveSass.command.createIssue`: create an issue in GutHub. If an unexpected error occurred then this information is readily available to paste into the new issue
- `liveSass.command.debugInclusion`: check if the current SASS file will be included, based on your settings
- `liveSass.command.debugFileList`: get a full list of files that are included and excluded
- We support multi-root/multi-folder workspaces
- Map files now link back to the correct line after `autoprefixer` has been applied
- Clicking the status bar icon while in the `Success` or `Error` state will show the output window

</details>
Loading