search

SomMeri / less4j

Less language is an extension of css and less4j compiles it into regular css. Less adds several dynamic features into css: variables, expressions, nested rules, and so on. Less was designed to be compatible with css and any correct css file is also correct less file.
146 stars 47 forks source link

Comment Parsing Issue #208

Closed adstotz closed 10 years ago

adstotz commented 10 years ago

When parsing the following line in a less file using less4j 1.5.3: //\ Global textual link color. I get an error "...extraneous input '/' expecting EOF in stylesheet..."

Changing this line to: // \ Global textual link color. (note the space between // and **) Fixes the issue.

Thinking that the parser is seeing the "/*" token and treating this as a start of a block comment instead of a single line comment. The simple fix is tedious because I'm compiling a large 3rd party set of less files that use this style sporadically and would rather leave the package unchanged.

SomMeri commented 10 years ago

Thank you. I hope this should be only small fix, so I will plan this for the next release.

SomMeri commented 10 years ago

I tested less4j-1.5.3 on a small .less file and it did not crashed. Could you please send me failing example? It probably crashes only in some context.

My less file:

//** Global textual link color. 
.bananas() {
  height: 11px;
}
//** Global textual link color. */
#test {
  //** Global textual link color. 
  .bananas();
}
M3lkior commented 10 years ago

hi @adstotz , hi @SomMeri ,

I have exactly the same problem. It occurs when i try to import boostrap's variables.less file, containing //\ comments.

A strange fact, wro4j (with less4j processor) succesfully compile bootstrap.less file who contains variables.less file ...

My wro.properties :

managerFactoryClassName=ro.isdc.wro.extensions.manager.ExtensionsConfigurableWroManagerFactory uriLocators=servletContext,classpath, uri

preProcessors=cssUrlRewriting,cssImport,lessCssImport,semicolonAppender

preProcessors=cssUrlRewriting,lessCssImport,semicolonAppender postProcessors=less4j,cssMinJawr

cssVariables,less4j,cssMinJawr

I'm using an Eclipse Less plugin Editor : http://www.normalesup.org/~simonet/soft/ow/eclipse-less.fr.html

Thanks for yours investigations :)

SomMeri commented 10 years ago

@M3lkior Is it possible for you to remove semicolonAppender and try whether it works then?

I took variables.less from here and imported it like this:

@import "variables.less";
#test {
  color: @label-color;
}

It compiled correctly.

Then I took variables.less and added ; to the end and got error:

Errors produced by compilation of testCase
ERROR variables.less 846:1 extraneous input ';' expecting EOF in stylesheet (which started at 10:1)
ERROR 2:10 The variable "@label-color" was not declared.

If it still fails, then it would be helpful if you could send me example of failing less file. I tried various ways to import "variables.less" and they all compiled. There must be something else that contributes to the problem too.

M3lkior commented 10 years ago

Nothing changes when i remove semicolonAppender ... sorry :/

Here is my less source, if it help :


