Compile sass during template installation

[barsdeveloper]

Hi, it is not clear to me how one can build a template for J4 and use Sass.
I am trying to copy and adapt Cassiopeia, which looks like it is using just scss (https://github.com/joomla/joomla-cms/tree/4.0-dev/templates/cassiopeia)
But in joomla.asset.json it is referring only to .css files.
I expected scss files to be compiled and copied one to one in the css filder but that was not the case. Can anyone provide a minimal example of how to create a scss file, compile it during installation (not manually) and refer to it inside joomla.asset.json?

Thanks

[dgrammatiko]

I expected scss files to be compiled and copied one to one in the css filder but that was not the case. Can anyone provide a minimal example of how to create a scss file, compile it during installation (not manually) and refer to it inside joomla.asset.json?

You will need to fork this repo https://github.com/joomla/joomla-cms/blob/4.0-dev/README.md (follow the How to get a working installation from the source) and use the build tools provided https://github.com/joomla/joomla-cms/blob/4.0-dev/build/README.md (using some of the NPM commands)

[barsdeveloper]

Thanks for taking time to answer.

What a reader should get from this discussion (which is not clear to be honest, maybe it should be mentioned in the readme?) is that

• When you package a template you will have to distribute the css files, and scss only if you want to
• Joomla installed from release packages (https://github.com/joomla/joomla-cms/releases) does not have the ability to compile the scss (notice it doesn't have the "build" folder)
• In order to develop templates and compile the scss using the command from joomla you must setup as explained above.

If you do the above you can develop a template and scss files will be compiled 1:1 in the corresponding css directory (both versions: regular and minified)

[barsdeveloper]

@dgrammatiko I have one last question. How can I pass arguments to the sass cli using the commands of joomla (npm run build:css...)?
More specifically I don't want all the WebKit rules it creates, almost duplicating the whole css in case of animation heavy stylesheets.
Thanks

[dgrammatiko]

The extra WebKit prefixed rules are auto-generated with https://github.com/postcss/autoprefixer
which is controlled with

joomla-cms/package.json

Lines 29 to 32 in 94f0d80

	"browserslist": [
	"last 1 version",
	"not ie < 11"
	],

But it's weird that you're getting WebKit prefixed rules, you shouldn't (by reading the configuration). Can you share a small scss and the compiled css?

[dgrammatiko]

actually changing "not ie < 11" to "not ie <= 11" should do the trick or you can try the Bootstrap settings: https://github.com/twbs/bootstrap/blob/main/.browserslistrc

[barsdeveloper]

SCSS example
scss/example.scss

.rule-1 {
    transform: rotate(10deg);
    animation: some-animation infinite;
}

@keyframes some-animation {
    from {
        transform: rotate(0);
    }

    to {
        transform: rotate(20deg);
    }
}

css/example.css

.rule-1 {
  -webkit-transform: rotate(10deg);
          transform: rotate(10deg);
  -webkit-animation: some-animation infinite;
          animation: some-animation infinite;
}

@-webkit-keyframes some-animation {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
}

@keyframes some-animation {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(20deg);
            transform: rotate(20deg);
  }
}

Built using npm run build:css -- templates/mytemplatename

I fount it to be working (not adding webkit-related stuff) with

  "browserslist": [
    "last 1 Chrome version",
    "last 1 Edge version",
    "last 1 Firefox version",
    "last 1 Android version",
    "last 1 iOS version"
  ]

The second suggestion (changing just the IE part does not work)
More details here: https://github.com/browserslist/browserslist#readme

Thank you for the help