@enact/cli 5.0.0 → 5.0.1

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## 5.0.1 (August 30, 2022)
+
+### pack
+
+* Updated @enact/dev-utils fixing isomorphic build with the latest language list.
+* Fixed Enact project setting `forceCSSModules` to enforce modular CSS.
+
 ## 5.0.0 (July 19, 2022)
 
 * Updated dependencies.

package/README.md

@@ -92,7 +92,6 @@ For example:
 }
 ```
 
-
 ## Displaying Lint Output in the Editor
 
 Some editors, including Sublime Text, Atom, and Visual Studio Code, provide plugins for ESLint.
@@ -104,6 +103,21 @@ You would need to install an ESLint plugin for your editor first.
 Ever since ESLint 6, global installs of ESLint configs are no longer supported.
 To work around this new limitation, while still supporting in-editor linting, we've created a new [eslint-config-enact-proxy](https://github.com/enactjs/eslint-config-enact-proxy) package.
 The [eslint-config-enact-proxy](https://github.com/enactjs/eslint-config-enact-proxy) acts like a small proxy config, redirecting ESLint to use a globally-installed Enact ESLint config.
+`eslint-config-enact-proxy` needs to be installed locally on a project to enable in-editor linting:
+
+```sh
+npm install --save-dev eslint-config-enact-proxy
+```
+
+Also, you need to modify `eslintConfig` property in `package.json`:
+
+```json
+  "eslintConfig": {
+    "extends": "enact-proxy"
+  },
+```
+>**NOTE**: For strict mode, use `"extends": "enact-proxy/strict"`.
+
 In order for in-editor linting to work with our updated ESLint config, you'll need to upgrade to ESLint 7 or later. This can be installed globally by running:
 
 ```sh
@@ -113,7 +127,7 @@ npm install -g eslint
 Then, you will need to uninstall any previous globally-installed Enact linting package (everything but eslint itself):
 
 ```sh
-npm remove -g eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-babel @babel/eslint-parser eslint-plugin-jest eslint-plugin-enact eslint-config-enact
+npm uninstall -g eslint-plugin-react eslint-plugin-react-hooks eslint-plugin-babel @babel/eslint-parser eslint-plugin-jest eslint-plugin-enact eslint-config-enact
 ```
 
 ## Copyright and License Information

package/config/webpack.config.js

@@ -320,8 +320,7 @@ module.exports = function (env, isomorphic = false, ilibAdditionalResourcesPath)
 							use: getStyleLoaders({
 								importLoaders: 1,
 								modules: {
-									getLocalIdent,
-									mode: 'local'
+									getLocalIdent
 								}
 							})
 						},
@@ -332,8 +331,7 @@ module.exports = function (env, isomorphic = false, ilibAdditionalResourcesPath)
 							use: getStyleLoaders({
 								importLoaders: 1,
 								modules: {
-									...(app.forceCSSModules ? {getLocalIdent} : {}),
-									mode: 'icss'
+									...(app.forceCSSModules ? {getLocalIdent} : {mode: 'icss'})
 								}
 							}),
 							// Don't consider CSS imports dead code even if the
@@ -347,8 +345,7 @@ module.exports = function (env, isomorphic = false, ilibAdditionalResourcesPath)
 							use: getLessStyleLoaders({
 								importLoaders: 2,
 								modules: {
-									getLocalIdent,
-									mode: 'local'
+									getLocalIdent
 								}
 							})
 						},
@@ -357,8 +354,7 @@ module.exports = function (env, isomorphic = false, ilibAdditionalResourcesPath)
 							use: getLessStyleLoaders({
 								importLoaders: 2,
 								modules: {
-									...(app.forceCSSModules ? {getLocalIdent} : {}),
-									mode: 'icss'
+									...(app.forceCSSModules ? {getLocalIdent} : {mode: 'icss'})
 								}
 							}),
 							sideEffects: true
@@ -370,8 +366,7 @@ module.exports = function (env, isomorphic = false, ilibAdditionalResourcesPath)
 							use: getScssStyleLoaders({
 								importLoaders: 3,
 								modules: {
-									getLocalIdent,
-									mode: 'local'
+									getLocalIdent
 								}
 							})
 						},
@@ -381,8 +376,7 @@ module.exports = function (env, isomorphic = false, ilibAdditionalResourcesPath)
 							use: getScssStyleLoaders({
 								importLoaders: 3,
 								modules: {
-									...(app.forceCSSModules ? {getLocalIdent} : {}),
-									mode: 'icss'
+									...(app.forceCSSModules ? {getLocalIdent} : {mode: 'icss'})
 								}
 							})
 						},

package/docs/building-apps.md

@@ -115,13 +115,6 @@ To use Sass, install Sass globally:
 npm install -g sass
 ```
 
-Note: If you receive an error when building the app that says `Cannot find module 'sass'`, try to set `NODE_PATH` to point global
-node_modules directory like below.
-
-```bash
-export NODE_PATH=/path/to/your/global/node_modules
-```
-
 Now you can rename `src/App.css` to `src/App.scss` or `src/App.sass` and for using CSS modules, `src/App.module.scss` or `src/App.module.sass`. And update `src/App.js` to import `src/App.scss`. Enact CLI will compile these files properly through webpack for you.
 
 More information can be found [here](https://sass-lang.com/guide) to learn about Sass.
@@ -137,8 +130,6 @@ To use Tailwindcss, install Tailwindcss globally:
 npm install -g tailwindcss
 ```
 
-Note: If you receive an error when building the app that says `Cannot find module 'tailwindcss'`, try to set `NODE_PATH` to point global node_modules directory.
-
 And then run the init command to generate tailwind.config.js in your app:
 
 ```bash
@@ -197,6 +188,14 @@ const MainPanel = kind({
 
 More information can be found [here](https://tailwindcss.com/docs) to learn about tailwindcss.
 
+### Troubleshooting
+If you receive an error when building the app that says `Cannot find module: 'typescript/sass/tailwindcss'` after installing the modules above(e.g. `typescript`, `sass`, or `tailwindcss`) globally,
+try to set `NODE_PATH` to point global node_modules directory like below.
+
+```bash
+export NODE_PATH=/path/to/your/global/node_modules
+```
+
 ## Isomorphic Support & Prerendering
 By using the isomorphic code layout option, your project bundle will be outputted in a versatile universal code format allowing potential usage outside the browser. The Enact CLI takes advantage of this mode by additionally generating an HTML output of your project and embedding it directly with the resulting **index.html**. By default, isomorphic mode will attempt to prerender only `en-US`, however with the `--locales` option, a wide variety of locales can be specified and prerendered. More details on isomorphic support and its limitations can be found [here](./isomorphic-support.md).