acdvorak / intellij-lessc-plugin

LESS CSS compiler plugin for the JetBrains IntelliJ platform (IntelliJ IDEA 11+, PhpStorm 5+, WebStorm 5+, RubyMine 4.5+)

LESS CSS Compiler Plugin for the IntelliJ Platform

LESS CSS Compiler monitors LESS files and automatically compiles them to CSS whenever they change.

Compiler Version

This plugin uses version 1.6.0 of the official less.js compiler from lesscss.org.

IDE Compatibility

This plugin is ONLY compatible with IntelliJ IDEA 11+, PhpStorm 5+, and WebStorm 5+. It should also be compatible with RubyMine 4.5+, but has not been tested.

Features

1. Recursive Directory Monitoring

   LESS CSS Compiler watches directories (and subdirectories) for changes to LESS files and automatically compiles them to CSS when they are saved in the editor (or when IntelliJ detects that they were modified outside the IDE).

   You can monitor as many LESS directories as you like. You can also specify as many output directories as you like so that compiled CSS files will be copied to multiple locations (e.g., a local src directory under version control and a mounted target directory on a remote server).

   The directory structure of the output CSS directories will be identical to the structure of the source LESS directory.

2. @import Dependency Resolution

   Files that @import a modified LESS file will be re-compiled automatically.

   For example, if home.less, about.less, and contact.less all @import "common.less", modifying common.less will cause all three dependents to be re-compiled as well.

3. Include / Exclude File Patterns

   Prevent specific LESS files from being compiled by specifying include / exclude patterns (glob) that match against filename, folder name, or any part of the complete path to the LESS file.

4. Move, Copy, and Delete Detection

   When a LESS file is moved, copied, or deleted, LESS CSS Compiler will offer to do the same to the corresponding CSS file(s).

5. Virtual Filesystem Notifications

   Unlike other solutions, this plugin is smart enough to notify IntelliJ when CSS files are changed, moved, copied, or deleted. In most cases, updated CSS files will be immediately reflected in the editor and Project tree view.

6. Selective Compilation

   If the plugin somehow fails to catch changes to a LESS file, simply right-click anywhere in the editor or Project tree and select "Compile to CSS". You can also compile an entire directory by right-clicking on it in the Project tree.

7. Error Notifications

   Any errors encountered during the compilation process will produce an error notification balloon in the IDE containing a link to the file and the line number that caused the error.

Usage

Installation

1. Go to File > Settings (Windows / Linux) or IntelliJ IDEA > Preferences (Mac)
2. Install the plugin from the IntelliJ plugin repository
3. Restart the IDE

Configuration

1. Go to File > Settings (Windows / Linux) or IntelliJ IDEA > Preferences (Mac)
2. Under Project Settings, select LESS Compiler
3. Click the + button to add a new LESS profile
4. Choose a LESS source directory
5. Add one or more CSS output directories and click OK
6. Make changes to a LESS file and save it
7. Rejoice!

Directory Structure

