Replace maven-frontend-plugin with sass-cli-maven-plugin

Use Maven wrapper around Dart SASS binary instead of downloading and installing NodeJS / NPM locally. This also eliminates dependency from Grunt and its modules.

README.md

@@ -46,10 +46,6 @@ Application.setUserAgentStylesheet(new PrimerDark().getUserAgentStylesheet());
 You can either use CLI or create run configuration in your favorite IDE.
 
 ```sh
-# except building parent module, this will also install NodeJS along with NPM
-# and all JS dependencies into root project directory, you don't need to install NodeJS system-wide
-mvn --non-recursive install
-
 # compile SASS into styles/dist directory,
 # you can stop here and use compiled CSS files in your app just like that
 mvn install -pl styles
@@ -65,25 +61,19 @@ After building module dependencies you can play with the sampler application. If
 mvn javafx:run -pl sampler
 ```
 
-If you want to use hot reload (update CSS without restarting sampler) you have to start app in development mode. There's [ATLANTAFX_MODE](https://github.com/mkpaz/atlantafx/blob/master/sampler/src/main/java/atlantafx/sampler/Launcher.java#L45) variable for this. In that mode app won't use CSS from `base` module classpath, but from the `sampler/target/classes/atlantafx/sampler/theme-test` directory. Use `styles/compile-scss-dev.sh` to compile CSS files into that destination.
+If you want to use hot reload (update CSS without restarting sampler) you have to start app in development mode. There's [ATLANTAFX_MODE](https://github.com/mkpaz/atlantafx/blob/master/sampler/src/main/java/atlantafx/sampler/Launcher.java#L45) variable for this. In that mode app won't use CSS from `base` module classpath, but from the `sampler/target/classes/atlantafx/sampler/theme-test` directory. Use `-Pdev` to compile CSS files into that destination.
 
 ```sh
-# compile CSS files first or there will be an exception
+# run sampler app in dev mode
-cd styles
+mvn javafx:run -pl sampler -Pdev
-./compile-scss-dev.sh
-cd -
 
-# then run sampler along with setting env variable
+# run hot reload sass
-ATLANTAFX_MODE=dev mvn javafx:run -pl sampler
+mvn compile -pl styles -Pdev
 ```
 
