Change Aware SCSS compile filewatcher for Intellij

Vaadin 6 / 7 / 8
1

Below is a Intellij FileWatcher template for automatically compiling a custom theme’s style.css from scss sources.

We find that our developers prefer (for speed reasons) to manually compile the custom theme’s styles.css file locally once when
changes are made rather than the in browser compilation (since the in-browser compilation adds about 1.5 seconds to every page refresh).

We have been using Vaadin’s SassCompiler class to do that. Intellij recently introduced the FileWatcher plugin that support running a task when changes to a file and its “children” are made.

With the plugin installed and the file below added to the .idea/ directory, now the various scss files are compiled on the fly, even as you type (if Intellij detects no SCSS syntax errors).
To use it just replace the jar paths and jdk path (after installing the plugin).

The main downside is needing to hardcode the jar version, which I haven’t yet found a way around.

Enjoy!

P.S. Does anyone knows of a similar sharable Eclipse solution?

.idea/watcherTasks.xml:


<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
  <component name="ProjectTasksOptions">
    <TaskOptions isEnabled="true">
      <option name="arguments" value="-cp C:\Tetris\repository\com\vaadin\vaadin-theme-compiler\7.0.4\vaadin-theme-compiler-7.0.4.jar;C:\Tetris\repository\org\w3c\css\sac\1.3\sac-1.3.jar;C:\Tetris\repository\com\vaadin\vaadin-shared-deps\1.0.2\vaadin-shared-deps-1.0.2.jar  com.vaadin.sass.SassCompiler styles.scss styles.css" />
      <option name="checkSyntaxErrors" value="true" />
      <option name="description" value="Compiles .scss files into .css files" />
      <option name="exitCodeBehavior" value="ERROR" />
      <option name="fileExtension" value="scss" />
      <option name="immediateSync" value="true" />
      <option name="name" value="SCSS" />
      <option name="output" value="styles.css" />
      <option name="outputFilters">
        <array />
      </option>
      <option name="outputFromStdout" value="false" />
      <option name="passParentEnvs" value="true" />
      <option name="program" value="C:\Tetris\operations\programs\java\jdk1.6.0_37\bin\java.exe" />
      <option name="scopeName" value="Project Files" />
      <option name="trackOnlyRoot" value="true" />
      <option name="workingDir" value="$FileDir$" />
      <envs />
    </TaskOptions>
  </component>
</project>
2

Very nice!

You could probably use the original Sass compiler this way as well, if you find the current status of the Vaadin compiler limiting (it still lacks many of the useful features from the original Sass compiler).

3

Thanks for sharing the file watcher export xml. As the use of the file watcher with this leverages styles.css/custom-theme development to next level where I just replace styles.css in browser without redeployments.
Even without refresh page action in browser. :slight_smile:

For me the vaadin-theme-compiler.jar did not work as expected but vaadin-sass-compiler-0.9.10.jar worked :

<?xml version="1.0" encoding="UTF-8"?>
<TaskOptions>
  <TaskOptions>
    <option name="arguments" value="-cp  ./.m2/repository/com/vaadin/vaadin-themes/7.3.4/vaadin-themes-7.3.4.jar:./.m2/repository/org/w3c/css/sac/1.3/sac-1.3.jar:./.m2/repository/com/vaadin/vaadin-sass-compiler/0.9.10/vaadin-sass-compiler-0.9.10.jar:./.m2/repository/com/vaadin/vaadin-shared-deps/1.0.2/vaadin-shared-deps-1.0.2.jar com.vaadin.sass.SassCompiler $ModuleFileDir$/src/main/resources/VAADIN/themes/exampletheme/styles.scss $ModuleFileDir$/src/main/resources/VAADIN/themes/exampletheme/styles.css" />
    <option name="checkSyntaxErrors" value="true" />
    <option name="description" value="VaadinSassCompiler" />
    <option name="exitCodeBehavior" value="ALWAYS" />
    <option name="fileExtension" value="SCSS" /><!-- requires new "SCSS" file type with *.scss file extension not there by default -->
    <option name="immediateSync" value="false" />
    <option name="name" value="VaadinSassCompiler" />
    <option name="output" value="$ModuleFileDir$/src/main/resources/VAADIN/themes/exampletheme/" />
    <option name="outputFilters">
      <array />
    </option>
    <option name="outputFromStdout" value="false" />
    <option name="passParentEnvs" value="true" />
    <option name="program" value="$JDKPath$/bin/java" />
    <option name="scopeName" value="Project Files" />
    <option name="trackOnlyRoot" value="false" />
    <option name="workingDir" value="" />
    <envs />
  </TaskOptions>
</TaskOptions>