Scss - Module to compile CSS from SCSS

[bernhard]

The module originated from an idea/discussion in this thread. I hope that helps to see more PRs for improving the PW backend ? 

https://github.com/baumrock/Scss

Watch core files

When working on PRs for the ProcessWire backend you'll notice that the core ships with several SCSS files and the corresponding CSS files. To make it easy to work on the SCSS files without the need of adding complicated build tools to your project you can simply install the Scss module and add the following in /site/ready.php

$modules->get('Scss')->watchCore();

Now your SCSS files will be watched for changes and once you change something and reload your page you'll get the new CSS on the fly and can commit both changes ?

[snck]

@bernhard Thanks! ? I was looking for a nice way to compile some SCSS (Bootstrap in my case) the other day and as Sassify has not been updated for almost 4 years I had a look into your Scss module. It might not have been your intention, but as this a viable wrapper for scssphp I could use it for my case as well. Maybe this can be a starting point for somebody else looking for a way to compile something else than the PW core:

<?php

$compiler = $modules->get('Scss')->compiler;

$input_scss = $this->wire->config->paths->templates."scss/custom.scss";
$bootstrap_scss_path = $this->wire->config->paths->templates."bootstrap/scss";
$output_css = $this->wire->config->paths->templates."css/bootstrap_custom.css";
$output_map = $this->wire->config->paths->templates."css/bootstrap_custom.map";

$compiler->setSourceMap($compiler::SOURCE_MAP_FILE);
$compiler->setSourceMapOptions([
    // relative or full url to the above .map file
    'sourceMapURL' => $output_map,

    // (optional) relative or full url to the .css file
    'sourceMapFilename' => $output_css,

    // partial path (server root) removed (normalized) to create a relative url
    'sourceMapBasepath' => $this->wire->config->paths->root,

    // (optional) prepended to 'source' field entries for relocating source files
    'sourceRoot' => '/',
]);
$compiler->addImportPath($bootstrap_scss_path);
$compiler->setOutputStyle("compressed");

$result = $compiler->compileString('@import "'.$input_scss.'";', $this->wire->config->paths->templates."scss");

file_put_contents($output_map, $result->getSourceMap());
file_put_contents($output_css, $result->getCss());

?>

 

[bernhard]

Great thx @snck ? 

2 minutes ago, snck said:

It might not have been your intention

Well... not directly. But the intention was to leave that open ? I'm not using Scss for anything other than core-files at the moment as I'm happy with my UIkit/LESS setup. But I'm happy to hear that it works for compiling bootstrap Scss as well. Who knows what happens to LESS... It's good to have two options ? 

[gornycreative]

I was just looking for ways to compile bootstrap and foundation easily and this looks promising. I will try compiling some basic Foundations for Sites templates as well.

 

[sebibu]

Thanks @bernhard for creating this module and @snck for sharing your code/solution!❤️

I come from MODX and now creating a first website with ProcessWire. Very satisfied so far.?

@everyone: Where do I place this code, please?

Thanks in advance!

 Sebastian

[cwsoft]

I am just using VSCode and node modules to compile my SCSS and Typescript files into CSS and Javascript and esbuild if needed to bundle/minify files before commit. Basically all my local site/template and site/module folders are git repos. The server structure contain just the created CSS/JS files without the git repo and node modules.

[sebibu]

Thanks for the quick answer and sharing your workflow, @cwsoft!
 

On 11/17/2022 at 6:39 PM, snck said:

Maybe this can be a starting point for somebody else looking for a way to compile something else than the PW core

I like to be able to adjust styling even if I‘m on the way only with my smartphone. So I’m interested compiling and minifying SCSS for smaller projects serverside with @bernhards module.

Where do I place @sncks code, please??

[bernhard]

Do you really want scss or would less also be OK? 

[sebibu]

Thx! As far as I discovered, LESS is easy to compile with AIOM+ or your great RockFrontend module!?

But I‘m using SCSS for years now, so I prefer this right now.?

Edited September 26, 2023 by sebibu