LESS CSS Compiler allows you to maintain arbitrarily complex directory structures with ease. For example, suppose we have a project with the following directory structure (LESS CSS Maven Plugin's default layout):

projectRoot/
  +  src/main/
  |  +  less/
  |  |  +  common/
  |  |  |  -  common.less
  |  |  |  -  layout.less
  |  |  |  -  reset.less
  |  |  +  home/
  |  |  |  -  home.less
  |  |  +  checkout/
  |  |  |  -  checkout.less
  |  |  |  -  billing.less
  |  |  |  -  payment.less
  |  +  webapp/
  |  |  +  media/
  |  |  |  +  css/
  |  |  |  |  +  common/
  |  |  |  |  +  home/
  |  |  |  |  +  checkout/
  +  target/
  |  +  media/
  |  |  +  css/
  |  |  |  +  v2/
  |  |  |  |  +  common/
  |  |  |  |  +  home/
  |  |  |  |  +  checkout/

Such a structure would be impossible to maintain using other tools. With LESS CSS Compiler, it's a breeze.

Known Issues

• Slow First Compile

  The first time you update a .less file it will take a few seconds to compile. This is because LESS CSS Compiler uses the Rhino JavaScript engine to run less.js, and Rhino takes a while to initialize. But don't worry - after the initial compilation, all future compiles should complete in < 1 sec.

Alternatives

Notable alternatives to this plugin:

• SimpLESS (Win / Mac) - free
• WinLess (Win) - free

---

Developers

Prerequisites

1. Git
2. IntelliJ IDEA 11+ (Community or Ultimate)
3. JDK 6
4. Maven 2 or 3

Running / Debugging the Plugin

1. Clone the repository:

   git clone git://github.com/acdvorak/intellij-lessc-plugin.git
   

2. Ensure required plugins are enabled in IntelliJ:

   • Plugin DevKit
   • UI Designer
   • Maven Integration
   • Properties
   • I18n for Java

3. Import project into IntelliJ:

   1. File > Import Project...

   2. Select the root directory of the Git repository you cloned

   3. Accept the default project name and location

   4. Check all source file directories

   5. UNCHECK the lessc-plugin library

   6. Check all modules

   7. If prompted "The module file 'lessc-plugin.iml' already exist. Would you like to overwrite it?", click Reuse

   8. Select the IntelliJ SDK (IDEA IU-xxx.yyy or IDEA IC-xxx.yyy)

      If you don't see the IntelliJ SDK:

      1. Click the + button and select IntelliJ Platform Plugin SDK
      2. Select the appropriate IntelliJ SDK directory (IntelliJ should automatically select it for you)

   9. Click "Finish"

4. IMPORTANT: Mark module directories appropriately:

   Go to File > Project Structure and select Modules under Project Settings.

   You can also right-click on each directory in the Project tree and select Mark Directory As.

   Directory	Type
   lessc-plugin/src	Sources Root
   lessc-plugin/resources	Resources Root
   asual-lesscss-engine/src/main/java	Sources Root
   asual-lesscss-engine/src/main/resources	Resources Root
   asual-lesscss-engine/src/test/java	Test Sources Root
   asual-lesscss-engine/src/test/resources	Test Resources Root

5. Add a Run/Debug configuration for lessc-plugin, type = Plugin

6. Test the plugin by going to Run > Debug lessc-plugin

TODO

• When a .less file is a descendant of multiple profiles, but is only matched by the include/exclude patterns of a single profile, and the .less file has a syntax error in it, the error message notification is prematurely expired when a later profile's compile job completes "successfully" without changing any .css files (because the .less file doesn't match that profile's patterns).
• "Copy" profile button copies the saved state of the selected profile (it should copy the current state).

---

Credits

1. LESS Engine: Asual DZZD (GitHub project)
2. JavaScript Engine: Mozilla Rhino (GitHub project)
3. LESS Compiler: Alexis Sellier (GitHub project)
4. IntelliJ Plugin: Andy Dvorak (Github project)

Copyright and License

Copyright 2012-2013 Andrew C. Dvorak.

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

intellij-lessc-plugin's Issues

Editing an existing Less profile creates a new one

Clean up Notifier logging

Successful compiles log twice, but they should really only log one entry to the Event Log tool window. The code also needs to be cleaned up.

When detecting changes, compile main.less only

Hi Andrew,

Would it be possible to when the plugin detect a change in one file, compile only an specific file?

The problem I have is in my projects, the way I usually work with LESS is I have a main.less and then I import rest from the files from there. For example

main.less
pages/page1.less
pages/page2.less
...

From main.less I import page1.less and page2.less. And in my site I only load a single file: main.css (a compiled version of main.less with all references).

So what it would be great for me is that every time a change in any file inside the folder is detected, it triggers the compilation of ONLY main.less, and then through the references inside main.less, all of them will be compiled.

Cheers,

Move "Reset prompts" button outside of CssConfigurableForm

Pressing the "Reset prompts" button in one LESS profile does not disable the same button in other LESS profiles. There should only be one button for the entire LessProfilesPanel.

LESS CSS Compiler Error, Cannot find function toCSS in object

I have a fairly clean install of bootstrap but get the following error when trying to compile a main.less file

LESS CSS Compiler Error
         main.less: Syntax Error: Cannot find function toCSS in object [object Object]. (line -1, column -1) near
         * Bootstrap v2.2.0

If I remove the the top comment, error changes to

LESS CSS Compiler Error
         main.less: Syntax Error: Cannot find function toCSS in object [object Object]. (line -1, column -1) near
         // CSS Reset

Add line numbers to the compiled css

From YouTrack http://youtrack.jetbrains.com/issue/WEB-2198 via Tim Kindberg

"Whatever you choose to do with compilation, please consider putting debug outputs in the compiled css, so we can easily trace our way back to the original .less file line number."

Commit changes in all modified LESS files to disk before compiling

Many users are seeing "Name Error" exceptions when compiling because not all LESS files have been saved to disk.

Name Error: "mixin" is undefined

Hi. I use your plugin with webstorm 5.0.4, plugin version is 2.6.1
I have main less file, and some child files wich is imported to main.
for example in main import look like:
@import 'less/variables.less';
@import 'less/min-1200px.less';

I have 1 mixin in variables.less:
.center{
margin: 0 auto;
}

and i use it in min-1200px.less:

.site-body{
max-width: 1200px;
.center;
}

but plagin wrote error:
LESS CSS Compiler Error
min-1200px.less: Name Error: .center is undefined

and profile for base.less duplicate in "LESS Profiles"
if i did not create base.less profile it auto-created .

Add "Compile to CSS" Action to context menu for .less files

Barrage of error toasters

I am testing this plugin in phpStorm 5.0.4 and it works as described apart from the ctrl-s instruction. For some reason this plugin starts compiling whenever you type even a single character. So while typing you get a constant stream of error-toaster.

Add include / exclude pattern support (regex and/or glob)

Match against path or filename

Hide previous error notifications for the same file when compilation succeeds

If an error notification pops up and the user doesn't dismiss it, but instead immediately corrects the error and saves the file, the "Success" balloon will appear but the error notification doesn't go away.

(2.6.2 )file names with dot makes error

file names like blah.blah makes compilation error.

Optional .less extension support for @imports

Support both @import "lib" and @import "lib.less"

Compilation breaks UTF-8 characters

Hi,

I have a .less file with the following code:

a:before {
content: "► ";
}

The plugin produces the following output:

a:before {
content: "‚ñ∫ ";
}

I tested this on PHPStorm 5.0.4 and PHPStorm 6 EAP latest build. I am on a Mac Pro (10.7.5)

I also tried other utf-8 characters like umlauts. They are also broken in the compiled .css file.
The standalone mac Less.app works fine.

Native Node.js support (instead of Rhino)

Auto-detect Node.js (and allow user to specify node location via preference pane).

If Node.js is available, use node instead of Rhino to compile.

How to compile/install the plugin?

Hello.
I have been using PhpStorm for a long time, but I have never installed new plugins (like this) from sources. When I tried to do it, I felt so unlucky :)
I have downloaded IDEA 11.1.4 community edition, there I click "File -> Open project", and... it is unable to select iml-files (only folders), OK button in popup "open project" is permanently not activated...

