dart-lang / csslib Goto Github PK

View Code? Open in Web Editor NEW

92.0 40.0 37.0 913 KB

A library for parsing CSS.

Home Page: https://pub.dev/packages/csslib

License: BSD 3-Clause "New" or "Revised" License

Dart 100.00%

csslib's Introduction

A Dart CSS parser.

Usage

Parsing CSS is easy!

import 'package:csslib/parser.dart';

void main() {
  var stylesheet = parse(
      '.foo { color: red; left: 20px; top: 20px; width: 100px; height:200px }');
  print(stylesheet.toDebugString());
}

You can pass a String or List<int> to parse.

csslib's People

Contributors

Stargazers

Watchers

csslib's Issues

can not add several font sources within src of font-face

error on line 11, column 424: expected :, but found =
src: url(font-path("web/assets/fonts/fontawesome-webfont.eot?v=4.7.0#iefix")) format("embedded-opentype"), url(font-path("web/assets/fonts/fontawesome-webfont.woff2?v=4.7.0")) format("woff2"), url(font-path("web/assets/fonts/fontawesome-webfont.woff?v=4.7.0")) format("woff"), url(font-path("web/assets/fonts/fontawesome-webfont.ttf?v=4.7.0")) format("truetype"), url(font-path("web/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular")) format("svg");

Add support for `@viewport`

csslib declares many variables as dynamic that should not be

Here are some examples:

csslib/lib/parser.dart

Line 272 in 6056c29

