[KULRICE-9717] Add maven plugin for compiling LESS files Created: 11/Jun/13  Updated: 12/Aug/13  Resolved: 18/Jul/13

Status: Closed
Project: Kuali Rice Development
Component/s: Development
Affects Version/s: None
Fix Version/s: 2.3
Security Level: Public (Public: Anyone can view)

Type: Task Priority: Critical
Reporter: Jerry Neal (Inactive) Assignee: Corey Pedersen (Inactive)
Resolution: Fixed Votes: 0
Labels: None
Σ Remaining Estimate: Not Specified Remaining Estimate: Not Specified
Σ Time Spent: Not Specified Time Spent: Not Specified
Σ Original Estimate: Not Specified Original Estimate: Not Specified

Issue Links:
Rely
is relied upon by KULRICE-8910 Allow for using Bootstrap to bring in... Closed
Sub-Tasks:
Key
Summary
Type
Status
Assignee
KULRICE-9818 Add wro4j dependencies to project Sub Task Closed Jerry Neal  
Rice Module:
KRAD
KRAD Feature Area:
UIF Component
KAI Review Status: Not Required
KTI Review Status: Not Required
Code Review Status: Not Required
Include in Release Notes?:
Yes

 Description   

As part of the new theme work we want to add support for LESS: http://lesscss.org/. In order to use LESS the files need compiled to CSS. We would like this to be integrated into the maven build process (similar to how minification is done).

There are a few maven plugins out there. Search for 'LESS maven plugin'. Take a look through these and see which looks the best.

Next we'll need to add the plugin to the krad-web pom. This is where the minify plugin is currently at.

What we would like to happen is for the plugin to pick up any '.less' files under the web /themes folder. Compile each found file to '.css' in the directory. If we need to be more specific about paths that would be ok, but it would be nice if we could keep it generic like this.

To test, just create a .less file somewhere in /themes, and verify the .css file is created when we build krad-web



 Comments   
Comment by Corey Pedersen (Inactive) [ 14/Jun/13 ]

This entry below for rice-krad-web pom.xml will compile less files
from /krad/themes/kns/test_kns.less
and
/krad/themes/ks/test_ks.less
to
/krad/css/kns/test_kns.css
and
/krad/css/ks/test_ks.css

      <plugin>
        <groupId>org.lesscss</groupId>
        <artifactId>lesscss-maven-plugin</artifactId>
        <version>1.3.3</version>
        <configuration>
          <sourceDirectory>${basedir}/src/main/webapp/krad/themes</sourceDirectory>
          <outputDirectory>${basedir}/src/main/webapp/krad/css</outputDirectory>
          <compress>false</compress>
          <force>true</force>
          <includes>
            <include>*/*.less</include>
          </includes>
        </configuration>
        <executions>
          <execution>
            <phase>generate-resources</phase>
            <goals>
              <goal>compile</goal>
            </goals>
          </execution>
        </executions>
      </plugin>
Comment by Jerry Neal (Inactive) [ 16/Jun/13 ]

Corey,

Looks great. I am assuming we can have the CSS go to the same directory as the LESS by just making the outputDirectory the themes directory?

thanks,
Jerry

Comment by Jerry Neal (Inactive) [ 17/Jun/13 ]

Corey,

The next step with this is to allow for LESS variable substitution. What would like to happen, is the variables get picked up from a 'theme.properties' file in the directory. Standard properties file, where the key is the LESS variables and the value is the value for the variable.

As a test, we can grab the bootstrap.less file, and then build a properties file from the default values bootstrap provides.

See

http://bootstrap.lesscss.ru/less.html
http://twitter.github.io/bootstrap/customize.html

I would take the variables from the second resource. The first one seems a bit out of date.

Note each theme directory can have its own theme.properties, so there could end up being multiple compilations.

thanks,
Jerry

Comment by Jerry Neal (Inactive) [ 17/Jun/13 ]

Corey,

We will also need to test picking up nested directories. For example, under /themes/example/stylesheets they should be able to create directories as nested as they want. We would pick up the less files in each directory and dump a css file in that same directory.

Jerry

Comment by Corey Pedersen (Inactive) [ 17/Jun/13 ]

This will recursively scan the themes directory and compile .less files to .css files in the same directory.

<configuration>
    <sourceDirectory>${basedir}/src/main/webapp/themes</sourceDirectory>
    <outputDirectory>${basedir}/src/main/webapp/themes</outputDirectory>
    <compress>false</compress>
    <force>true</force>
    <includes>
        <include>**/*.less</include>
    </includes>
