Updating CSS fails for Diamond 5.0.0

[jepsar]

I'm trying to figure out how to update the Diamond theme with changes from the PrimeFaces SASS Theme. To start off, I simply wanted to update the CSS from the downloaded theme as is. I'm on Diamond 5.0.0, 1.32.6 compiled with dart2js 2.10.5 (macOS).

When I try this (from https://www.primefaces.org/diamond/documentation.xhtml):

sass --update src/main/webapp/resources:src/main/webapp/resources --no-source-map

I'm getting:

Error: Undefined function.
    ╷
109 │         margin-top: math.div(-1 * $iconSize, 2);
    │                     ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵
  src/main/webapp/resources/sass/theme/designer/components/button/_button.scss 109:21  @import
  src/main/webapp/resources/sass/theme/designer/_components.scss 8:9                   @import
  src/main/webapp/resources/sass/theme/_theme_dark.scss 3:9                            @import
  src/main/webapp/resources/primefaces-diamond-blue-dark/theme.scss 10:9               root stylesheet

Any ideas on how to fix this? CC @mertsincan

[jepsar]

I've upgraded SASS to 1.71.1 compiled with dart2js 3.3.0, but that gives me:

Deprecation Warning on line 230, column 36 of src/main/webapp/resources/sass/variables/theme/_theme_dark.scss: 
!default should only be written once for each variable.
This will be an error in Dart Sass 2.0.0.
    ╷
230 │ $radiobuttonIconSize:12px !default !default;
    │                                    ^^^^^^^^
    ╵

Looks better, no errors. However, I don't see any updated files in the resources folders.

[melloware]

Yep that double !default just looks like a mistake.

[jepsar]

Pasting your response on Discord here, @melloware

Also I just downloaded the latest Babylon for PF13 and you are right the CSS doesn't recompile but its easy to fix in the pom.xml just add this plugin and it will recompile on every build.

            <plugin>
                <groupId>io.github.cleydyr</groupId>
                <artifactId>dart-sass-maven-plugin</artifactId>
                <version>1.3.1</version>
                <executions>
                    <execution>
                        <id>generate-css-using-sass</id>
                        <phase>generate-resources</phase>
                        <goals>
                            <goal>compile-sass</goal>
                        </goals>
                    </execution>
                </executions>
                <configuration>
                    <inputFolder>${basedir}/src/main/webapp/resources/</inputFolder>
                    <outputFolder>${basedir}/src/main/webapp/resources/</outputFolder>
                    <update>true</update>
                    <noSourceMap>true</noSourceMap>
                    <style>COMPRESSED</style>
                    <quiet>false</quiet>
                </configuration>
            </plugin>

[kwee27]

Perfect ... thanks!!!

[jepsar]

@melloware one thing though, how can adding dependencies to the pom affect a sass build?

[melloware]

@jepsar great question let me answer what I "think" you are asking. So in most Premium Templates the Documentation page says to compile SASS do something like below which requires NPM or the SASS CLI installed.

But you don't need that with the Maven Plugin above it downloads the SASS CLI and runs it for you as part of your generate-resources step. So adding that plugin will automatically recompile your SASS every time you build the theme without any extra steps.

Does that answer your question?

[jepsar]

Yeah, I was king of thinking you were using a Maven build instead. Again I still need to round this up at our side and then I'll add this to the Sass project readme in the PF repo.