Token _next({unicodeRange: false}) {

csslib/lib/parser.dart

Line 316 in 6056c29

var message;

csslib/lib/parser.dart

Line 484 in 6056c29

processDirective() {

Can not add ms related stuff

error on line 116, column 72: premature end of file unknown CSS

-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";

KeyFrameDirective.clone passes wrong arguments

The second parameter is name, not the blocks. Again, this is masked by dynamic parameters.

https://github.com/dart-lang/csslib/blob/6056c29d81572d1d61c9b6dc1eabf2a33b94abd2/lib/src/tree.dart#L738..L747

Dart 2 runtime failures when running tests

type 'List<TreeNode>' is not a subtype of type 'List<RuleSet>' where...
type 'List<TreeNode>' is not a subtype of type 'List<RuleSet>' where
  List is from dart:core
  TreeNode is from package:csslib/visitor.dart
  List is from dart:core
  RuleSet is from package:csslib/visitor.dart
 ../..csslib/lib/src/analyzer.dart 461:52  TopLevelIncludes.visitIncludeDirective
  ../..csslib/lib/src/tree.dart 897:41      IncludeDirective.visit
  package:csslib/visitor.dart 127:19                                       Visitor._visitNodeList
  package:csslib/visitor.dart 134:5                                        Visitor.visitStyleSheet
  ../../csslib/lib/src/analyzer.dart 452:11  TopLevelIncludes.visitStyleSheet
  package:csslib/visitor.dart 131:33                                       Visitor.visitTree
  ../.csslib/lib/src/analyzer.dart 446:7   new TopLevelIncludes
  ../../csslib/lib/src/analyzer.dart 438:9   TopLevelIncludes.expand
  ../../csslib/lib/src/analyzer.dart 37:42   Analyzer.run.<fn>
  dart:core                                                                List.forEach
  ../..csslib/lib/src/analyzer.dart 36:18   Analyzer.run
  package:csslib/parser.dart 89:39                                         analyze
  package:csslib/parser.dart 75:3                                          compile
  ../..csslib/test/testing.dart 49:5        compileCss
  ../../csslib/test/mixin_test.dart 14:20    compileAndValidate
  ../../csslib/test/mixin_test.dart 29:3     topLevelMixin

Write initial cross browser library once mixin are supported.

<img src="https://avatars.githubusercontent.com/u/5479?v=3" align="left" width="96" height="96"hspace="10"> Issue by sethladd
Originally opened as dart-lang/sdk#16708

no desc

csslib release

Hi there!

Could we release this package, please?
In AngularDart a few tests were recently added related to :global-context. These tests are not currently passing, as can be seen here. I think csslib with this commit would make it to work.

CC: @kevmoo

Thanks!

pretty print convert colors to hexa while regular print does not

Actually I would have expected the opposite. Let's take the example:

body { color: red; }

I would have expected compiled (non pretty)

body { color: #f00; }

and pretty print compiled to

body {
  color: red;
}

However currently it is compiled to (non pretty)

body { color: red; }

and pretty print compiled to

body {
  color: #f00;
}

I would have expected the color name in pretty print (likely debug mode) and the hex value in non-pretty-print mode

Unit test here

incorrect text spans for declarations containing calc() expression

This:

.foo { height: calc(100% - 55px); }

Generates incomplete declaration span:

height: calc(

how to parse inline css style

It seems not working under the inline-style situation.
I only need to parse a list of declarations, which is for the contents of a style attribute.

get with untar failed

Hello, I tried installing this package and got an untar error, the full log is shown bellow. It seems like it didn't tarlling correctly.

pub --trace cache add csslib
Downloading csslib 0.13.2+2...
gzip: (stdin): trailing garbage ignored
tar: Child returned status 1
tar: Error is not recoverable: exiting now
Failed to extract .tar.gz stream to /Users/vegertar/.pub-cache/_temp/dirULRh5v (exit code 2).
package:pub/src/io.dart 912                extractTarGz.<async>
===== asynchronous gap ===========================
dart:async                                 _Completer.completeError
package:pub/src/io.dart 922                extractTarGz.<async>
===== asynchronous gap ===========================
dart:async                                 _asyncThenWrapperHelper
package:pub/src/io.dart                    extractTarGz
package:pub/src/source/hosted.dart 272     BoundHostedSource._download.<async>
dart:async                                 _SyncCompleter.complete
package:pub/src/http.dart 78               _PubHttpClient.send.<async>
dart:async                                 _SyncCompleter.complete
package:http/src/io_client.dart 63         IOClient.send.<async>
===== asynchronous gap ===========================
dart:async                                 _asyncThenWrapperHelper
package:pub/src/source/hosted.dart         BoundHostedSource._download
package:pub/src/source/hosted.dart 193     BoundHostedSource.downloadToSystemCache.<async>
===== asynchronous gap ===========================
dart:async                                 Future.Future.microtask
package:pub/src/source/hosted.dart         BoundHostedSource.downloadToSystemCache
package:pub/src/command/cache_add.dart 77  CacheAddCommand.run.<async>.downloadVersion.<async>
===== asynchronous gap ===========================
package:pub                                CacheAddCommand.run.<async>.downloadVersion
package:pub/src/command/cache_add.dart 87  CacheAddCommand.run.<async>
dart:async                                 _SyncCompleter.complete
package:pub/src/source/hosted.dart 142     BoundHostedSource.doGetVersions.<async>
===== asynchronous gap ===========================
dart:async                                 _asyncThenWrapperHelper
package:pub/src/command/cache_add.dart     CacheAddCommand.run
package:args/command_runner.dart 177       CommandRunner.runCommand.<fn>
dart:async                                 Future.Future.sync
package:args/command_runner.dart 130       CommandRunner.runCommand
package:pub/src/command_runner.dart 128    PubCommandRunner.runCommand.<async>.<fn>
dart:async                                 Future.Future.sync
package:pub/src/utils.dart 72              captureErrors.<fn>
package:stack_trace                        Chain.capture
package:pub/src/utils.dart 86              captureErrors
package:pub/src/command_runner.dart 128    PubCommandRunner.runCommand.<async>
dart:async                                 _SyncCompleter.complete
package:pub/src/command_runner.dart 214    PubCommandRunner._validatePlatform.<async>
---- Log transcript ----
FINE: Pub 1.20.1
IO  : Get versions from https://pub.dartlang.org/api/packages/csslib.
FINE: HTTP GET https://pub.dartlang.org/api/packages/csslib
    | Accept: application/vnd.pub.v2+json
    | user-agent: Dart pub 1.20.1
FINE: HTTP response 200 OK for GET https://pub.dartlang.org/api/packages/csslib
    | took 0:00:02.711756
    | x-cloud-trace-context: 9a6cf382c0b509e88df949703d2e43f6
    | date: Fri, 02 Dec 2016 05:36:55 GMT
    | content-length: 40880
    | content-type: application/json
    | x-frame-options: SAMEORIGIN
    | x-xss-protection: 1; mode=block
    | x-content-type-options: nosniff
    | server: Google Frontend
IO  : Get package from https://pub.dartlang.org/packages/csslib/versions/0.13.2+2.tar.gz.
MSG : Downloading csslib 0.13.2+2...
IO  : Created temp directory /Users/vegertar/.pub-cache/_temp/dirULRh5v
FINE: HTTP GET https://pub.dartlang.org/packages/csslib/versions/0.13.2+2.tar.gz
    | user-agent: Dart pub 1.20.1
FINE: HTTP response 200 OK for GET https://pub.dartlang.org/packages/csslib/versions/0.13.2+2.tar.gz
    | took 0:00:00.486334
    | x-goog-storage-class: STANDARD
    | cache-control: public, max-age=3600
    | last-modified: Thu, 17 Nov 2016 19:14:49 GMT
    | date: Fri, 02 Dec 2016 05:27:08 GMT
    | x-goog-stored-content-length: 102400
    | age: 588
    | x-guploader-uploadid: AEnB2Uq2TzCkFXrSvwV_k3qLNyFB2Waz_d3xe46XfYXERBaOmaESiVgW8pd0af1wBNuCsSI34zFfGxL9FPPMbvC31iJQcUsZOw
    | x-goog-hash: crc32c=FhAwAQ==,md5=jQ9uTPnHBn85S1jOcMXniQ==
    | content-type: application/octet-stream
    | x-goog-generation: 1479410089843000
    | server: UploadServer
    | alt-svc: quic=":443"; ma=2592000; v="36,35,34"
    | accept-ranges: bytes
    | content-length: 102400
    | x-goog-stored-content-encoding: identity
    | etag: "8d0f6e4cf9c7067f394b58ce70c5e789"
    | x-goog-metageneration: 2
    | expires: Fri, 02 Dec 2016 06:27:08 GMT
FINE: Extracting .tar.gz stream to /Users/vegertar/.pub-cache/_temp/dirULRh5v.
IO  : Spawning "tar --extract --gunzip --directory /Users/vegertar/.pub-cache/_temp/dirULRh5v" in /Users/vegertar/Google Drive/src/github.com/vegertar/tide/dart/.
ERR : Failed to extract .tar.gz stream to /Users/vegertar/.pub-cache/_temp/dirULRh5v (exit code 2).
FINE: Exception type: _Exception
ERR : package:pub/src/io.dart 912                extractTarGz.<async>
    | ===== asynchronous gap ===========================
    | dart:async                                 _Completer.completeError
    | package:pub/src/io.dart 922                extractTarGz.<async>
    | ===== asynchronous gap ===========================
    | dart:async                                 _asyncThenWrapperHelper
    | package:pub/src/io.dart                    extractTarGz
    | package:pub/src/source/hosted.dart 272     BoundHostedSource._download.<async>
    | dart:async                                 _SyncCompleter.complete
    | package:pub/src/http.dart 78               _PubHttpClient.send.<async>
    | dart:async                                 _SyncCompleter.complete
    | package:http/src/io_client.dart 63         IOClient.send.<async>
    | ===== asynchronous gap ===========================
    | dart:async                                 _asyncThenWrapperHelper
    | package:pub/src/source/hosted.dart         BoundHostedSource._download
    | package:pub/src/source/hosted.dart 193     BoundHostedSource.downloadToSystemCache.<async>
    | ===== asynchronous gap ===========================
    | dart:async                                 Future.Future.microtask
    | package:pub/src/source/hosted.dart         BoundHostedSource.downloadToSystemCache
    | package:pub/src/command/cache_add.dart 77  CacheAddCommand.run.<async>.downloadVersion.<async>
    | ===== asynchronous gap ===========================
    | package:pub                                CacheAddCommand.run.<async>.downloadVersion
    | package:pub/src/command/cache_add.dart 87  CacheAddCommand.run.<async>
    | dart:async                                 _SyncCompleter.complete
    | package:pub/src/source/hosted.dart 142     BoundHostedSource.doGetVersions.<async>
    | ===== asynchronous gap ===========================
    | dart:async                                 _asyncThenWrapperHelper
    | package:pub/src/command/cache_add.dart     CacheAddCommand.run
    | package:args/command_runner.dart 177       CommandRunner.runCommand.<fn>
    | dart:async                                 Future.Future.sync
    | package:args/command_runner.dart 130       CommandRunner.runCommand
    | package:pub/src/command_runner.dart 128    PubCommandRunner.runCommand.<async>.<fn>
    | dart:async                                 Future.Future.sync
    | package:pub/src/utils.dart 72              captureErrors.<fn>
    | package:stack_trace                        Chain.capture
    | package:pub/src/utils.dart 86              captureErrors
    | package:pub/src/command_runner.dart 128    PubCommandRunner.runCommand.<async>
    | dart:async                                 _SyncCompleter.complete
    | package:pub/src/command_runner.dart 214    PubCommandRunner._validatePlatform.<async>
---- End log transcript ----

@extend not working in multi selectors block

While this

.good { color: red; } 
.better { @extend .good; }

is correctly generated as

.good,.better { color: red; }
.better { }

If we put @extend in a block defined for multiple selectors, the second selector is ignored

.good { color: red; } 
.better,.best { @extend .good; }

should generate

.good,.better,.best { color: red; }
.better,.best { }

but it generates

.good,.better { color: red; }
.better,.best { }

interpreting wrongly the .best definition

Unit test here

[request] Support exponential syntax

Step to reproduce

import 'package:csslib/parser.dart';
import 'package:csslib/visitor.dart';

class FunctionVisitor extends Visitor {
  @override
  visitNumberTerm(NumberTerm node) {
    print('visitNumberTerm ${node.value}');
    return (node.value as num).toDouble();
  }

  @override
  visitPercentageTerm(PercentageTerm node) {
    print('visitPercentageTerm ${node.value}');
    return (node.value as num).toDouble();
  }

  @override
  visitFunctionTerm(FunctionTerm node) {
    print('visitFunctionTerm ${node.value}');
    return super.visitFunctionTerm(node);
  }
}

void main() {
  var stylesheet = parse('.foo { color: rgba(1e2, .5e1, .5e0, +.25e2%) }');
  FunctionVisitor().visitTree(stylesheet);
}

Expected

visitFunctionTerm rgba
visitNumberTerm 100
visitNumberTerm 5
visitNumberTerm 0.5
visitPercentageTerm 25

Actual

visitFunctionTerm rgba
visitNumberTerm 1
visitNumberTerm 0.5
visitNumberTerm 0.5
visitNumberTerm 0.25

csslib: Is it wrong logic?

<img src="https://avatars.githubusercontent.com/u/5479?v=3" align="left" width="96" height="96"hspace="10"> Issue by sethladd
Originally opened as dart-lang/sdk#16706

https://github.com/dart-lang/csslib/blob/master/lib/src/tokenkind.dart#L486

static bool isPredefinedName(String name) {
    var nameLen = name.length;
    // TODO(terry): Add more pre-defined names (hidden, bolder, inherit, etc.).
    if (matchUnits(name, 0, nameLen) == -1 ||
        matchDirectives(name, 0, nameLen) == -1 ||
        matchMarginDirectives(name, 0, nameLen) == -1 ||
        matchColorName(name) == null) {
      return false;
    }

return true;
}
Is it wrong? I think it should be:

  if (matchUnits(name, 0, nameLen) == -1 &&
        matchDirectives(name, 0, nameLen) == -1 &&
        matchMarginDirectives(name, 0, nameLen) == -1 &&
        matchColorName(name) == null) {

Support SASS style mixins for cross browser styling.

<img src="https://avatars.githubusercontent.com/u/5479?v=3" align="left" width="96" height="96"hspace="10"> Issue by sethladd
Originally opened as dart-lang/sdk#16709

Example define mixin border-radius:

@mixin border-radius($radius) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}

Usage of mixin:

.round-button {
background: black;
color: white;
padding: 20px;
@include border-radius(5px);
}

CSS generated:

.round-button {
background: black;
color: white;
padding: 20px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

investigate whether we need transformers for scoped css

<img src="https://avatars.githubusercontent.com/u/2049220?v=3" align="left" width="96" height="96"hspace="10"> Issue by sigmundch
Originally opened as dart-lang/sdk#13262

This is a bug for something Terry is already working on, just wanted to create the entry here to keep track of progress.

Currently the shim-css should work for deployable applications, but it might help performance if we use a transformer that replaces the runtime shim with some compile-time approach. We would like to measure this.

Does not supported escaped code points in identifiers

The following CSS

i.icon.\35 00px:before {
  content: "\f26e";
}

yield this error

error on line 1, column 9 of ../test.css: parsing error expected {
i.icon.\35 00px:before {
        ^^

/deep/, >>>, ::shadow are unsupported

These selectors are deprecated: https://code.google.com/p/chromium/issues/detail?id=489954
however there isn't a replacement yet and there are still discussions what form that will take so they'll likely be around for quite a while.

csslib's parsing fails when it comes across one of these, with a message of the form
"error on line 33, column 17 of foo.css: expected {, but found /
foo /deep/ #bar {"
from https://github.com/dart-lang/csslib/blob/master/lib/parser.dart#L307

I'll try and come up with a patch, although it'll probably not be in the next couple of weeks.

For future reference, I've traced where I believe the error is coming from:
_errorExpected('{'), l299
_eat(TokenKind.LBRACE), l1042
_processDeclarations(), l985

_processDeclarations() tries to handle "/deep/", because it's not consumed by:
processSelectorGroup(), l981
processSelector(), /1186
simpleSelectorSequence(simpleSequences.length == 0), l1206
simpleSelector(), l1254

Upgrade from comment-based generics syntax

The comment-based generics syntax will be removed from the Dart SDK tools (like DDC, analyzer) "soon." dart-lang/sdk#28796

Such syntax (like in _mergeVal) needs to be updated, and the minimum Dart SDK in pubspec.yaml needs to be bumped to 1.21, when the real, non-comment-based syntax was introduced.

Line names in grid-template-columns and grid-template-rows are not parsed

Example:

.example-grid {
  display: grid;
  grid-template-columns: [start] auto [middle] 1fr [end];
  grid-template-rows: [top] auto [middle] 1fr [bottom];
}

Gives the errors:

[
    Message:error on line 3, column 26: Expecting a positive number  
    ╷  
  3 │   grid-template-columns: [start] auto [middle] 1fr [end];  
    │                          ^^^^^^  
    ╵,
    Message:error on line 3, column 39: Expecting a positive number  
    ╷  
  3 │   grid-template-columns: [start] auto [middle] 1fr [end];  
    │                                       ^^^^^^^  
    ╵,
    Message:error on line 3, column 52: Expecting a positive number  
    ╷  
  3 │   grid-template-columns: [start] auto [middle] 1fr [end];  
    │                                                    ^^^^  
    ╵,
    Message:error on line 4, column 23: Expecting a positive number  
    ╷  
  4 │   grid-template-rows: [top] auto [middle] 1fr [bottom];  
    │                       ^^^^  
    ╵,
    Message:error on line 4, column 34: Expecting a positive number  
    ╷  
  4 │   grid-template-rows: [top] auto [middle] 1fr [bottom];  
    │                                  ^^^^^^^  
    ╵,
    Message:error on line 4, column 47: Expecting a positive number  
    ╷  
  4 │   grid-template-rows: [top] auto [middle] 1fr [bottom];  
    │                                               ^^^^^^^  
    ╵
]

Support @document as an alternative to @-moz-document

@document is an alternative to @-moz-document, but right now csslib parses it as a Less variable. Sass is already showing deprecation warnings for @-moz-document, so userstyles that use Sass are already starting to use @document, meaning they won't be parsed correctly by csslib.

pretty print does not render media query block correctly

Pretty print mode seems to ignore @media query blocks

The following:

.good { color: red; }
@media screen { .better { color: blue; } }
.best { color: green }

should generate:

.good {
  color: #f00;
}
@media screen {
  .better {
    color: #00f;
  }
}
.best {
  color: #008000;
}

although for now it generates:

.good {
  color: #f00;
} @media screen {
.better {
  color: #00f;
}
}
.best {
  color: #008000;
}

Unit test here

fix expression spans

See #14

Unhandled exception: Class 'int' has no instance getter 'name'.

csslib throws an unhandled error when parsing the following CSS.

Here's the stacktrace:

Unhandled exception:
NoSuchMethodError: Class 'int' has no instance getter 'name'.
Receiver: 0
Tried calling: name
#0      Object.noSuchMethod (dart:core-patch/object_patch.dart:50:5)
#1      _Parser.processSelectorExpression (package:csslib/parser.dart:1690:47)
#2      _Parser.processPseudoSelector (package:csslib/parser.dart:1605:20)
#3      _Parser.simpleSelectorTail (package:csslib/parser.dart:1545:16)
#4      _Parser.simpleSelector (package:csslib/parser.dart:1490:14)
#5      _Parser.simpleSelectorSequence (package:csslib/parser.dart:1403:11)
#6      _Parser.processSelector (package:csslib/parser.dart:1338:26)
#7      _Parser.processSelectorGroup (package:csslib/parser.dart:1320:27)
#8      _Parser._nestedSelector (package:csslib/parser.dart:1152:30)
#9      _Parser.processDeclarations (package:csslib/parser.dart:1181:27)
#10     _Parser.processRule (package:csslib/parser.dart:1105:37)
#11     _Parser.parse (package:csslib/parser.dart:206:20)
#12     parse (package:csslib/parser.dart:99:32)
#13     parseCss (package:linkcheck/src/parsers/css.dart:29:17)

Here's the exact CSS. Sorry for the huge blob, I'm currently not in position to try to minimize the repro.

csslib-throws.css.zip

Expose csslib/src/messages.dart from csslib/parser.dart

The Parser interface depends on Message, so users almost always have to import package:csslib/src/messages.dart when using package:csslib/parser.dart.

@extend not working in media queries

While @extend works fine and suit some if my needs, it is not working correctly within @media query block. Let's assume the following css

.good { color: red; } 
@media screen {
  .better { @extend .good; } 
}

It should generate

.good { color: red; } 
@media screen { .better { color: red; } }

so that .better definition is only valid within the media query. However it generates:

.good, .better { color: red; } 
@media screen { .better { } }';

ignoring the media query

Unit test available here

csslib does not support escaping within strings

<img src="https://avatars.githubusercontent.com/u/3958861?v=3" align="left" width="96" height="96"hspace="10"> Issue by skoga
Originally opened as dart-lang/sdk#20095

What steps will reproduce the problem?

Consider parsing the following:

.foo {
desc: "I'm cool";
}

.bar {
desc: "I\000027m hot";
}

According to the W3c spec (http://www.w3.org/TR/css3-syntax/#escaping) Both of the above strings are legit and should result in the visitor calling visitLiteralTerm with the the string "I'm hot" or "I'm cold" (as appropriate).

However, visitLiteralTerm comes back with the string "I\000027m hot" and (escaped dart string) and "I\000027m cold". So it looks like some kind of translation occurs but it's not in the correct direction.

What version of the product are you using?

csslib 0.9.2

On what operating system?

linux

What browser (if applicable)?

server-side (n/a)

Please provide any additional information below.

Commas in Keyframes

Dart SDK Version 2.7.2
AngularDart Version 6.0.0-alpha and 5.3.1
macOS

I use less_dart in my project. I create styles.less file and write LESS example code:

@keyframes loadMaskAnimation {
  10%,
  20%,
  30% {
    background-color: yellow;
  }
  50% {
    background-color: black;
  }
}

after build and compiling I have next files:

styles.css - with normal good result
styles.css.dart - final List styles = [':host \n@keyframes loadMaskAnimation {\n 10%,\n 20%,\n 30% {\n background-color: yellow;\n }\n 50% {\n background-color: black;\n }\n}\n'];

As you see, in this step I still have commas between 10%, and 20%. It means, that less_dart works good.

styles.css.shim.dart - problem is here - final List styles = ['._nghost-%ID% @Keyframes loadMaskAnimation{10% 20% 30%{background-color:yellow}50%{background-color:black}}'];

And now commas is missed and my animation is broken.
Сan I somehow fix this in my project? I hope you will fix it in next versions.

error: The getter 'text' was called on null.

Build error:
Transform StylesheetCompiler on myproj_angular|lib/components/photos/photos_component.css threw error: The getter 'text' was called on null.
Receiver: null
Tried calling: text
dart:core-patch/object_patch.dart 43                                     Object._noSuchMethod
dart:core-patch/object_patch.dart 47                                     Object.noSuchMethod
package:csslib/parser.dart 2523                                          _Parser.processDimension
package:csslib/parser.dart 2479                                          _Parser.processTerm
package:csslib/parser.dart 2231                                          _Parser.processExpr
package:csslib/parser.dart 1840                                          _Parser.processDeclaration
package:csslib/parser.dart 1220                                          _Parser.processDeclarations
package:csslib/parser.dart 1131                                          _Parser.processRuleSet
package:csslib/parser.dart 540                                           _Parser.processDirective
package:csslib/parser.dart 214                                           _Parser.parse
package:csslib/parser.dart 103                                           parse
package:angular2/src/compiler/shadow_css.dart 99                         shimShadowCss
package:angular2/src/compiler/style_compiler.dart 97                     StyleCompiler._shimIfNeeded
package:angular2/src/compiler/style_compiler.dart 73                     StyleCompiler._compileStyles
package:angular2/src/compiler/style_compiler.dart 64                     StyleCompiler.compileStylesheet
package:angular2/src/compiler/offline_compiler.dart 123                  OfflineCompiler.compileStylesheet
package:angular2/src/transform/stylesheet_compiler/processor.dart 32     processStylesheet.<fn>
===== asynchronous gap ===========================
package:angular2/src/transform/common/logging.dart 33                    logElapsedAsync
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/processor.dart 30     processStylesheet
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/transformer.dart 36   StylesheetCompiler.apply.<fn>
===== asynchronous gap ===========================
package:angular2/src/transform/common/zone.dart 23                       exec.<fn>
===== asynchronous gap ===========================
dart:async/zone.dart 1120                                                _rootRun
dart:async/zone.dart 1001                                                _CustomZone.run
dart:async/zone.dart 1466                                                runZoned
package:angular2/src/transform/common/zone.dart 20                       exec
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/transformer.dart 34   StylesheetCompiler.apply
===== asynchronous gap ===========================
package:angular2/src/transform/common/eager_transformer_wrapper.dart 21  _EagerTransformerWrapper.apply
package:$pub/serialize/transformer.dart 31                               _serializeTransformer.<fn>.<fn>.<fn>
dart:async/future.dart 206                                               Future.Future.sync
package:$pub/serialize/transformer.dart 30                               _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150                                          respond.<fn>
dart:async/future.dart 206                                               Future.Future.sync
package:$pub/serialize.dart 150                                          respond
package:$pub/serialize/transformer.dart 17                               _serializeTransformer.<fn>
dart:async/zone.dart 1307                                                _RootZone.runUnaryGuarded
dart:async/stream_impl.dart 330                                          _BufferingStreamSubscription._sendData
dart:async/stream_impl.dart 257                                          _BufferingStreamSubscription._add
dart:async/stream_controller.dart 757                                    _StreamController&&_SyncStreamControllerDispatch._sendData
dart:async/stream_controller.dart 628                                    _StreamController._add
dart:async/stream_controller.dart 574                                    _StreamController.add
dart:isolate-patch/isolate_patch.dart 151                                _RawReceivePortImpl._handleMessage

dart:core                                                                Object.noSuchMethod
package:csslib/parser.dart 2523                                          _Parser.processDimension
package:csslib/parser.dart 2479                                          _Parser.processTerm
package:csslib/parser.dart 2231                                          _Parser.processExpr
package:csslib/parser.dart 1840                                          _Parser.processDeclaration
package:csslib/parser.dart 1220                                          _Parser.processDeclarations
package:csslib/parser.dart 1131                                          _Parser.processRuleSet
package:csslib/parser.dart 540                                           _Parser.processDirective
package:csslib/parser.dart 214                                           _Parser.parse
package:csslib/parser.dart 103                                           parse
package:angular2/src/compiler/shadow_css.dart 99                         shimShadowCss
package:angular2/src/compiler/style_compiler.dart 97                     StyleCompiler._shimIfNeeded
package:angular2/src/compiler/style_compiler.dart 73                     StyleCompiler._compileStyles
package:angular2/src/compiler/style_compiler.dart 64                     StyleCompiler.compileStylesheet
package:angular2/src/compiler/offline_compiler.dart 123                  OfflineCompiler.compileStylesheet
package:angular2/src/transform/stylesheet_compiler/processor.dart 32     processStylesheet.<fn>
===== asynchronous gap ===========================
package:angular2/src/transform/common/logging.dart 33                    logElapsedAsync
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/processor.dart 30     processStylesheet
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/transformer.dart 36   StylesheetCompiler.apply.<fn>
===== asynchronous gap ===========================
package:angular2/src/transform/common/zone.dart 23                       exec.<fn>
===== asynchronous gap ===========================
dart:async                                                               runZoned
package:angular2/src/transform/common/zone.dart 20                       exec
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/transformer.dart 34   StylesheetCompiler.apply
===== asynchronous gap ===========================
package:angular2/src/transform/common/eager_transformer_wrapper.dart 21  _EagerTransformerWrapper.apply
package:$pub/serialize/transformer.dart 31                               _serializeTransformer.<fn>.<fn>.<fn>
dart:async                                                               Future.Future.sync
package:$pub/serialize/transformer.dart 30                               _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150                                          respond.<fn>
dart:async                                                               Future.Future.sync
package:$pub/serialize.dart 150                                          respond
package:$pub/serialize/transformer.dart 17                               _serializeTransformer.<fn>
Build error:
Transform StylesheetCompiler on myproj_angular|lib/components/profile_summaries/profile_summaries_component.css threw error: The getter 'text' was called on null.
Receiver: null
Tried calling: text
dart:core-patch/object_patch.dart 43                                     Object._noSuchMethod
dart:core-patch/object_patch.dart 47                                     Object.noSuchMethod
package:csslib/parser.dart 2523                                          _Parser.processDimension
package:csslib/parser.dart 2479                                          _Parser.processTerm
package:csslib/parser.dart 2231                                          _Parser.processExpr
package:csslib/parser.dart 1840                                          _Parser.processDeclaration
package:csslib/parser.dart 1220                                          _Parser.processDeclarations
package:csslib/parser.dart 1131                                          _Parser.processRuleSet
package:csslib/parser.dart 540                                           _Parser.processDirective
package:csslib/parser.dart 214                                           _Parser.parse
package:csslib/parser.dart 103                                           parse
package:angular2/src/compiler/shadow_css.dart 99                         shimShadowCss
package:angular2/src/compiler/style_compiler.dart 97                     StyleCompiler._shimIfNeeded
package:angular2/src/compiler/style_compiler.dart 73                     StyleCompiler._compileStyles
package:angular2/src/compiler/style_compiler.dart 64                     StyleCompiler.compileStylesheet
package:angular2/src/compiler/offline_compiler.dart 123                  OfflineCompiler.compileStylesheet
package:angular2/src/transform/stylesheet_compiler/processor.dart 32     processStylesheet.<fn>
===== asynchronous gap ===========================
package:angular2/src/transform/common/logging.dart 33                    logElapsedAsync
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/processor.dart 30     processStylesheet
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/transformer.dart 36   StylesheetCompiler.apply.<fn>
===== asynchronous gap ===========================
package:angular2/src/transform/common/zone.dart 23                       exec.<fn>
===== asynchronous gap ===========================
dart:async/zone.dart 1120                                                _rootRun
dart:async/zone.dart 1001                                                _CustomZone.run
dart:async/zone.dart 1466                                                runZoned
package:angular2/src/transform/common/zone.dart 20                       exec
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/transformer.dart 34   StylesheetCompiler.apply
===== asynchronous gap ===========================
package:angular2/src/transform/common/eager_transformer_wrapper.dart 21  _EagerTransformerWrapper.apply
package:$pub/serialize/transformer.dart 31                               _serializeTransformer.<fn>.<fn>.<fn>
dart:async/future.dart 206                                               Future.Future.sync
package:$pub/serialize/transformer.dart 30                               _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150                                          respond.<fn>
dart:async/future.dart 206                                               Future.Future.sync
package:$pub/serialize.dart 150                                          respond
package:$pub/serialize/transformer.dart 17                               _serializeTransformer.<fn>
dart:async/zone.dart 1307                                                _RootZone.runUnaryGuarded
dart:async/stream_impl.dart 330                                          _BufferingStreamSubscription._sendData
dart:async/stream_impl.dart 257                                          _BufferingStreamSubscription._add
dart:async/stream_controller.dart 757                                    _StreamController&&_SyncStreamControllerDispatch._sendData
dart:async/stream_controller.dart 628                                    _StreamController._add
dart:async/stream_controller.dart 574                                    _StreamController.add
dart:isolate-patch/isolate_patch.dart 151                                _RawReceivePortImpl._handleMessage

dart:core                                                                Object.noSuchMethod
package:csslib/parser.dart 2523                                          _Parser.processDimension
package:csslib/parser.dart 2479                                          _Parser.processTerm
package:csslib/parser.dart 2231                                          _Parser.processExpr
package:csslib/parser.dart 1840                                          _Parser.processDeclaration
package:csslib/parser.dart 1220                                          _Parser.processDeclarations
package:csslib/parser.dart 1131                                          _Parser.processRuleSet
package:csslib/parser.dart 540                                           _Parser.processDirective
package:csslib/parser.dart 214                                           _Parser.parse
package:csslib/parser.dart 103                                           parse
package:angular2/src/compiler/shadow_css.dart 99                         shimShadowCss
package:angular2/src/compiler/style_compiler.dart 97                     StyleCompiler._shimIfNeeded
package:angular2/src/compiler/style_compiler.dart 73                     StyleCompiler._compileStyles
package:angular2/src/compiler/style_compiler.dart 64                     StyleCompiler.compileStylesheet
package:angular2/src/compiler/offline_compiler.dart 123                  OfflineCompiler.compileStylesheet
package:angular2/src/transform/stylesheet_compiler/processor.dart 32     processStylesheet.<fn>
===== asynchronous gap ===========================
package:angular2/src/transform/common/logging.dart 33                    logElapsedAsync
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/processor.dart 30     processStylesheet
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/transformer.dart 36   StylesheetCompiler.apply.<fn>
===== asynchronous gap ===========================
package:angular2/src/transform/common/zone.dart 23                       exec.<fn>
===== asynchronous gap ===========================
dart:async                                                               runZoned
package:angular2/src/transform/common/zone.dart 20                       exec
===== asynchronous gap ===========================
package:angular2/src/transform/stylesheet_compiler/transformer.dart 34   StylesheetCompiler.apply
===== asynchronous gap ===========================
package:angular2/src/transform/common/eager_transformer_wrapper.dart 21  _EagerTransformerWrapper.apply
package:$pub/serialize/transformer.dart 31                               _serializeTransformer.<fn>.<fn>.<fn>
dart:async                                                               Future.Future.sync
package:$pub/serialize/transformer.dart 30                               _serializeTransformer.<fn>.<fn>
package:$pub/serialize.dart 150                                          respond.<fn>
dart:async                                                               Future.Future.sync
package:$pub/serialize.dart 150                                          respond
package:$pub/serialize/transformer.dart 17

for

@import '../../../packages/datingnode_angular/asset/css/config';

$card-width: 100px;
$card-width-max: 160px;
$grid-max-cols: 8;
$breakpoint: 0px;
$breakpoint-previous: 0px;

ul.grid {
  list-style-type: none;
  padding: 0;



  li.photo {

    @for $i from 0 through $grid-max-cols {
      $card-width-relative: $card-width + ($i * 20);

      @if $card-width-relative > $card-width-max {
        $card-width-relative: $card-width-max;
      }

      $size: ($i * $card-width-relative);

      $breakpoint-previous: $breakpoint;
      $breakpoint: $breakpoint + $card-width-relative;

      $card-width-percent: percentage(1 / $i);

      @if $i == $grid-max-cols {
        @media (min-width: #{$breakpoint-previous}) {
          width: $card-width-percent;
        }
      } @else {
        @media (min-width: #{$breakpoint-previous}) and (max-width: #{$breakpoint - 1px}) {
          width: $card-width-percent;
        }
      }
    }

    display: inline-block;
    box-sizing: border-box;
    // flex:1;
    position: relative;

    .card {
      display: block;
      margin: 3%;
      position: relative;
      background-color: #fff;
      overflow: hidden;
      text-decoration: none;
      cursor: pointer;

      @media (min-width: 1200px) {
          margin:4%;
      }

    }
    img {
      width: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    .aspect-ratio {
      padding-top: 100%;
    }


  }

  // Calculate the max width of the grid...
  $breakpoint: 0;
  @for $i from 0 through $grid-max-cols {
    $card-width-relative: $card-width + ($i * 20);

    @if $card-width-relative > $card-width-max {
      $card-width-relative: $card-width-max;
    }
    $breakpoint: $breakpoint + $card-width-relative;
  }

  max-width: #{$breakpoint - 1px};

}

:host-context(#app.chat-pane) {

  ul.grid {

    li.profile-summary {

      $breakpoint: 0px;
      $breakpoint-previous: 0px;

      @for $i from 0 through $grid-max-cols {
        $card-width-relative: $card-width + ($i * 20);

        @if $card-width-relative > $card-width-max {
          $card-width-relative: $card-width-max;
        }

        $size: ($i * $card-width-relative);

        $breakpoint-previous: $breakpoint;
        $breakpoint: $breakpoint + $card-width-relative;

        $card-width-percent: percentage(1 / $i);

        @if $i == $grid-max-cols {
          @media (min-width: #{$breakpoint-previous + $BREAKPOINT_MOBILE_WIDTH}) {
            width: $card-width-percent;
          }
        } @else {
          @media (min-width: #{$breakpoint-previous + $BREAKPOINT_MOBILE_WIDTH}) and (max-width: #{$breakpoint + $BREAKPOINT_MOBILE_WIDTH - 1px}) {
            width: $card-width-percent;
          }
        }
      }

    }

    // Calculate the max width of the grid...
    $breakpoint: 0;
    @for $i from 0 through $grid-max-cols {
      $card-width-relative: $card-width + ($i * 20);

      @if $card-width-relative > $card-width-max {
        $card-width-relative: $card-width-max;
      }
      $breakpoint: $breakpoint + $card-width-relative;
    }

    max-width: #{$breakpoint + $BREAKPOINT_MOBILE_WIDTH - 1px};

  }

}

Error in font-family property if font name contains a spaces

Hello!

final contents =
      '.best-price-guarantee__form-select .selectize-dropdown-content,\n'
      '.best-price-guarantee__form-select .selectize-input {\n'
      'margin: 0;\n'
      'outline: none;\n'
      'box-shadow: none!important;\n'
      'border-radius: 5px;\n'
      'background-color: #fff;\n'
      'border: 1px solid #dedede;\n'
      'font-family: PT Sans;\n'
      'font-size: 16px;\n'
      'font-weight: 400\n'
      '}';

errors:

error on line 9, column 14: parsing error expected }
  ╷
9 │ font-family: PT Sans;
  │              ^^
  ╵

error on line 9, column 21: expected {, but found ;
  ╷
9 │ font-family: PT Sans;
  │                     ^
  ╵

Support Selectors Level 4 Grammar

I believe the parser currently implements Selectors Level 3 grammar (it at least makes reference to it throughout the code).

Unfortunately Selectors Level 3 has very limited support for parsing pseudo-class functions (see definitions for pseudo, functional_pseudo and expression in the grammar). This led to the introduction of a hardcoded list of exceptions to support pseudo-class functions with selector arguments. The original exceptions were to support Shadow DOM (:host and :host-context), but #138 introduced a custom pseudo-class function not a part of any CSS specification for use in Angular.

The code in question lives here:

csslib/lib/parser.dart

Lines 1543 to 1594 in 02abc1d

    
           // Functional pseudo? 
        
           if (_peekToken.kind == TokenKind.LPAREN) { 
        
             if (!pseudoElement && name == 'not') { 
        
               _eat(TokenKind.LPAREN); 
        
               // Negation :   ':NOT(' S* negation_arg S* ')' 
        
               var negArg = simpleSelector(); 
        
               _eat(TokenKind.RPAREN); 
        
               return NegationSelector(negArg, _makeSpan(start)); 
        
             } else if (!pseudoElement && 
        
                 (name == 'host' || 
        
                     name == 'host-context' || 
        
                     name == 'global-context' || 
        
                     name == '-acx-global-context')) { 
        
               _eat(TokenKind.LPAREN); 
        
               var selector = processCompoundSelector(); 
        
               if (selector == null) { 
        
                 _errorExpected('a selector argument'); 
        
                 return null; 
        
               } 
        
               _eat(TokenKind.RPAREN); 
        
               var span = _makeSpan(start); 
        
               return PseudoClassFunctionSelector(pseudoName, selector, span); 
        
             } else { 
        
               // Special parsing for expressions in pseudo functions.  Minus is used 
        
               // as operator not identifier. 
        
               // TODO(jmesserly): we need to flip this before we eat the "(" as the 
        
               // next token will be fetched when we do that. I think we should try to 
        
               // refactor so we don't need this boolean; it seems fragile. 
        
               tokenizer.inSelectorExpression = true; 
        
               _eat(TokenKind.LPAREN); 
        
               // Handle function expression. 
        
               var span = _makeSpan(start); 
        
               var expr = processSelectorExpression(); 
        
               tokenizer.inSelectorExpression = false; 
        
               // Used during selector look-a-head if not a SelectorExpression is 
        
               // bad. 
        
               if (expr is SelectorExpression) { 
        
                 _eat(TokenKind.RPAREN); 
        
                 return (pseudoElement) 
        
                     ? PseudoElementFunctionSelector(pseudoName, expr, span) 
        
                     : PseudoClassFunctionSelector(pseudoName, expr, span); 
        
               } else { 
        
                 _errorExpected('CSS expression'); 
        
                 return null; 
        
               } 
        
             } 
        
           }

Updating the parser to support Selectors Level 4 grammar would alleviate the need for these hardcoded exceptions, as it is much more permissive with pseudo-class function arguments.

Barfing on @supports

[StylesheetCompiler on ares|lib/src/mdc/components/layout/scss/variables.css]:
Errors parsing CSS:
error on line 50, column 4: expected } after ruleset for @media
@supports (display: grid) {
^^^^^^^^
error on line 56, column 1: premature end of file unknown CSS
}
I hit this as i'm trying to take some sass from material design components for web from material.io this one originated from using the mdc-layout-grid sass

Support arithmetic operators inside min, max, and clamp functions

Code like:

a {
  b: min(16px, var(--foo) + 4px);
}

fails to parse, but is equivalent to

a {
  b: min(16px, calc(var(--foo) + 4px));
}

which parses fine.

Consider adding a minify mode in CssPrinter

Currently the non pretty print output could be minify a little bit more

body { color: black; } div { }

could be compiled to

body{color:#000}

However currently it is compiled to

body { color: black; } div { }

Some optimizations

remove spaces
convert color to hex value (see #21)
remove last ; in block
remove empty block

If a minify option (or a new printer) is added it would have the following option

minify: true|false
line-length-max: NNN (where NNN is the maximum size of a line)

Another failure from MDC css

Receiving another error from csslib this time a bunch of errors all with similar messaging:

error on line 95, column 71: expected {, but found $
  --mdc-theme-text-hint-on-light: map-get($mdc-theme-property-values, $style);

I have attached a css file that hits this.

mdc-theme.css.txt

Errors when parsing bulma.css

The following repro finds 6 errors in bulma/css/bulma.css from:
https://github.com/jgthms/bulma/releases/tag/0.9.3

import 'dart:io';
import 'package:csslib/parser.dart';

const testOptions = PreprocessorOptions(
  useColors: false,
  checked: false,
  warningsAsErrors: true,
  inputFile: 'memory',
);

void main() {
  final cssFile = File('bulma.css');
  final css = cssFile.readAsStringSync();
  final errors = <Message>[];
  final stylesheet = parse(css, errors: errors, options: testOptions);
  print(
      'parsed ${stylesheet.topLevels.length} nodes with ${errors.length} errors');
}

Support CSS variables

<img src="https://avatars.githubusercontent.com/u/5479?v=3" align="left" width="96" height="96"hspace="10"> Issue by sethladd
Originally opened as dart-lang/sdk#16710

See http://www.w3.org/TR/css-variables/

define variable using:

var-header-color: red;
use variable using:
h1 { background-color: var(header-color); }

Please bump version to 1.0 when stable

Pre-1.0 version numbers make it look like the package is not yet ready for use.

Use modern doc-comment syntax.

This package should use /// over the years-deprecated /** doc comment syntax.

[package:csslib] var_test is looking for VM specific stack traces

<img src="https://avatars.githubusercontent.com/u/1081711?v=3" align="left" width="96" height="96"hspace="10"> Issue by jmesserly
Originally opened as dart-lang/sdk#12469

The test csslib/test/var_test is looking for VM-specific stack trackes. this should probably use the stack trace package

Error parsing Framework7 -webkit-calc()

import 'package:csslib/parser.dart' show parse;

main() {
  var framework7 = """
.row .col-100 {
  width: 100%;
  width: -webkit-calc((100% - 15px*1) / 1);
  width: calc((100% - 15px*1) / 1);
}
  """;
  var err = [];
  parse(framework7, errors: err);
  print(err.toString());
}

Produces output:

[error on line 3, column 35: problem parsing function expected ), 
  width: -webkit-calc((100% - 15px*1) / 1);
                                  ^, error on line 3, column 35: expected }, but found *
  width: -webkit-calc((100% - 15px*1) / 1);
                                  ^, error on line 3, column 36: premature end of file unknown CSS
  width: -webkit-calc((100% - 15px*1) / 1);
                                   ^]

Several incorrect color names in Color (wrong case).

Moved from https://code.google.com/p/dart/issues/detail?id=23452

Looking at http://www.dartdocs.org/documentation/csslib/0.11.0+2/index.html#csslib/csslib-parser.Color, the following color names are incorrectly capitalized:

aquaMarine => aquamarine
cornFlowerBlue => cornflowerBlue
darkGoldenRod => darkGoldenrod
goldenRod => goldenrod
lightGoldenRodYellow => lightGoldenrodYellow
mediumAquaMarine => mediumAquamarine
paleGoldenRod => paleGoldenrod

"aquamarine", "cornflower", and "goldenrod" are single words, and should be capitalized accordingly.

References:
http://en.wikipedia.org/wiki/Goldenrod_(color)
http://en.wikipedia.org/wiki/Aquamarine_(color)
http://en.wikipedia.org/wiki/Cornflower_blue

update logging package

related to dart-archive/polymer-dart#71

csslib code typo

Originally opened as dart-lang/sdk#19178

This issue was originally filed by [email protected]

In https://code.google.com/p/dart/source/browse/trunk/dart/pkg/csslib/lib/src/property.dart at line 316 in the hexToInt function you have

throw throw new FormatException("Bad hexadecimal value");

Playing catch is fun and all, but two handed throws are a no go ;)

Validate calls non-existant methods :(

Validate calls isCombinatorDescendant() and isCombinatorNone(), which are not methods; they are getters ☹️.

csslib/lib/src/validate.dart

Line 21 in 6056c29

if (selector.isCombinatorDescendant() ||

Supports{Con,Dis}junction.clone have bad types

Both of these classes have a final List<SupportsConditionInParens> conditions, but when cloning, build a List<SupportsCondition>. This bug is masked by implicit casts.

"type 'double' is not a subtype of type 'int'" calling Color.css('rgba(27,31,35,0.1)')

Running in Dart 2.2, this code:

final a = Color.css('rgba(27,31,35,0.1)');

throws:

type 'double' is not a subtype of type 'int'
#0      Color._convertCssToArgb 
../…/src/property.dart:281
#1      new Color.css 
../…/src/property.dart:92
#2      main 
#3      _startIsolate.<anonymous closure> (dart:isolate/runtime/libisolate_patch.dart:300:19)
#4      _RawReceivePortImpl._handleMessage (dart:isolate/runtime/libisolate_patch.dart:171:12)

Presumably it's because the args are parsed as doubles (args.add(double.parse(param));) but the signature of convertToHexString expects ints for the first three params.

Error parsing Bootstrap media query

import 'package:csslib/parser.dart' show parse;

main() {
  var bootstrap = """
@media all and (transform-3d), (-webkit-transform-3d) {
  .carousel-inner > .item {
    -webkit-transition: -webkit-transform .6s ease-in-out;
         -o-transition:      -o-transform .6s ease-in-out;
            transition:         transform .6s ease-in-out;

    -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }
}
  """;
  var err = [];
  parse(bootstrap, errors: err);
  print(err.toString());
}

Produces output:

[error on line 1, column 29: expected { after media before ruleset
@media all and (transform-3d), (-webkit-transform-3d) {
                            ^, error on line 1, column 29: premature end of file unknown CSS
@media all and (transform-3d), (-webkit-transform-3d) {
                            ^]

tag name selectors inside of a scoped style tag are exposed.

<img src="https://avatars.githubusercontent.com/u/5479?v=3" align="left" width="96" height="96"hspace="10"> Issue by sethladd
Originally opened as dart-lang/sdk#16707

For example:

div { background-color: black; }

foo

the div selector is not localized to the component. Only work around is:

.myDiv { background-color: black; }

foo

Need to look at not mangling the selector (id and class name) but synthesizing a class so all selectors are contained inside a synthesized class selector.

	// Functional pseudo?
	if (_peekToken.kind == TokenKind.LPAREN) {
	if (!pseudoElement && name == 'not') {
	_eat(TokenKind.LPAREN);

	// Negation : ':NOT(' S* negation_arg S* ')'
	var negArg = simpleSelector();

	_eat(TokenKind.RPAREN);
	return NegationSelector(negArg, _makeSpan(start));
	} else if (!pseudoElement &&
	(name == 'host' \|\|
	name == 'host-context' \|\|
	name == 'global-context' \|\|
	name == '-acx-global-context')) {
	_eat(TokenKind.LPAREN);
	var selector = processCompoundSelector();
	if (selector == null) {
	_errorExpected('a selector argument');
	return null;
	}
	_eat(TokenKind.RPAREN);
	var span = _makeSpan(start);
	return PseudoClassFunctionSelector(pseudoName, selector, span);
	} else {
	// Special parsing for expressions in pseudo functions. Minus is used
	// as operator not identifier.
	// TODO(jmesserly): we need to flip this before we eat the "(" as the
	// next token will be fetched when we do that. I think we should try to
	// refactor so we don't need this boolean; it seems fragile.
	tokenizer.inSelectorExpression = true;
	_eat(TokenKind.LPAREN);

	// Handle function expression.
	var span = _makeSpan(start);
	var expr = processSelectorExpression();

	tokenizer.inSelectorExpression = false;

	// Used during selector look-a-head if not a SelectorExpression is
	// bad.
	if (expr is SelectorExpression) {
	_eat(TokenKind.RPAREN);
	return (pseudoElement)
	? PseudoElementFunctionSelector(pseudoName, expr, span)
	: PseudoClassFunctionSelector(pseudoName, expr, span);
	} else {
	_errorExpected('CSS expression');
	return null;
	}
	}
	}

dart-lang / csslib Goto Github PK

csslib's Introduction

Usage

csslib's People

Contributors

Stargazers

Watchers

Forkers

csslib's Issues

Step to reproduce

Expected

Actual

Recommend Projects

Recommend Topics

Recommend Org