Skip to content

Commit

Permalink
Add full support for Media Queries 4 (#1822)
Browse files Browse the repository at this point in the history
Closes #1728
  • Loading branch information
nex3 authored Nov 1, 2022
1 parent 558640b commit 44d6bb6
Show file tree
Hide file tree
Showing 5 changed files with 76 additions and 42 deletions.
30 changes: 29 additions & 1 deletion CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,22 +1,50 @@
## 1.55.1
## 1.56.0

* **Potentially breaking change:** To match the CSS spec, SassScript expressions
beginning with `not` or `(` are no longer supported at the beginning of
parenthesized sections of media queries. For example,

```scss
@media (width >= 500px) and (not (grid))
```

will now be emitted unchanged, instead of producing

```scss
@media (width >= 500px) and (false)
```

See [the Sass website](https://sass-lang.com/d/media-logic) for details.

* **Potentially breaking bug fix:** Angle units like `rad` or `turn` are now
properly converted to equivalent `deg` values for `hsl()`, `hsla()`,
`adjust-hue()`, `color.adjust()`, and `color.change()`.

See [the Sass website](https://sass-lang.com/d/function-units#hue) for
details.

* Fix indentation for selectors that span multiple lines in a `@media` query.

* Emit a deprecation warning when passing `$alpha` values with units to
`color.adjust()` or `color.change()`. This will be an error in Dart Sass
2.0.0.

See [the Sass website](https://sass-lang.com/d/function-units#alpha) for
details.

* Emit a deprecation warning when passing a `$weight` value with no units or
with units other than `%` to `color.mix()`. This will be an error in Dart Sass
2.0.0.

See [the Sass website](https://sass-lang.com/d/function-units#weight) for
details.

* Emit a deprecation warning when passing `$n` values with units to `list.nth()`
or `list.set-nth()`. This will be an error in Dart Sass 2.0.0.

See [the Sass website](https://sass-lang.com/d/function-units#index) for
details.

* Improve existing deprecation warnings to wrap `/`-as-division suggestions in
`calc()` expressions.

Expand Down
78 changes: 40 additions & 38 deletions lib/src/parse/stylesheet.dart
Original file line number Diff line number Diff line change
Expand Up @@ -3594,52 +3594,54 @@ abstract class StylesheetParser extends Parser {
buffer.writeCharCode($lparen);
whitespace();

var needsParenDeprecation = scanner.peekChar() == $lparen;
var needsNotDeprecation = matchesIdentifier("not");

var expression = _expressionUntilComparison();
if (needsParenDeprecation || needsNotDeprecation) {
logger.warn(
'Starting a @media query with "${needsParenDeprecation ? '(' : 'not'}" '
"is deprecated because it conflicts with official CSS syntax.\n"
"\n"
"To preserve existing behavior: #{$expression}\n"
'To migrate to new behavior: #{"$expression"}\n'
"\n"
"For details, see https://sass-lang.com/d/media-logic",
span: expression.span,
deprecation: true);
}

buffer.add(expression);
if (scanner.scanChar($colon)) {
if (scanner.peekChar() == $lparen) {
_mediaInParens(buffer);
whitespace();
buffer.writeCharCode($colon);
buffer.writeCharCode($space);
buffer.add(_expression());
if (scanIdentifier("and")) {
buffer.write(" and ");
expectWhitespace();
_mediaLogicSequence(buffer, "and");
} else if (scanIdentifier("or")) {
buffer.write(" or ");
expectWhitespace();
_mediaLogicSequence(buffer, "or");
}
} else if (scanIdentifier("not")) {
buffer.write("not ");
expectWhitespace();
_mediaOrInterp(buffer);
} else {
var next = scanner.peekChar();
if (next == $langle || next == $rangle || next == $equal) {
buffer.writeCharCode($space);
buffer.writeCharCode(scanner.readChar());
if ((next == $langle || next == $rangle) && scanner.scanChar($equal)) {
buffer.writeCharCode($equal);
}
buffer.writeCharCode($space);

buffer.add(_expressionUntilComparison());
if (scanner.scanChar($colon)) {
whitespace();
buffer.add(_expressionUntilComparison());

if ((next == $langle || next == $rangle) &&
// dart-lang/sdk#45356
scanner.scanChar(next!)) {
buffer.writeCharCode($colon);
buffer.writeCharCode($space);
buffer.add(_expression());
} else {
var next = scanner.peekChar();
if (next == $langle || next == $rangle || next == $equal) {
buffer.writeCharCode($space);
buffer.writeCharCode(next);
if (scanner.scanChar($equal)) buffer.writeCharCode($equal);
buffer.writeCharCode(scanner.readChar());
if ((next == $langle || next == $rangle) &&
scanner.scanChar($equal)) {
buffer.writeCharCode($equal);
}
buffer.writeCharCode($space);

whitespace();
buffer.add(_expressionUntilComparison());

if ((next == $langle || next == $rangle) &&
// dart-lang/sdk#45356
scanner.scanChar(next!)) {
buffer.writeCharCode($space);
buffer.writeCharCode(next);
if (scanner.scanChar($equal)) buffer.writeCharCode($equal);
buffer.writeCharCode($space);

whitespace();
buffer.add(_expressionUntilComparison());
}
}
}
}
Expand Down
4 changes: 4 additions & 0 deletions pkg/sass_api/CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
## 4.1.0

* No user-visible changes.

## 4.0.0

### Dart API
Expand Down
4 changes: 2 additions & 2 deletions pkg/sass_api/pubspec.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,15 @@ name: sass_api
# Note: Every time we add a new Sass AST node, we need to bump the *major*
# version because it's a breaking change for anyone who's implementing the
# visitor interface(s).
version: 4.0.0
version: 4.1.0
description: Additional APIs for Dart Sass.
homepage: https://github.com/sass/dart-sass

environment:
sdk: ">=2.17.0 <3.0.0"

dependencies:
sass: 1.55.0
sass: 1.56.0

dev_dependencies:
dartdoc: ^5.0.0
Expand Down
2 changes: 1 addition & 1 deletion pubspec.yaml
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
name: sass
version: 1.55.1-dev
version: 1.56.0
description: A Sass implementation in Dart.
homepage: https://github.com/sass/dart-sass

Expand Down

0 comments on commit 44d6bb6

Please sign in to comment.