[bernhard]

Yeah that's why I'm asking ? I'm always using LESS and I've built all the tools to easily compile LESS to CSS on the fly.

That's not the case for SCSS. 

I've just pushed an update and updated the readme to support what you need: https://github.com/baumrock/Scss

[sebibu]

Wow.. thanks a lot, @bernhard!!?
That is great. I'm sure a lot developer will love this oppertunity for SCSS beside LESS.
Will test it a soon as possible and will report.?
Have a great evening!?

[Stefanowitsch]

@bernhard does this mean that RockFrontend soon will support the compiling of SCSS files? Please say no. After years of using SCSS I switched to LESS just because of this feature ?

[sebibu]

Please say yes, @bernhard!? ..sorry, @Stefanowitsch?.

 

Today I tested compiling of one single SCSS-file successfully! Very smooth.?  

Then I tried to include partials for customizing UIkit via @import, but files are not found.

Quote

Oops… Fehler: Exception: `variables-theme.scss` file not found for @import: line: 5, column: 1 (in site/modules/Scss/vendor/scssphp/scssphp/src/Compiler.php line 6102)

Tried this three versions in site.scss (variables-theme.scss is in the same directory):

@import "variables-theme";

@import "variables-theme.scss";

@import $config->paths->templates . "scss/variables-theme.scss";

Any idea what I am doing wrong??

[bernhard]

13 hours ago, sebibu said:

Today I tested compiling of one single SCSS-file successfully! Very smooth.?  

Then I tried to include partials for customizing UIkit via @import, but files are not found.

I didn't test includes or imports. As I've never worked with SCSS and LESS has always just worked for me I'd need input from others to make it work. I don't see a reason why RockFrontend should not also support SCSS. It would need some more work though than what I quickly did for this module on Tuesday, so it's not really a top priority ? 

[Flashmaster82]

I can´t this module to work.

ready.php

$scss = $modules->get('Scss');

$watchFiles = $files->find(
  $config->paths->templates . "scss",
  ['extensions' => 'scss']
);

$scss->compileIfChanged(
  input: $config->paths->templates . "scss/style.scss",
  watch: $watchFiles,
  output: 'css/style.css'
  style: 'compressed'
);

I get error "syntax error, unexpected ':', expecting ',' or')' ?  Error: Exception: allowPath: pathname not allowed: css/style.css

Please help!

[bernhard]

You need PHP version 8+

I've updated the module with that requirement.

[Flashmaster82]

I have PHP 8.1.12

[bernhard]

15 minutes ago, Flashmaster82 said:

$scss->compileIfChanged(
  input: $config->paths->templates . "scss/style.scss",
  watch: $watchFiles,
  output: 'css/style.css'
  style: 'compressed'
);

Should be this:

$scss->compileIfChanged(
  input: $config->paths->templates . "scss/style.scss",
  watch: $watchFiles,
  output: '/path/to/css/style.css', // use path and add comma at the end
  style: 'compressed', // optional but recommended comma at the end
);

 

[Flashmaster82]

Same error still? Is there something else i should be adding in another file or something?

 

<?php namespace ProcessWire;

if(!defined("PROCESSWIRE")) die();


$scss = $modules->get('Scss');

$watchFiles = $files->find(
  $config->paths->templates . "scss",
  ['extensions' => 'scss']
);

$scss->compileIfChanged(
  input: $config->paths->templates . "scss/style.scss",
  watch: $watchFiles,
  output: 'css/style.css',
  style: 'compressed',
);

Exception: allowPath: pathname not allowed: css/style.css (in E:\Wamp\www\Ganthor\wire\core\WireFileTools.php line 1947)

 

[bernhard]

24 minutes ago, bernhard said:

output: '/path/to/css/style.css', // use path and add comma at the end

you didn't provide the full path as I showed you in the comment above

[Flashmaster82]

 The path is correct, the problem is the syntax errors. The path to the file is site/templates/css/style.css and site/templates/scss/style.scss

[bernhard]

5 minutes ago, Flashmaster82 said:

The path is correct, the problem is the syntax errors. The path to the file is site/templates/css/style.css and site/templates/scss/style.scss

Your error message tells something different ?

12 minutes ago, Flashmaster82 said:

Exception: allowPath: pathname not allowed: css/style.css (in E:\Wamp\www\Ganthor\wire\core\WireFileTools.php line 1947)

That means that the module tries to write to css/style.css which is obviously not a correct file path.

6 minutes ago, Flashmaster82 said:

This means that your IDE complains about the syntax, which could mean that your IDE uses a different PHP version than your project. If your IDE uses something like PHP7.4 then it will check your code with that interpreter and complain about PHP8 syntax. That does not mean that the code will not run though. But obviously it's something that's not ideal.

[sebibu]

On 11/17/2022 at 6:39 PM, snck said:

@bernhard Thanks! ? I was looking for a nice way to compile some SCSS (Bootstrap in my case) the other day and as Sassify has not been updated for almost 4 years I had a look into your Scss module. It might not have been your intention, but as this a viable wrapper for scssphp I could use it for my case as well. Maybe this can be a starting point for somebody else looking for a way to compile something else than the PW core:

<?php

$compiler = $modules->get('Scss')->compiler;

$input_scss = $this->wire->config->paths->templates."scss/custom.scss";
$bootstrap_scss_path = $this->wire->config->paths->templates."bootstrap/scss";
$output_css = $this->wire->config->paths->templates."css/bootstrap_custom.css";
$output_map = $this->wire->config->paths->templates."css/bootstrap_custom.map";

$compiler->setSourceMap($compiler::SOURCE_MAP_FILE);
$compiler->setSourceMapOptions([
    // relative or full url to the above .map file
    'sourceMapURL' => $output_map,

    // (optional) relative or full url to the .css file
    'sourceMapFilename' => $output_css,

    // partial path (server root) removed (normalized) to create a relative url
    'sourceMapBasepath' => $this->wire->config->paths->root,

    // (optional) prepended to 'source' field entries for relocating source files
    'sourceRoot' => '/',
]);
$compiler->addImportPath($bootstrap_scss_path);
$compiler->setOutputStyle("compressed");

$result = $compiler->compileString('@import "'.$input_scss.'";', $this->wire->config->paths->templates."scss");

file_put_contents($output_map, $result->getSourceMap());
file_put_contents($output_css, $result->getCss());

?>

 

Dear @snck,

I tried your code above to compile SCSS (UIkit in my case). But I get the following error:

Uncaught Error: Call to a member function setSourceMap() on null in site/ready.php:26

#0 wire/core/ProcessWire.php (893): include()
#1 wire/core/ProcessWire.php (674): ProcessWire->includeFile()
#2 wire/modules/Process/ProcessPageView.module (511): ProcessWire->setStatus()
#3 wire/core/Wire.php (413): ProcessPageView->___ready()
#4 wire/core/WireHooks.php (968): Wire->_callMethod()
#5 wire/core/Wire.php (484): WireHooks->runHooks()

ready.php for the code is the right location?
Any idea what I can change to make it work? Thx in advance.!?

[bernhard]

Why didn't you use the new methods that I implemented for you? Did anything not work?

[sebibu]

On 9/28/2023 at 12:29 PM, bernhard said:

I didn't test includes or imports. As I've never worked with SCSS and LESS has always just worked for me I'd need input from others to make it work. I don't see a reason why RockFrontend should not also support SCSS. It would need some more work though than what I quickly did for this module on Tuesday, so it's not really a top priority ? 

Dear Bernhard,
I'm really thankful for your fast help and implementing the new methods.? But as I wrote, compiling of one file worked like a charm, but to completely customize UIkit like this https://getuikit.com/docs/sass#how-to-build (and any other design framework, too) the import function is - at least in my opinion - necessary. And you wrote, it would need some more work for you to implement it.

So I tried to follow @snck solution (with imports) and read in the SCSSPHP documentation to get it working and maybe do some groundwork for you!??