Switch SASS to Dart SASS

[csalmeida]

Changes:

• Updates Node dependencies.
• Makes use of Dart Sass through gulp-sass
• Converts all @import statements into @use or @forward as recommended in the Sass documentation.
• Changes to how styles are organised, introducing an abstracts/ directory and a _components.scss and _blocks.scss to include component styles while keeping component folder structure.
• Component styles no longer compile via concatenation which removes the requirement for a temp.scss to be created. Now they get forwarded from _components.scss.
• Component and block style files are automatically managed on a watch task. As new style files are added, _components.scss and _blocks.scss will be automatically updated.
• Removed unused Node packages.
• Migrated all Gulp tasks to version 4 syntax.
• Gulp tasks are now in a directory to allow task splitting.

No longer required to manage font paths

In previous version of Hozokit there was a dedicated set-font-path mixin to set the correct path for local hosted fonts both on the theme side and the admin side:

/* A prior version of mixins.scss */

// Sets paths for compiling for blocks or front end.
$font-paths: (
    base: 'assets/fonts/',
    admin: '../fonts/'
);

/* Sets font declarations and the paths in which they are declared.
 * This helps setting paths for rendering fonts both on blocks and
 * the front end of the site.
*/
@mixin set-font-path($path: map-get($font-paths, 'base')) {
  @if map-has-key($font-paths, $path) {
    $offside-path: map-get($font-paths, $path) + 'offside/' !global;
    $karla-path: map-get($font-paths, $path) + 'karla/' !global;
  }
}

This meant that changing or adding new fonts required the mixin to be updated. This was slightly simplified:

/* Current version of _fonts.scss */
$font-path: "assets/fonts/" !default;

// Define the paths for your fonts here, one per variable:
$offside-path: $font-path + "offside/";
$karla-path: $font-path + "karla/";

// @font-face rules here...

The font path is now a variable with a default value, meaning it can be changed to a different path for the admin panel:

@use "abstracts" as a with (
  $font-path: "../fonts/"
);

This simplifies the code behind setting up hosted fonts and what needs to be removed as well in cases where Adobe or Google Fonts are used via a URL instead.

Changes in how styles are structured

Sass version was changed to use Dart Sass which required all @import statements to be deprecated and replaced with either @use or @forward, depending on the use case. The @import functionality is being deprecated in future versions of Sass.

In previous version styles and partials would be all directly stored in styles/ and components and block each could have their own style.scss which would then get merged during bundling to create a final style.scss:

.
├── admin.scss
├── base.scss
├── fonts.scss
├── general.scss
├── media_queries.scss
├── mixins.scss
└── palette.scss

In the current version, variables, mixins, fonts and other utilities are now stored in abstracts/. A _components.scss and _blocks.scss was introduced too (more on this below) and the required comment that defines theme metadata has been moved to its own partial to make sure it prints at the top of the stylesheet:

.
├── abstracts
│   ├── _fonts.scss
│   ├── _index.scss
│   ├── _media_queries.scss
│   ├── _mixins.scss
│   ├── _palette.scss
│   └── _variables.scss
├── _blocks.scss
├── _components.scss
├── admin.scss
├── base.scss
├── general.scss
└── theme_meta.scss

This organises files slightly differently but allow for flexibility when access abstracts:

// All abstracts listed in /abstracts/_index.scss:
@use "abstracts" as a;

// Accessing mixins only:
@use "abstracts/mixins" as m;

Component and block list partials

As a result of implementing the @use and @forward syntax, components now are forwarded to a _components.scss and blocks to _blocks.scss, respectively. This allows for the compile task to be simplified and not rely on the concatenation of all components to a _temp.scss:

// Components (this file is self managed by a Gulp task)
@forward "../templates/components/example/style";
@forward "../templates/components/footer/style";
@forward "../templates/components/header/style";

I expect this file to (in most cases) be free from manual edits. As component style.scss are added, renamed and removed the componentForwarding task manages the file automatically. Same for any block specific styles as well.

[arrontp]

Running on WSL

Following error occurs when watching for changes.

TypeError: Cannot read property '0' of null
    at C:\xampp\htdocs\hozo-wp\wp-content\themes\hozokit\gulpfile.js\componentForwarding.js:176:102
    at Array.forEach (<anonymous>)
    at readAllFiles (C:\xampp\htdocs\hozo-wp\wp-content\themes\hozokit\gulpfile.js\componentForwarding.js:165:11)
    at C:\xampp\htdocs\hozo-wp\wp-content\themes\hozokit\gulpfile.js\componentForwarding.js:168:24
    at Array.forEach (<anonymous>)
    at readAllFiles (C:\xampp\htdocs\hozo-wp\wp-content\themes\hozokit\gulpfile.js\componentForwarding.js:165:11)
    at updateComponentForwards (C:\xampp\htdocs\hozo-wp\wp-content\themes\hozokit\gulpfile.js\componentForwarding.js:204:23)
    at componentForwarding (C:\xampp\htdocs\hozo-wp\wp-content\themes\hozokit\gulpfile.js\componentForwarding.js:251:3)
    at bound (domain.js:430:14)
    at runBound (domain.js:443:12)

Also the following appears on the frontend (see attached image).

---

What I did

1. Install WP and create database.
2. Install Hozokit.
3. Set nvm to 15.14.1 and installed npm dependencies.
4. Set up .env file.
5. Ran npm start.
6. Saved a SCSS file.

[csalmeida]

@arrontp try to run npm install after step 4. since there were a few changes to dependencies.

However, this error seems to have to do with the program not handling empty directories when looking for files. I couldn't replicate the error but I've added a check for this and pushed to this branch.

As for the composererror you can install composer and run composer install on the theme folder to install these dependencies but it really shouldn't need it since Hozokit ships with the vendor/ folder. I'll look into this later. 🤔

Let me know if this sorts it out. 🙏

[arrontp]

WSL Cli

composer install

It's odd it's struggling over composer and php 7...

Wordpress

Not pulling through Timber dependencies after npm install 🤔

[csalmeida]

Interesting, I can't seem to replicate this error after doing a setup from scratch:

1. Cloned repo
2. Copied WordPress files over to the project directory
3. Created a database
4. Setup WordPress and selected theme with no issues

The version of PHP I'm using is:

PHP 7.4.21 (cli) (built: Jul 12 2021 11:57:26) ( NTS )

[csalmeida]

@arrontp solved the issue with _components.scss not updating automagically. Do you still have issues with composer?

[csalmeida]

I've merged into #21 to be able to test Docker setups, we can continue this discussion there.