nwayo LTS

.eslintignore

@@ -1,5 +1,6 @@
 docs
 packages/grow-project/boilerplate/components/*/scripts/vendor
+packages/workflow/helpers/gulp-include
 ressources/docs-builder/app/helpers/generated
 ressources/docs-builder/assets/*/vendor
 ressources/docs-builder/local-server

.prettierignore

@@ -6,6 +6,7 @@
 docs
 packages/grow-extension/boilerplate
 packages/grow-project/boilerplate
+packages/workflow/helpers/gulp-include
 ressources/docs-builder/app/helpers/generated
 ressources/docs-builder/assets/*/vendor
 ressources/docs-builder/local-server

CHANGELOG.md

@@ -10,6 +10,30 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 
 ## [Unreleased]
+### Added
+- Add option to use the workflow without the global CLI
+- Add ESLint/stylelint configuration export
+- Add option to use global standalone Dart Sass compiler, instead of the embedded pure JavaScript Sass compiler
+- Add Sass function to toolbox: `nwayo-serialize()`
+- Add custom PostCSS functions:
+	- `nwayopostcss-base64-image()`
+	- `nwayopostcss-svg-image()`
+	- `nwayopostcss-url-image()`
+	- `nwayopostcss-url-woff-woff2()`
+
+### Changed
+- Internalize `@absolunet/gulp-include`
+
+### Removed
+- Remove Sass functions from toolbox:
+  - `nwayo-cacheinvalidator-querystring()`
+  - `nwayo-color-replace()`
+  - `nwayo-svg-data-uri()`
+- Remove Dart Sass functions:
+	- `nwayodart-file-exists()`
+	- `nwayodart-read-file()`
+	- `nwayodart-inline-file()`
+	- `nwayodart-checksum()`
 
 
 
@@ -79,7 +103,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Maintenance updates
 
 ### Fixed
-- Fixes bad paths in Windows during SASS compilation
+- Fixes bad paths in Windows during Sass compilation
 
 
 
@@ -94,7 +118,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Update to cssnano 5.x
 - Update to ESLint 8.x
 - Update to Foundation 6.7.x
-- Update to SASS 1.45.x
+- Update to Sass 1.45.x
 - Linters updates
 - `nwayo.yaml` file must now be in root `nwayo` folder
 - Convert empty image from gif to png

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-	<img src="https://github.com/absolunet/nwayo/raw/production/ressources/images/nwayo.png" width="250" height="250" alt="nwayo">
+	<img src="https://github.com/absolunet/nwayo/raw/main/ressources/images/nwayo.png" width="250" height="250" alt="nwayo">
 </p>
 <h1 align="center"><strong>nwayo</strong></h1>
 <p align="center">/nwajo/ (haitian creole) The tough central part of various fruits, containing the seeds.</p>
@@ -18,7 +18,8 @@
 
 ## Requirements
 - [Node.js](https://nodejs.org)
-- [nwayo CLI](https://www.npmjs.com/package/@absolunet/nwayo-cli)
+- [nwayo CLI](https://www.npmjs.com/package/@absolunet/nwayo-cli) _(Optional)_
+- [Dart Sass](https://sass-lang.com/install) _(Optional)_
 
 
 
@@ -31,30 +32,27 @@ npx @absolunet/nwayo-grow-project
 # Install workflow and vendor (in nwayo root folder)
 npm install
 
-# Install CLI
-npm install -g @absolunet/nwayo-cli
-
 # Build (in nwayo root folder)
-nwayo rebuild
+npm run rebuild
 ```
 
 
 
-## Tools &nbsp; <img src="https://github.com/absolunet/nwayo/raw/production/ressources/images/vendors.png" width="375" alt="nwayo vendors">
+## Tools &nbsp; <img src="https://github.com/absolunet/nwayo/raw/main/ressources/images/vendors.png" width="375" alt="nwayo vendors">
 nwayo is HTML5 ready and uses [gulp](https://gulpjs.com) as a build system
 
 - Based (but not mandatory) on [Zurb Foundation](https://foundation.zurb.com)
 - Uses [npm](https://www.npmjs.com) as dependencies manager and [EditorConfig](https://editorconfig.org) for consistency
 
 #### Styling
 - CSS3 ready via [Autoprefixer](https://github.com/postcss/autoprefixer) and linted via [stylelint](https://stylelint.io)
-- Comes with [Sass](https://sass-lang.com), built via [Dart Sass](https://www.npmjs.com/package/dart-sass)
+- Comes with [Sass](https://sass-lang.com), built via [Pure JavaScript Sass compiler](https://www.npmjs.com/package/sass) or optionally via [Dart Sass compiler](https://sass-lang.com/install)
 - Minifies with [cssnano](https://cssnano.co)
 
 #### Scripting
 - ES6+ ready via [Babel](https://babeljs.io) and linted via [ESLint](https://eslint.org)
 - Comes with [jQuery](https://jquery.com), [Modernizr](https://modernizr.com), [Lodash](https://lodash.com), [pinki](https://github.com/absolunet/pinki), [JsRender](https://www.jsviews.com), [kafe](https://documentation.absolunet.com/kafe/)
-- Builds with [gulp-include](https://www.npmjs.com/package/@absolunet/gulp-include) and is minified with [UglifyJS](http://lisperator.net/uglifyjs)
+- Minified with [UglifyJS](http://lisperator.net/uglifyjs)
 
 #### Other
 - Optimizes images via [gifsicle](https://www.lcdf.org/gifsicle), [MozJPEG](https://github.com/mozilla/mozjpeg), [optipng](http://optipng.sourceforge.net), [svgo](https://github.com/svg/svgo)
@@ -84,7 +82,7 @@ Multiple extensions [available](https://www.npmjs.com/search?q=keywords:nwayo-ex
 |---|---|---|
 | **[@absolunet/nwayo-workflow](packages/workflow)** | [![npm](https://img.shields.io/npm/v/@absolunet/nwayo-workflow.svg)](https://www.npmjs.com/package/@absolunet/nwayo-workflow) | Workflow where all the magic happens |
 | **[@absolunet/nwayo-toolbox](packages/toolbox)** | [![npm](https://img.shields.io/npm/v/@absolunet/nwayo-toolbox.svg)](https://www.npmjs.com/package/@absolunet/nwayo-toolbox) | Toolbox with SCSS/JS helpers |
-| **[@absolunet/nwayo-cli](packages/cli)** | [![npm](https://img.shields.io/npm/v/@absolunet/nwayo-cli.svg)](https://www.npmjs.com/package/@absolunet/nwayo-cli) | CLI |
+| [@absolunet/nwayo-cli](packages/cli) | [![npm](https://img.shields.io/npm/v/@absolunet/nwayo-cli.svg)](https://www.npmjs.com/package/@absolunet/nwayo-cli) | CLI |
 | [@absolunet/nwayo-grow-project](packages/grow-project) | [![npm](https://img.shields.io/npm/v/@absolunet/nwayo-grow-project.svg)](https://www.npmjs.com/package/@absolunet/nwayo-grow-project) | Boilerplate generator for nwayo project |
 | [@absolunet/nwayo-grow-extension](packages/grow-extension) | [![npm](https://img.shields.io/npm/v/@absolunet/nwayo-grow-extension.svg)](https://www.npmjs.com/package/@absolunet/nwayo-grow-extension) | Boilerplate generator for nwayo extension |
 

documentation/cli/readme.md

@@ -26,6 +26,19 @@ $ nwayo [...]
 
 ## Commands
 
+**IMPORTANT**
+These three project commands can also be used without the nwayo CLI, by configuring npm scripts:
+
+```json
+{
+  "scripts": {
+    "build-<task>": "nwayo-cli run <task>",
+    "rebuild": "nwayo-cli rebuild",
+    "watch": "nwayo-cli watch"
+  }
+}
+```
+
 ### run
 `nwayo run <task> [<bundle>]`
 

documentation/migration/3.8.x-3.9.x.md

@@ -2,7 +2,7 @@
 [View the source differences on GitHub](https://github.com/absolunet/nwayo/compare/3.8.0...3.9.0)
 
 ## Key changes
-- Support for Node.js 16 via the update of the SASS compiler
+- Support for Node.js 16 via the update of the Sass compiler
 - Major updates to linters (rules and moved to peerDependencies)
 - Unmanaged support to Prettier
 - Remove CLI support for legacy version, calls outside root folder, `install` and `doctor` commands
@@ -15,7 +15,7 @@
 
 
 
-## Styles (SASS)
+## Styles (Sass)
 All divisions must use the `math.div()` [method](https://sass-lang.com/documentation/modules/math#div).
 
 ```scss
@@ -37,7 +37,7 @@ If you are using Foundation, you need to update it to 6.7.x or later.
 ## Linters
 Linter configurations are now included via `peerDependencies` meaning you can optionally upgrade these in your project.
 
-If you are using npm 6 or lower, or want to upgrade the rulesets you just have to [add them directly and/or their dependencies](https://github.com/absolunet/nwayo/blob/production/packages/workflow/package.json) in your `./package.json`. *(Let npm guide you to which dependencies are needed)*
+If you are using npm 6 or lower, or want to upgrade the rulesets you just have to [add them directly and/or their dependencies](https://github.com/absolunet/nwayo/blob/main/packages/workflow/package.json) in your `./package.json`. *(Let npm guide you to which dependencies are needed)*
 
 Example:
 ```json

documentation/migration/3.9.x-3.10.x.md

@@ -0,0 +1,148 @@
+# 3.9.x → 3.10.x
+[View the source differences on GitHub](https://github.com/absolunet/nwayo/compare/3.9.0...3.10.0)
+
+## Key changes
+- Add bundled ESLint/stylelint configuration
+- Add option to use the workflow without the global CLI
+- Add option to use global standalone Dart Sass compiler
+- Remove some internal Sass functions
+
+
+
+## What to do
+- Update version `package.json` (duh...)
+
+
+
+## Use bundled configuration
+
+### Change your `.eslintrc.yaml`
+
+From
+```yaml
+extends:
+  - '@absolunet/nwayo'
+
+# or
+extends:
+  - '@absolunet/nwayo'
+  - './node_modules/@absolunet/nwayo-workflow/ressources/eslint-config-pre-prettier.cjs'
+```
+
+To:
+```yaml
+extends:
+  - "./node_modules/@absolunet/nwayo-workflow/config/eslint.cjs"
+
+# or
+extends:
+  - "./node_modules/@absolunet/nwayo-workflow/config/eslint.cjs"
+  - "./node_modules/@absolunet/nwayo-workflow/config/eslint-no-prettier.cjs"
+```
+
+### Change your `.stylelintrc.yaml`
+
+From
+```yaml
+extends: '@absolunet/stylelint-config-scss'
+```
+
+To:
+```yaml
+extends: './node_modules/@absolunet/nwayo-workflow/config/stylelint.cjs'
+```
+
+
+## Stop using global CLI (optional)
+
+### Remove global CLI
+```shell
+npm uninstall --global @absolunet/nwayo-cli
+```
+
+### Use npm scripts to use included binary
+Inside your `./package.json` add scripts to call nwayo commands
+
+```json
+{
+  "scripts": {
+    "build-<task>": "nwayo-cli run <task>",
+    "rebuild": "nwayo-cli rebuild",
+    "watch": "nwayo-cli watch"
+  }
+}
+```
+
+```shell
+# Old CLI calls
+nwayo run <task>
+nwayo rebuild
+nwayo watch
+
+# New CLI calls
+npm run build-<task>
+npm run rebuild
+npm run watch
+```
+
+A recommanded pattern is to create and document all your own custom commands
+```json
+{
+  "scripts": {
+    "lint": "nwayo-cli run scripts-lint && nwayo-cli run styles-lint",
+    "code-xyz": "nwayo-cli run scripts xyz && nwayo-cli run styles xyz",
+    "generate-all": "nwayo-cli rebuild && cd .. && grunt less"
+  }
+}
+```
+
+```shell
+npm run lint
+npm run code-xyz
+npm run generate-all
+```
+
+
+## Use global standalone Dart Sass compiler (optional)
+
+The standalone Dart Sass compiler is way faster than the pure JavaScript version embedded in nwayo. But it needs to be installed manually on the workstation. Here's what to do, if you want to use it.
+
+### Install the Dart Sass standalone compiler
+
+Follow the instructions on the installation page and make sure that the `sass` command works:
+[https://sass-lang.com/install](https://sass-lang.com/install)
+
+
+### Enable feature in the project configuration
+
+Edit your `./nwayo.yaml` to add this configuration
+
+```yaml
+useGlobalDartSassCompiler: true
+```
+
+
+
+## Make sure these internal Sass functions are not in your code
+Some internal Sass functions from the toolbox and the main compiler have been removed.
+They should not have been used outside the toolbox, but if your project has been using them, you will have to replace them with one of the new PostCSS functions.
+
+#### `nwayo-cacheinvalidator-querystring()`, `nwayodart-checksum()`
+Added a checksum value at the end of an asset URL. Have been implemented in:
+- `nwayopostcss-url-image()`
+- `nwayopostcss-url-woff-woff2()`
+
+#### `nwayo-color-replace()`, `nwayo-svg-data-uri()`
+Replaced a hex color in a string, escaped a svg string to be used as a data URI. Have been implemented in:
+- `nwayopostcss-svg-image()`
+
+#### `nwayodart-inline-file()`
+Converted an image to a Base64 data URI. Has been replaced by:
+- `nwayopostcss-base64-image()`
+
+#### `nwayodart-file-exists()`, `nwayodart-read-file()`
+Utilities to read files on the disk. Have not been replaced.
+
+**Reference**:
+- PostCSS functions: [https://github.com/absolunet/nwayo/blob/3.10.0/packages/workflow/helpers/postcss-functions.js](https://github.com/absolunet/nwayo/blob/3.10.0/packages/workflow/helpers/postcss-functions.js)
+- Examples of usage in the toolbox: [https://github.com/absolunet/nwayo/blob/3.10.0/packages/toolbox/styles/_mixins-core.scss](https://github.com/absolunet/nwayo/blob/3.10.0/packages/toolbox/styles/_mixins-core.scss)

documentation/styles/component-stylelint.md

@@ -12,7 +12,7 @@
 You can add rule settings in the `.stylelintc.yaml` file at the root of your Nwayo directory
 
 ```yaml
-extends: '@absolunet/stylelint-config-nwayo'
+extends: './node_modules/@absolunet/nwayo-workflow/config/stylelint.cjs'
 
 rules:
   scss/selector-no-union-class-name: null
@@ -23,8 +23,6 @@ rules:
 ```
 
 
-[Consult the default Stylelint configurations](https://documentation.absolunet.com/stylelint-config/scss/api/)
-
 ### Add file or directory to ignore
 You can add the path to the specific file or directory in the `.stylelintignore` file at the root of your Nwayo directory
 

documentation/styles/configurations-functions.md

@@ -29,15 +29,13 @@ To see a complet list of functions that are available in Nwayo you can consult:
   - **nwayo-build-path** : Generate an asset path  based on file type from build root
   - **nwayo-zindex :** Return a z-index value including a delta that for a scope includes in given scopes
   - **nwayo-breakpoint-media :** Simulate a breakpoint
-  - **nwayo-cacheinvalidator-querystring :** Return cache invalidation query string
 - [functions-helpers](../../../packages/toolbox/styles/_functions-helpers.scss)
   - **nwayo-map-deep-split-path :** Deep map: Path splitter
   - **nwayo-map-deep-has-key :** Deep map: Has key
   - **nwayo-map-deep-get :** Deep map: Get value
   - **nwayo-str-replace :** String replace
-  - **nwayo-color-replace :** Color replace
   - **nwayo-to-string :** Cast to string
   - **nwayo-list-contains :** Check if list contains value
-  - **nwayo-svg-data-uri :** SVG optimized for data-uri (http://codepen.io/Tigt/blog/optimizing-svgs-in-data-uris)
-- [functions-remcalcs](../../../packages/toolbox/styles/_functions-remcalc.scss)
+  - **nwayo-serialize :** Serialize value to a string
+- [functions-remcalc](../../../packages/toolbox/styles/_functions-remcalc.scss)
   - [Shameless copy of Foundation's rem-calc()](https://github.com/zurb/foundation-sites/blob/v6.5.3/scss/util/_unit.scss)

package.json

@@ -3,13 +3,13 @@
   "private": true,
   "scripts": {
     "fix": "npm run fix:eslint; npm run fix:stylelint; npm run fix:prettier",
-    "fix:eslint": "./node_modules/.bin/eslint --fix .",
-    "fix:stylelint": "./node_modules/.bin/stylelint --fix \"**/*.scss\"",
-    "fix:prettier": "./node_modules/.bin/prettier --write .",
+    "fix:eslint": "eslint --fix .",
+    "fix:stylelint": "stylelint --fix \"**/*.scss\"",
+    "fix:prettier": "prettier --write .",
     "test": "npm run test:prettier && npm run test:eslint && npm run test:stylelint",
