mickleroy / aem-sass-compiler Goto Github PK

View Code? Open in Web Editor NEW

48.0 9.0 18.0 64 KB

Enable Sass support for AEM

License: Other

Java 100.00%

aem sass

aem-sass-compiler's Introduction

Sass Compiler for AEM 6.1+

This bundle provides support for the Sass CSS pre-processor in Adobe Experience Manager 6.1 or above.

Features

Supports all the latest features of Sass:

Variables
Nesting
Partials
Imports
Mixins
Inheritance
Operators

Examples of supported @import directives:

@import 'file';
@import 'file.scss';
@import 'partials/file';
@import 'partials/file.scss';
@import 'file1', 'file2';
@import '/etc/designs/aem-sass-compiler/clientlib/file';
@import '/etc/designs/aem-sass-compiler/clientlib/file.scss';

If any one of the conditions below are met, the @import will be skipped and compiled to a CSS @import:

The file’s extension is .css
The filename begins with http://
The filename is a url()
The @import has any media queries

Supported AEM versions

AEM	Sass Compiler
6.3	1.0.x
6.2	1.0.x
6.1 (SP2 only)	0.9.x

Installation

Via Maven (preferred)

Add the following dependency to your POM:

<dependency>
    <groupId>com.github.mickleroy</groupId>
    <artifactId>aem-sass-compiler</artifactId>
    <version>1.0.1</version>
</dependency>

Note: replace "1.0.1" with the latest version of the compiler.

In your content-package-maven-plugin configuration, add an embedded entry for the compiler:

<plugin>
    <groupId>com.day.jcr.vault</groupId>
    <artifactId>content-package-maven-plugin</artifactId>
    <extensions>true</extensions>
    <configuration>
        <embeddeds>
            <embedded>
                <groupId>com.github.mickleroy</groupId>
                <artifactId>aem-sass-compiler</artifactId>
                <target>/apps/my-aem-project/install</target>
            </embedded>
        </embeddeds>
        <!-- other entries... -->
    </configuration>
</plugin>

Note: replace "/apps/my-aem-project/install" with your own project path.

Via Web Console

Install the provided OSGi bundle (.jar) in the latest release via the Web Console.

Usage

Start writing .scss files just like you would write .less files within AEM.

/etc/designs/clientlibs
├── css.txt
├── main.scss
└── partials
    └── _base.scss

The css.txt file should only reference your main Sass file:

#base=.
main.scss

Bundle Install Log

The following log entries should be visible when installing the bundle:

*INFO* [...] com.adobe.granite.ui.clientlibs.impl.CompilerProviderImpl Registering client library compiler scss
*INFO* [...] com.github.mickleroy.aem.sass.impl.SassCompilerImpl Activating Sass Compiler

Sass Compilation Log

Similar log entries should be visible when compiling a .scss file:

*INFO* [...] com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl Start building CSS library: /etc/designs/aem-sass-compiler/clientlib
*INFO* [...] com.github.mickleroy.aem.sass.impl.SassCompilerImpl Compiled Sass in 97ms
*INFO* [...] com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl finished building library /etc/designs/aem-sass-compiler/clientlib.css

Implementation Details

Currently support LibSass version 3.4.3.

LibSass is a C/C++ port of the original engine written in Ruby. More info at https://github.com/sass/libsass

jsass is a feature complete Java wrapper of LibSass (requires Java 8). More info at https://github.com/bit3/jsass

Release

Create a release branch off the master branch

git branch release/X.X.X

Prepare the release (use vX.X.X for the tag)

mvn release:prepare -DpushChanges=false

Push the changes to the repository

git push origin

Checkout the newly created tag and build the project

git checkout tags/vX.X.X

mvn clean package

Attach the jar to the release on Github and merge back to master.

aem-sass-compiler's People

Contributors

Stargazers

Watchers

Forkers

