Angular compiler is eliminating CSS Container Queries from a component's CSS file

insinfo commented 1 year ago

Which ng* package(s) are the source of the bug?

ngcompiler, ngdart

Which operating system(s) does this bug appear on?

Windows

Which browser(s) does this bug appear on?

Chrome 113.0.5672.93

Is this a regression?

No

Description

Angular compiler is eliminating CSS Container Queries from a component's CSS file, is there any way to prevent this?

Please provide the steps to reproduce the bug

create a new dart web project add ngdart: ^7.1.1 create a component and add a css file using annotation and put

.grid-layout {    
    gap: 1.25rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;   
    container-type: inline-size;  
}
/*col-sm ≥576px */
@container (min-width: 576px) {
    .grid-item {
        background: red;
        width: calc((100% / 2) - 1.0rem);
    }
}

/*md ≥768px*/
@container (min-width: 768px) {
    .grid-item {
        background: blue;
        width: calc((100% / 2) - 1.0rem);
    }
}

Please provide the exception or error you saw

[WARNING] ngdart on lib/src/shared/components/datatable/grid.css: Errors parsing CSS:
error on line 51, column 12: expected :, but found (
   ╷
51 │ @container (min-width: 576px) {
   │            ^
   ╵
error on line 51, column 24: premature end of file unknown CSS
   ╷
51 │ @container (min-width: 576px) {
   │                        ^^^

Please provide the dependency environment you discovered this bug in (run `dart pub deps -s compact`)

Dart SDK version: 2.18.3

environment:   
  sdk: '>=2.18.0 <3.0.0'

dependencies:   
  ngdart: ^7.1.1 
  ngforms: ^4.1.1
  ngrouter: ^3.1.1   

dev_dependencies:   
  sass_builder: ^2.1.2 
  build_runner: any
  build_test: any
  build_web_compilers: any
  pedantic: any
  test: any

Anything else?

No response

GZGavinZhao commented 1 year ago

A quick test showed that it's probably not a problem with csslib (it was able to parse the CSS correctly). I'll take a closer look this weekend.

GZGavinZhao commented 1 year ago

Hang on, this error message "premature end of file unknown CSS" does come from the csslib package. @insinfo can you check the version of csslib that pub is using (dart pub deps -s list | grep csslib)?

insinfo commented 1 year ago

seems to be the last version csslib 0.17.2

PS C:\MyDartProjects\new_sali\frontend> dart pub deps -s list | grep csslib
  - csslib ^0.17.0
  - csslib ^0.17.0
- csslib 0.17.2
  - csslib ^0.17.0
  - csslib ^0.17.0

PS C:\MyDartProjects\new_sali\frontend> dart pub upgrade
Resolving dependencies...
  _fe_analyzer_shared 47.0.0 (60.0.0 available)
  analyzer 4.7.0 (5.12.0 available)
> archive 3.3.7 (was 3.3.6)
> args 2.4.1 (was 2.4.0)
  async 2.11.0
  barcode 2.2.3
  bazel_worker 1.0.2
  bidi 2.0.6
  boolean_selector 2.1.1
  build 2.3.1 (2.4.0 available)
  build_config 1.1.1
  build_daemon 3.1.1 (4.0.0 available)
  build_modules 4.0.6 (5.0.2 available)
  build_resolvers 2.0.10 (2.2.0 available)
  build_runner 2.3.3 (2.4.4 available)
  build_runner_core 7.2.7 (7.2.8 available)
> build_test 2.1.7 (was 2.1.6)
  build_web_compilers 3.2.6 (4.0.3 available)
  built_collection 5.1.1
> built_value 8.5.0 (was 8.4.4)
  charcode 1.3.1
  chartjs2 2.0.0
  checked_yaml 2.0.2 (2.0.3 available)
  cli_repl 0.2.3
  clock 1.1.1
  code_builder 4.4.0
> collection 1.17.2 (was 1.17.1)
  convert 3.1.1
  coverage 1.6.3
  crypto 3.0.2 (3.0.3 available)
  csslib 0.17.2
  dart_style 2.2.4 (2.3.1 available)
  file 6.1.4
  fixnum 1.0.1 (1.1.0 available)
  frontend_server_client 3.2.0
  glob 2.1.1
> graphs 2.3.0 (was 2.2.0)
> html 0.15.3 (was 0.15.2)
  http 0.13.5 (0.13.6 available)
  http_multi_server 3.2.1
  http_parser 4.0.2
> image 4.0.17 (was 4.0.15)
  intl 0.17.0 (0.18.1 available)
  io 1.0.4
  js 0.6.5 (0.6.7 available)
  json_annotation 4.8.0 (4.8.1 available)
  logging 1.1.1
> matcher 0.12.16 (was 0.12.14)
  meta 1.9.1
  mime 1.0.4
  new_sali_core 0.0.0 from path ..\core
  ngast 2.1.4
  ngcompiler 2.1.3
  ngdart 7.1.1
  ngforms 4.1.1
  ngrouter 3.1.1
  ngsecurity 7.1.0 from git https://github.com/angulardart-community/ngsecurity.git at b7a92b
  node_interop 2.1.0
  node_preamble 2.0.2
  package_config 2.1.0
  path 1.8.3
  path_parsing 1.0.1
  pdf 3.10.1 (3.10.3 available)
  pedantic 1.11.1 (discontinued replaced by lints)
  petitparser 5.1.0 (5.4.0 available)
> pointycastle 3.7.3 (was 3.7.2)
  pool 1.5.1
  protobuf 2.1.0
> pub_semver 2.1.4 (was 2.1.3)
> pubspec_parse 1.2.3 (was 1.2.2)
  qr 3.0.1
  quiver 3.2.1
> sass 1.62.1 (was 1.60.0)
  sass_builder 2.2.1
  scratch_space 1.0.1 (1.0.2 available)
> shelf 1.4.1 (was 1.4.0)
> shelf_packages_handler 3.0.2 (was 3.0.1)
> shelf_static 1.1.2 (was 1.1.1)
> shelf_web_socket 1.0.4 (was 1.0.3)
  source_gen 1.2.6 (1.3.2 available)
  source_map_stack_trace 2.1.1
  source_maps 0.10.12
> source_span 1.10.0 (was 1.9.1)
  stack_trace 1.11.0
  stream_channel 2.1.1
  stream_transform 2.1.0
  string_scanner 1.2.0
  term_glyph 1.2.1
> test 1.24.3 (was 1.23.1)
> test_api 0.6.0 (was 0.4.18)
> test_core 0.5.3 (was 0.4.24)
  timing 1.0.1
  tuple 2.0.1
> typed_data 1.3.2 (was 1.3.1)
  vector_math 2.1.4
  vm_service 11.2.0 (11.6.0 available)
  watcher 1.0.2 (1.1.0 available)
> web_socket_channel 2.4.0 (was 2.3.0)
  webkit_inspection_protocol 1.2.0
  xml 6.2.2 (6.3.0 available)
  yaml 3.1.1 (3.1.2 available)
Downloading typed_data 1.3.2...
Downloading graphs 2.3.0...
Downloading html 0.15.3...
Downloading collection 1.17.2...
Downloading shelf_web_socket 1.0.4...
Downloading pubspec_parse 1.2.3...
Downloading pub_semver 2.1.4...
Downloading matcher 0.12.16...
Downloading test_api 0.6.0...
Downloading args 2.4.1...
Downloading shelf 1.4.1...
Downloading image 4.0.17...
Downloading sass 1.62.1...
Downloading built_value 8.5.0...
Downloading test_core 0.5.3...
Downloading test 1.24.3...
Downloading shelf_packages_handler 3.0.2...
Downloading shelf_static 1.1.2...
Changed 23 dependencies!
1 package is discontinued.
25 packages have newer versions incompatible with dependency constraints.
Try `dart pub outdated` for more information.
PS C:\MyDartProjects\new_sali\frontend>

angulardart-community / angular