</configuration>
Comment by Corey Pedersen (Inactive) [ 18/Jun/13 ]

Jerry: Here is my current directory structure working for less bootstrap testing.

/src/main/webapp
    /krad
        /bootstrap		// installation of bootstrap
            /img
            /js
            /less
    /themes
        /kboot
            /images
            /scripts
            /stylesheets
                /test.less
                /test.css	// generated css file from test.less

            /defaults.less	// copy of bootstrap/variables.less which can be overiden for this theme
            /defaultVariables.less  // Alternate name for defaults.less 
	
            /theme.less		// modified bootstrap.less file 
				// with override of bootstrap.variables.less 
				// to defaults.less | defaultVariables.less

themes.less snippet

// Core variables and mixins
// @import  "defaults.less"; // Modify this for custom colors, font-sizes, etc
@import  "defaultVariables.less"; // Modify this for custom colors, font-sizes, etc
// @import  "../../krad/bootstrap/less/variables.less"; // Modify this for custom colors, font-sizes, etc

@import  "../../krad/bootstrap/less/mixins.less";
Comment by Corey Pedersen (Inactive) [ 18/Jun/13 ]

To test less compilation ....\rice-framework\krad-web>mvn generate-resources -DskipTests=true

Comment by Jerry Neal (Inactive) [ 18/Jun/13 ]

Corey,

This is looking good. Let's make a few adjustments.

1) Move bootstrap install to themes folder so it can be inherited from

/themes
/bootstrap
/images
/scripts
/stylesheets

As part of this rename the sub-directories to match our structure (will require updating paths in the bootstrap files)

2) Lets go with variables.less for the variables file

3) Because of the parent theme inheritance and some other issues I think it might be in our best interest to build the theme when the web app initializes (with a listener). Can you look into invoking a less compiler directory with Java code?

Thanks!

Jerry

Comment by Corey Pedersen (Inactive) [ 18/Jun/13 ]

A bit of a problem moving bootstrap under themes. If we do the recursive compile of all less files under themes, then each of the import less files(ex: accordion.less) are individually compiled without their variable values. ERROR.

To correct this add the following to the pom.xml. (just after includes)

    <excludes>
        <exclude>bootstrap/**/*.less</exclude>
    </excludes>
Comment by Corey Pedersen (Inactive) [ 18/Jun/13 ]

Jerry: If we are going to add a stylesheets directory for theme less files we should change he excludes.

    <excludes>
        <exclude>bootstrap/less/*.less</exclude>
    </excludes>
Comment by Corey Pedersen (Inactive) [ 18/Jun/13 ]

Jerry: Did I misunderstand? "1) Move bootstrap install to themes folder so it can be inherited from"

Are you saying that to allow bootstrap to be inherited from the structure be:

/themes
   /bootstrap
       /kboot
           /images
           /scripts
           /stylesheets
           /themes.less
           /variables.less
       /kns-theme
           ....
       /ks-theme
           ....
       /less
       /js
       /img
       /docs     
Comment by Corey Pedersen (Inactive) [ 18/Jun/13 ]

Update of themes.less for new structure

// Core variables and mixins
@import  "variables.less"; // Modify this for custom colors, font-sizes, etc

@import  "../bootstrap/less/mixins.less";
....
Comment by Corey Pedersen (Inactive) [ 19/Jun/13 ]

Jerry: One question is that if we use the lesscss compiler there is the <compress>true</compress> feature. It is not exactly the same as minify, but close. It strips all unneeded comments and space out, but leaves the lines separate. So you get most of the benefit of space compaction on the produced css files, but they are still somewhat readable.

Comment by Jessica Coltrin (Inactive) [ 18/Jul/13 ]

According to Jerry, this is done, so I'm resolving.

Generated at Tue Sep 29 05:41:40 CDT 2020 using JIRA 7.0.11#70121-sha1:19d24976997c1d95f06f3e327e087be0b71f28d4.