-    "test:prettier": "./node_modules/.bin/prettier --check .",
-    "test:eslint": "./node_modules/.bin/eslint --report-unused-disable-directives .",
-    "test:stylelint": "./node_modules/.bin/stylelint --report-descriptionless-disables --report-invalid-scope-disables --report-needless-disables \"**/*.scss\"",
+    "test:prettier": "prettier --check .",
+    "test:eslint": "eslint --report-unused-disable-directives .",
+    "test:stylelint": "stylelint --report-descriptionless-disables --report-invalid-scope-disables --report-needless-disables \"**/*.scss\"",
     "postinstall": "node manager.js --task=postinstall",
     "outdated": "node manager.js --task=outdated",
     "build": "node manager.js --task=build",
@@ -21,8 +21,8 @@
     "docker:connect:14": "docker exec -it nwayo-node-14 /bin/bash"
   },
   "devDependencies": {
+    "@absolunet/eslint-config-browser": "3.2.2",
     "@absolunet/eslint-config-node": "3.2.2",
-    "@absolunet/eslint-config-nwayo": "3.2.2",
     "@absolunet/eslint-config-react": "3.2.2",
     "@absolunet/fsp": "1.7.0",
     "@absolunet/manager": "1.1.0",

packages/grow-project/boilerplate/.eslintrc.yaml

@@ -1,6 +1,6 @@
 extends:
-  - '@absolunet/nwayo'
-  - './node_modules/@absolunet/nwayo-workflow/ressources/eslint-config-pre-prettier.cjs'
+  - "./node_modules/@absolunet/nwayo-workflow/config/eslint.cjs"
+  - "./node_modules/@absolunet/nwayo-workflow/config/eslint-no-prettier.cjs"
 
 # Environments
 #env:

packages/grow-project/boilerplate/.stylelintrc.yaml

@@ -1 +1 @@
-extends: '@absolunet/stylelint-config-scss'
+extends: './node_modules/@absolunet/nwayo-workflow/config/stylelint.cjs'