search

leafo / scssphp

SCSS compiler written in PHP
MIT License
1.34k stars 214 forks source link

Compile issues #668

Closed bloep closed 5 years ago

bloep commented 5 years ago

Since v0.8.0 our styles based on bootstrap-sass (https://github.com/twbs/bootstrap-sass) aren't compiled correctly.

To me, it seems to be related to @at-root.

For example in the compiled css styles (via cli) around line 200 you find these non-valid lines of css.

  .table-bordered th, .table-bordered td {
    border: 1px solid #ddd !important; } }
  @font-face {
  .table-bordered th, .table-bordered td {
    font-family: "Glyphicons Halflings"; }
  .table-bordered th, .table-bordered td {
    src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot"); }
  .table-bordered th, .table-bordered td {
    src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); } }

If I remove the surrounding @at-root in https://github.com/twbs/bootstrap-sass/blob/b34765d8a6aa775816c59012b2d6b30c4c66a8e9/assets/stylesheets/bootstrap/_glyphicons.scss#L10-L21, the file looks fine.

 .table {
    border-collapse: collapse !important; }
    .table td, .table th {
      background-color: #fff !important; }

  .table-bordered th, .table-bordered td {
    border: 1px solid #ddd !important; } }

@font-face {
  font-family: "Glyphicons Halflings";

  src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot");

  src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff2") format("woff2"), url("../fonts/bootstrap/glyphicons-halflings-regular.woff") format("woff"), url("../fonts/bootstrap/glyphicons-halflings-regular.ttf") format("truetype"), url("../fonts/bootstrap/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
Cerdic commented 5 years ago

I didn't check the compilation of SAAS BS 3, only the full BS4.

I guess this is very linked to this commit 01ec539b3bdbf91bc5b78ffb783e42fda4826b24

As it has been improved by 3d3a61a3edd0421e78d6956c79e72e5e33ee67dc i think you should now have only one occurence of .table-bordered th, .table-bordered td but this is still wrong of course :)