wildone josebercianowhitbread englishtown felipe4253 volune schatterjee4 achimkre kmrobin ken-chen cchamplin shwinnbin eggsunimediagmbh vikash-kothary maleksandrov samuelroque aemninjadev iq-scm

aem-sass-compiler's Issues

SCSS compilation break in Mac m1 chip

I am getting below error while using this Jar
Java verison: Java(TM) SE Runtime Environment(build 11.0.18+9-LTS-195)
AEM: 6.5.15

ERROR [Background Install /var/folders/tb/mq3ht7zj6h502n4_gkgjbfn00000gn/T/install3229667631446132062.tmp] com.github.mickleroy.aem-sass-compiler bundle com.github.mickleroy.aem-sass-compiler:1.0.1 (617)[com.github.mickleroy.aem.sass.impl.SassCompilerImpl(3762)] : The activate method has thrown an exception (java.lang.UnsatisfiedLinkError: Can't load library: /var/folders/tb/mq3ht7zj6h502n4_gkgjbfn00000gn/T/libjsass-13150162030264837239/libjsass.dylib)
java.lang.UnsatisfiedLinkError: Can't load library: /var/folders/tb/mq3ht7zj6h502n4_gkgjbfn00000gn/T/libjsass-13150162030264837239/libjsass.dylib
at java.base/java.lang.ClassLoader.loadLibrary(ClassLoader.java:2622)

AEM 6.0 SP3 support

@cggillottiBarkleyREI identified an issue with AEM 6.0 SP3

cannot resolve the dependency: com.adobe.granite.ui.clientlibs.script,version=[1.1,2)

Need to investigate support for AEM 6.0 (the clientlibs bundle must export ScriptCompiler) and provide a release specific for 6.0 if it does.

AEM 6.1 support

Uploading the bundle in an AEM 6.1 instance isn't working either. Need to provide support for that if possible.

Sass files not getting live compiled

Hi,

I perfectly followed the documentation given and my .scss files are getting compiled. But when i change some styles in components/_tabs.scss (example), the changes are not getting compiled.

SASS Directory imports?

Love. Can your sass imports support directory wildcards? Example:
@import 'global/**/*.scss or @import 'global/**/*

?debugClientLibs=true breaks functionality on publish instance

This issue only occurs in the publish environment.
My css.txt file in the clientlib looks like this:

#base=sass
main.scss

On hitting http://localhost:4503/content/mypage.html?debugClientLibs=true, CSS is not served. On checking the Sources, the CSS file has just one line:
@import url("/etc/clientlibs/myproject/main/sass/main.scss");

Please suggest a workaround/fix

Document supported AEM versions

Need to improve the documentation around the supported versions of AEM as well as any release-specific branches.

For example:
AEM 6.1 or greater --> 1.0.x
AEM 6.0 --> 0.9.X

A new jsass release 5.7.3 is available with a more recent sass version: 3.5.4

Hello,

It seems a new jsass version is available with a more recent sass version : 3.5.4 https://github.com/bit3/jsass/commits/master

It would be nice to see this reflected in this plugin as well. I think a minor version bump would be in order as it seems the sass syntax changed.

Regards,

AEM 6.4 support

The supported version list in the README only goes up to 6.3. I'm trying to install this in a 6.4 instance and although I see logs that the sass compiler is being embedded I do not see the .scss files being compiled into css. Is 6.4 not supported yet?

Parent selector not working

Hi @mickleroy ,

When we use parent selector (<), its not compiling back to css. throwing exception.

Line of code used- p < .small { margin: 0; }
Exception-23.03.2019 22:24:34.719 ERROR [0:0:0:0:0:0:0:1 [1553340274635] GET /etc/designs/test/clientlib-test.css HTTP/1.1] com.github.mickleroy.aem.sass.impl.SassCompilerImpl Failed to compile Sass /apps/test/clientlib-site/css/main.scss: Error: Invalid CSS after "}": expected 1 selector or at-rule, was "p < .small { margin"
on line 117 of ../../../../../../../apps/test/clientlib-site/css/_base.scss

}
-^