-This may look a bit complicated, but at the end you just need to create 4 IDE run configurations and open VS Code instance in parallel in styles directory to edit and rebuild CSS files. Run `compile-scss-dev.sh` script each time to reflect made changes without restarting the application.
-
 More details can be found in the source code:
 
 * See [github worklow](https://github.com/mkpaz/atlantafx/blob/master/.github/workflows/tagged-release.yml) for install instructions.
-* See [Gruntfile.js](https://github.com/mkpaz/atlantafx/blob/master/styles/Gruntfile.js) to familiarize with CSS compilation.
-
 
 ## Motivation
 

base/pom.xml

@@ -44,17 +44,6 @@
                 <filtering>false</filtering>
             </resource>
         </resources>
-
-        <plugins>
-            <!-- not used, just prevents installing NodeJS to the module dir -->
-            <plugin>
-                <groupId>com.github.eirslett</groupId>
-                <artifactId>frontend-maven-plugin</artifactId>
-                <configuration>
-                    <installDirectory>${project.parent.basedir}</installDirectory>
-                </configuration>
-            </plugin>
-        </plugins>
     </build>
 
 </project>

package.json

@@ -1,12 +0,0 @@
-{
-  "name": "atlanta",
-  "version": "1.0.0",
-  "devDependencies": {
-    "grunt": "^1.4.1",
-    "grunt-cli": "^1.4.1",
-    "grunt-contrib-concat": "^2.0.0",
-    "grunt-contrib-cssmin": "^4.0.0",
-    "grunt-sass": "^3.1.0",
-    "sass": "^1.49.9"
-  }
-}

pom.xml

@@ -60,7 +60,6 @@
 
         <java.version>17</java.version>
         <openjfx.version>17.0.0.1</openjfx.version>
-        <nodejs.version>v16.14.2</nodejs.version>
 
         <app.name>AtlantaFX</app.name>
         <!-- DO NOT use ${project.version} as jpackage will fail on
@@ -195,9 +194,9 @@
                     <version>3.0.0</version>
                 </plugin>
                 <plugin>
-                    <groupId>com.github.eirslett</groupId>
+                    <groupId>us.hebi.sass</groupId>
-                    <artifactId>frontend-maven-plugin</artifactId>
+                    <artifactId>sass-cli-maven-plugin</artifactId>
-                    <version>1.9.1</version>
+                    <version>1.0.1</version>
                 </plugin>
                 <plugin>
                     <groupId>org.apache.maven.plugins</groupId>
@@ -262,34 +261,6 @@
                 </plugin>
             </plugins>
         </pluginManagement>
-        <plugins>
-            <plugin>
-                <groupId>com.github.eirslett</groupId>
-                <artifactId>frontend-maven-plugin</artifactId>
-                <configuration>
-                    <nodeVersion>${nodejs.version}</nodeVersion>
-                    <workingDirectory>${project.basedir}</workingDirectory>
-                </configuration>
-                <executions>
-                    <execution>
-                        <id>install-node-and-npm</id>
-                        <goals>
-                            <goal>install-node-and-npm</goal>
-                        </goals>
-                    </execution>
-                    <execution>
-                        <id>install-npm-packages</id>
-                        <phase>generate-resources</phase>
-                        <goals>
-                            <goal>npm</goal>
-                        </goals>
-                        <configuration>
-                            <arguments>install</arguments>
-                        </configuration>
-                    </execution>
-                </executions>
-            </plugin>
-        </plugins>
     </build>
 
     <profiles>

sampler/pom.xml

@@ -149,13 +149,6 @@
                     </execution>
                 </executions>
             </plugin>
-            <plugin>
-                <groupId>com.github.eirslett</groupId>
-                <artifactId>frontend-maven-plugin</artifactId>
-                <configuration>
-                    <installDirectory>${project.parent.basedir}</installDirectory>
-                </configuration>
-            </plugin>
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
                 <artifactId>maven-dependency-plugin</artifactId>
@@ -284,6 +277,22 @@
     </build>
 
     <profiles>
+        <profile>
+            <id>dev</id>
+            <build>
+                <plugins>
+                    <plugin>
+                        <groupId>org.openjfx</groupId>
+                        <artifactId>javafx-maven-plugin</artifactId>
+                        <configuration>
+                            <options>
+                                <option>-Datlantafx.mode=dev</option>
+                            </options>
+                        </configuration>
+                    </plugin>
+                </plugins>
+            </build>
+        </profile>
         <profile>
             <id>linux-active</id>
             <activation>

styles/Gruntfile.js

@@ -1,29 +0,0 @@
-module.exports = function (grunt) {
-    const SASS_COMPILER = require('sass');
-    const CSS_OUTPUT_DIR = process.env.NODE_ENV !== 'dev' ? 'dist' : '../sampler/target/classes/atlantafx/sampler/theme-test';
-
-    grunt.initConfig({
-        cssOutputDir: CSS_OUTPUT_DIR,
-        sass: {
-
-            options: {
-                implementation: SASS_COMPILER
-            },
-            dist: {
-                files: {
-                    '<%= cssOutputDir %>/primer-light.css': [ 'src/primer-light.scss' ],
-                    '<%= cssOutputDir %>/primer-dark.css':  [ 'src/primer-dark.scss'  ]
-                }
-            }
-        },
-        cssmin: {
-            dist: {
-                files: {}
-            }
-        }
-    });
-
-    grunt.loadNpmTasks('grunt-sass');
-    grunt.loadNpmTasks('grunt-contrib-cssmin');
-    grunt.registerTask('default', ['sass', 'cssmin']);
-};

styles/compile-scss-dev.sh

@@ -1,6 +0,0 @@
-#!/usr/bin/env sh
-
-# This scipt compiles SCSS directly to the sampler classpath for hot reload (CSSFX).
-
-PATH="../node:$(../node/npm bin):$PATH"
-NODE_ENV=dev grunt --verbose --gruntfile=Gruntfile.js

styles/pom.xml

@@ -10,28 +10,35 @@
     </parent>
     <artifactId>atlantafx-styles</artifactId>
 
+    <properties>
+        <scss.inputDir>${project.basedir}/src</scss.inputDir>
+        <css.outputDir>${project.basedir}/dist</css.outputDir>
+    </properties>
+
     <build>
         <plugins>
             <!-- compile SCSS -->
             <plugin>
-                <groupId>com.github.eirslett</groupId>
+                <groupId>us.hebi.sass</groupId>
-                <artifactId>frontend-maven-plugin</artifactId>
+                <artifactId>sass-cli-maven-plugin</artifactId>
                 <configuration>
-                    <installDirectory>${project.parent.basedir}</installDirectory>
+                    <args>
+                        <arg>${scss.inputDir}/primer-light.scss:${css.outputDir}/primer-light.css</arg>
+                        <arg>${scss.inputDir}/primer-dark.scss:${css.outputDir}/primer-dark.css</arg>
+                        <arg>--no-source-map</arg>
+                    </args>
                 </configuration>
                 <executions>
                     <execution>
-                        <id>run-grunt</id>
+                        <id>run-sass</id>
                         <phase>generate-resources</phase>
                         <goals>
-                            <goal>grunt</goal>
+                            <goal>run</goal>
                         </goals>
-                        <configuration>
-                            <arguments>--verbose</arguments>
-                        </configuration>
                     </execution>
                 </executions>
             </plugin>
+
             <!-- compress resulting CSS into archive for distribution -->
             <plugin>
                 <groupId>org.apache.maven.plugins</groupId>
@@ -67,4 +74,14 @@
         </plugins>
     </build>
 
+    <profiles>
+        <profile>
+            <id>dev</id>
+            <properties>
+                <css.outputDir>${project.basedir}/../sampler/target/classes/atlantafx/sampler/theme-test</css.outputDir>
+                <sass.watch>true</sass.watch>
+            </properties>
+        </profile>
+    </profiles>
+
 </project>