@import  "../../../vendor/bootstrap/3.2.0/sources/less/variables.less";
//
// Variables
// --------------------------------------------------
//Media queries properties variables
@media-mobile : ~"(max-width: @{screen-xs-max})";
@media-tablet :  ~"(min-width: @{screen-sm-min})";
@media-desktop :  ~"(min-width: @{screen-md-min})";
@media-large-desktop :  ~"(min-width: @{screen-ld-min})";
@media-mobile-strict : ~"(max-width: @{screen-xs-max})";
@media-tablet-strict : ~"(min-width: @{screen-sm-min}) and (max-width: @{screen-sm-max})";
@media-desktop-strict : ~"(min-width: @{screen-md-min) and (max-width: @{screen-md-max})";
@media-large-desktop-strict : ~"(min-width: @{screen-lg-min})";
//== Auchan Main Colors
@auchan-black-color: #32323A;
@auchan-black-hover-color: #555555;
@auchan-red-color: #E74C3C;
@auchan-red-darker-color: #AC3326;
@auchan-red-dark-color: #C0392B;
@auchan-white-color: #FFFFFF;
@auchan-grey-color : #F1F2F7;
//== Auchan Main fonts
@auchan-font-family: 'Droid Sans', sans-serif;
@auchan-font-weight: normal;
@auchan-font-size: 100%;
//Typography
@auchan-line-height-base: 1.428571429;
/* radioboxes & checkboxes groups */
@auchan-groups-color: #F6F6F6;
//== Page structure
@auchan-header-bg: @auchan-red-color;
@auchan-header-title-font-size: 4rem;
@auchan-footer-height: 36px;
@auchan-footer-font-size: 1.2rem;
@auchan-footer-bg: @auchan-red-dark-color;
@auchan-icon-hover-color: @auchan-red-dark-color;
@auchan-bootstrap-page-height: ~"100% -" @auchan-footer-height;
@auchan-bootstrap-content-height: ~"99.9%";
@auchan-arrowbox-color:  #2c3e50;
@auchan-arrowbox-border-color: #95a5a6;
@auchan-arrowbox-bg-color: #2c3e50;
//== Navbar
/* Fonts */
@auchan-bootstrap-navbar-font-size: 12px;
@auchan-bootstrap-navbar-height: 32px;
@auchan-bootstrap-navbar-a-font-size: @auchan-bootstrap-navbar-font-size;
/* Colors */
@auchan-bootstrap-navbar-bg-color:@auchan-red-dark-color;
@auchan-bootstrap-navbar-border-color:@auchan-red-dark-color;
@auchan-bootstrap-navbar-a-hover-color: @auchan-white-color;
@auchan-bootstrap-navbar-a-hover-bg-color: @auchan-red-darker-color;
@auchan-bootstrap-navbar-a-focus-color: @auchan-white-color;
@auchan-bootstrap-navbar-a-focus-bg-color: @auchan-red-darker-color;
@auchan-bootstrap-navbar-toggle-icon-bar: @auchan-white-color;
@auchan-bootstrap-navbar-toggle-hover-bg-color: @auchan-red-darker-color;
@auchan-bootstrap-navbar-dropdown-menu-bg-color:@auchan-red-color;
@auchan-bootstrap-navbar-dropdown-menu-a-color: @auchan-white-color;
@auchan-bootstrap-navbar-dropdown-menu-a-hover-color: @auchan-white-color;
@auchan-bootstrap-navbar-dropdown-menu-a-hover-bg: @auchan-red-dark-color;
@auchan-bootstrap-navbar-active-color: @auchan-white-color;
@auchan-bootstrap-navbar-active-bg-color:@auchan-red-darker-color;
@auchan-bootstrap-navbar-open-color: @auchan-white-color;
@auchan-bootstrap-navbar-open-bg-color:@auchan-red-darker-color;
//== Panels
@auchan-panel-header-title-width: calc(~"99% - 80px");
@auchan-panel-help-header-title-width: calc(~"99% - 40px");
/* Fonts */
@auchan-panel-header-title-font-size:  1.6rem;
@auchan-panel-header-title-font-weight: bold;
@auchan-panel-header-buttons-font-size: 2em;
@auchan-bootstrap-panel-heading-a-font-size: 16px;
@auchan-bootstrap-panel-heading-a-font-weight: bold;
/* Colors */
@auchan-panel-bg-color: @auchan-black-color;
@auchan-panel-main-bg-color: @auchan-grey-color;
@auchan-panel-help-bg-color: #2C3E50;
@auchan-bootstrap-panel-heading-a-color: @auchan-red-color;
@auchan-tile-bg-color: @auchan-white-color;
//== Forms
/* groupboxes */
@auchan-groupeboxes-color: @auchan-white-color;
@auchan-groupeboxes-bg: @auchan-groupeboxes-color;
@auchan-groupeboxes-hover-bg: @auchan-red-dark-color;
@auchan-groupeboxes-hover-border-color: @auchan-red-dark-color;
@auchan-groupeboxes-label-hover-color: @auchan-white-color;
@auchan-multiselect-label-hover-bg: @auchan-red-dark-color;
//== Lists
@auchan-list-elt-bg-color: @auchan-white-color;
/* Isotope */
@auchan-isotope-elt-link-bg: @auchan-white-color;
@auchan-isotope-elt-content-wrapper-width: ~"100% - 165px";
//== Modals
@auchan-bootstrap-modal-title-font-size: 20px;
@auchan-bootstrap-modal-title-font-weight: bold;
@auchan-bootstrap-modal-title-color: @auchan-red-color;
@auchan-bootstrap-modal-body-font-size: 14px;
@auchan-bootstrap-modal-body-color: #555555;
@auchan-bootstrap-modal-body-font-weight: bold;
SomMeri commented 10 years ago

The problem seems to be in wro4j, I opened a new issue there https://github.com/alexo/wro4j/issues/187 . Wro4j has its own imports handling which treats the "//*" as a start of a block comment instead of a single line comment.

I will close this since the input less passed to less4j is really syntactically incorrect.

M3lkior commented 10 years ago

Okay :)