Make CSS output directories more user friendly in preference pane

LESS files don't compile in Plugin

I have a bunch of LESS files and they compile just fine using lessc or SimpLESS, however when compiling through the plugin, it just errors.

Here are the LESS files I'm trying to compile: http://www.tech-burrow.com/github/less.zip

Rename notification groups

See Notifier.java

Listed under Settings > Notifications

Updated README.md to reflect new compiler library

Also update Known Issues, TODOs, etc.

java.io.IOException

Updated yesterday to 2.1.1

No .less will compile. All files give java.io.IOException

Downgraded to 2.1.0, still getting this. No stracktrace presented anywhere.

LESS CSS Compiler Error
mixins.less: java.io.IOException: No such file C:\dev\svnlocal\trunk\xxx\src\main\resources\MODULE-INF\web\stylesheets\less\mixins.less

These files do exist... Checked windows file permissions. Also tried moving files and creating new files. All give the same error.

VFS refresh doesn't work when CSS files don't already exist

The Project tree view doesn't refresh after the first compile unless the CSS files already exist. Switching to another app or manually synchronizing the parent CSS dir properly shows the compiled CSS files.

no autodeploy output file after compile

Make plugin generic and language-agnostic

Separate out the core logic and behavior and move language-specific code into pluggable modules. This will allow additional languages to take advantage of this plugin's architecture: e.g., Jade and SASS.

CSS output directories don't get saved when modified in preference pane

They must be deleted and re-added

Multiple notifications for the same file

Because all other LESS files are saved before compiling, it's possible to trigger a second compile job from the first. This may result in 2 identical notifications being shown to the user instead of 1.

Doesn't execute multiple profiles

I wanted to create two profile for the same less files. One which generates dev css files which are not compressed, and another one which generates compressed css files for the live environment.
But it seems like only the first matching profile is executed. Looks like a bug to me.

Process change events in batch

Refactor LessCompileJob to allow multiple sourceLessFiles and maintain a separate dependency tree for each.

Use BulkFileListener to process VFS changes in batch:

This API gives you all the changes detected during the refresh operation in one list, and lets you process them in batch.

See http://confluence.jetbrains.net/display/IDEADEV/IntelliJ+IDEA+Virtual+File+System

Incorrect line number for errors when using imports

When there is an error in in a LESS file that imports other files, the line number given in the error message is not correct. It seems to correspond to the number the line would be if all the imports were concatenated inline before it.

Eg I put an error on line 7 of a file, and have imported another 53 line file. The error message tells me that it is on line 59 (I'm assuming something is replacing the import statement with the actual contents of the file)

Obviously this makes it more difficult to track down the error.

Changing less files does not re-compile any other less file that is importing the changed file

I have a parent Structure.less which imports other less files, when I change the imported less files, the structure.less does not re-compile, forcing me to constantly manually re-compile it

Improve threading speed by reducing unnecessary synchronizations and deadlocks

Use properties files for UI messages and i18n

Move, Copy, and Delete support

Disable "Compile to CSS" action if no CSS output directories are specified

Better yet, leave the action enabled and alert the user when they try to run it.

Nothing happens when saving (PHPStorm 5.0.4, Mac 10.8.2) and wrong error message

I have configured The PlugIn as shown in the screenshots. I do not have a setting "LESS Compiler" in Project Settings, only "LESS Profiles" but the content is the same.

When I'm saving a file, nothing happens, not even an error message shows up.

When I'm manually selecting "Compile to CSS" on the file or folder, I get the error message "The selected LESS file does not have any CSS output directories mapped to it and cannot be compiled. You can add CSS output directories under Settings > Project Settings > LESS Compiler."

But I already did that (see attached screenshots). But the setting is still called "LESS Profiles" instead of "LESS Compiler".

Can you please help me to figure out what is going wrong here?

Thanks
Maik

Problems with spaces in path name

When using a linux system if you have spaces in a path name eg /home/pete/PhpstormProjects/project name/lessfiles-devonly/style.less

Then you get a compile error

LESS CSS Compiler Error: style.less: java.io.IOException: No such file file:/home/pete/PhpstormProjects/project name/lessfiles-devonly/style.less

remove the space in project name and use projectName then all is ok.

LESS CSS compiler error

IDEA spits this:
"file.less: java.io.IOException: No such file C:\Users\myusername\IdeaProjects\myproject\less\file.less"
when trying to use the plugin. Maybe it's related to the patch Jetbrains pushed today, 11.1.4
I don't know what other info is needed, please advice

Cannot find function toCSS in object [object Object]

LESS CSS Compiler Error
gn-button.less: Syntax Error: Cannot find function toCSS in object [object Object]. (line -1, column -1) near
@import "../common/theme-vars.less";

IntelliJ 12 Support

The "LESS Compiler" menu doesn't show up under IntelliJ 12. Worked fine in 11 until I upgraded to 12.

If you could update the developer/debug instructions maybe I can try debugging it to see why it doesn't show up.

Thread safety when saving / compiling

Use concurrent event queue to manage file change events and compile jobs.

multi word profile names

Somehow I ended up with a profile whose name contained a space. The plugin totally freaked out, wouldn't let me edit or delete the profile. If I deleted the profile it would always come back when bringing up the preferences again. It also created a duplicate profile, or al least displayed a duplicate in the gui. I finally went into the lessc.xml config file to see about deleting the offending profile. That's when I realized the name had 2 words. Maybe the problem was with the entry key and not the name. Anyways, deleting the profile fixed it. If the problem is with the key maybe you can replace spaces with underscores when setting the entry key, and do this with the name too if necessary.

Build dependency tree before compiling

This will allow the plugin to display progress updates when two or more files are being compiled, and will help avoid duplicate compilations.

Wait for all save / compile request events to finish before actually compiling (see #23).

Support runner instead of autocompilation

Sometimes I do not want my file to be recompiled automatically. It would be nice to have runner (SHIFT+F10) or sidebar (like ant plugin has) to allow user to run it by my self

Less 1.3.3 ?

Looking at the file names this plugin seems to be using Less 1.3.1 instead of Less 1.3.3 which is the latest version.

Respect //simpless:!minify setting per-file

Move/copy/delete detection fails the first time

Fails when IDE first opens, as well as after moving an imported LESS file (which changes the @import path in dependent files but doesn't save them)

Add option to toggle absolute vs. canonical path resolution

Unable to add css output directory (PhpStorm 5.0.4)

Hello.
I have just installed a plugin from here: http://plugins.intellij.net/plugin?pr=&pluginId=7059 (downloaded, then in plugin manager "Install plugin from disk", selected "lib/lessc-plugin.jar", installed successfully).
Then I go to project settings, section "LESS compiler", add new item, select LESS directory. Then I click "+" in block "CSS Output directory", but nothing happens: just no reaction.
"Compile to CSS" in context menu also doesn't work.

Add screenshots to JetBrains plugin repository website