@lipemat/js-boilerplate 10.5.1 → 10.6.0-beta.2

package/README.md

@@ -41,6 +41,7 @@ Add the following to your package.json. (this may also be found in the `template
 * `brotliFiles : {bool}` Enabled generating pre-compressed .br files for CSS and JS.
 * `shortCssClasses : {bool}` Enable short 1-2 character CSS classes. Recommended if you're not running multiple instances of this package on the same site.
 * `jsPath : {string}` Path of JS application relative to `package.json`. If `package.json` is in same directory as the JS application, this may be omitted.
+* `cssTsFiles : {bool}` Enable auto generation of TypeScript definitions for CSS modules. 
 
 ## Code Completion In PHPStorm
 Some `@types` have been specified in this library to assist with code completion and allow using the built-in TypeScript support. Unfortunately, some typescripts still send errors to PHPStorm like "Default export is not declared in an imported module". I've found that it's easier to just remove this warning by un-checking `Editor -> Inspections -> JavaScript -> General -> Validate Imports`. (this may not need to be un-checked if you enable the built-in TypeScript support).

package/config/webpack.dev.js

@@ -2,7 +2,7 @@ const webpack = require( 'webpack' );
 const ReactRefreshWebpackPlugin = require( '@pmmmwh/react-refresh-webpack-plugin' );
 const path = require( 'path' );
 const ForkTsCheckerWebpackPlugin = require( 'fork-ts-checker-webpack-plugin' );
-const config = require( '../helpers/package-config' );
+const {getPackageConfig} = require( '../helpers/package-config' );
 const {getEntries} = require( '../helpers/entries' );
 const {getConfig, getTsConfigFile, getBrowsersList} = require( '../helpers/config' );
 
@@ -46,15 +46,15 @@ module.exports = {
 	},
 	target: 'browserslist:' + getBrowsersList().join( ', ' ),
 	output: {
-		path: path.resolve( config.workingDirectory, 'dist' ),
+		path: path.resolve( getPackageConfig().workingDirectory, 'dist' ),
 		filename: '[name].js',
-		publicPath: config.url + ':' + devServerOptions.port + '/js/dist/',
+		publicPath: getPackageConfig().url + ':' + devServerOptions.port + '/js/dist/',
 		chunkFilename: '[name].js',
 	},
 	resolve: {
 		extensions: [ '.ts', '.tsx', '.js', '.jsx', '.json', '.pcss' ],
 		modules: [
-			path.resolve( config.workingDirectory, 'src' ),
+			path.resolve( getPackageConfig().workingDirectory, 'src' ),
 			'node_modules',
 		],
 	},
@@ -68,7 +68,7 @@ module.exports = {
 			{
 				test: /\.[jt]sx?$/,
 				loader: 'babel-loader',
-				include: path.resolve( config.workingDirectory, 'src' ),
+				include: path.resolve( getPackageConfig().workingDirectory, 'src' ),
 				exclude: /node_modules/,
 				options: babelOptions,
 			},
@@ -87,6 +87,14 @@ module.exports = {
 				test: /\.pcss$/,
 				use: [
 					'style-loader',
+					{
+						loader: '@teamsupercell/typings-for-css-modules-loader',
+						options: {
+							banner: '// Autogenerated by typings-for-css-modules-loader.',
+							disableLocalsExport: true,
+							prettierConfigFile: path.resolve( __dirname, '../helpers/.prettierrc.json' ),
+						},
+					},
 					{
 						loader: 'css-loader',
 						options: cssLoaderOptions,
@@ -97,7 +105,12 @@ module.exports = {
 							postcssOptions,
 						},
 					},
-				],
+				].filter( loader => {
+					if ( ! getPackageConfig().cssTsFiles ) {
+						return loader.loader !== '@teamsupercell/typings-for-css-modules-loader';
+					}
+					return true;
+				} ),
 			},
 
 		],

package/helpers/.prettierrc.json

@@ -0,0 +1,6 @@
+{
+  "singleQuote": true,
+   "useTabs": true,
+   "tabWidth": 4,
+   "endOfLine": "lf"
+}

package/helpers/package-config.d.ts

@@ -4,6 +4,7 @@ export interface PackageConfig {
 	certificates?: Certificates;
 	combinedJson: boolean;
 	css_folder: string;
+	cssTsFiles: boolean;
 	dependencies: Dependencies;
 	description?: string;
 	devDependencies: Dependencies;
@@ -39,5 +40,7 @@ export interface Scripts {
 	test: string;
 }
 
-declare const packageConfig: PackageConfig;
+declare const packageConfig: PackageConfig & {
+	getPackageConfig: () => PackageConfig;
+};
 export default packageConfig;

package/helpers/package-config.js

@@ -12,6 +12,7 @@ packageConfig.url ||= 'http://localhost';
 // Path of JS application files.
 packageConfig.workingDirectory = packageConfig.jsPath !== '' ? path.resolve( packageConfig.jsPath ) : workingDirectory;
 packageConfig.shortCssClasses ||= false;
+packageConfig.tsCssModules ||= false;
 
 try {
 	const localConfig = require( path.resolve( workingDirectory, './local-config.json' ) );

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lipemat/js-boilerplate",
-  "version": "10.5.1",
+  "version": "10.6.0-beta.2",
   "description": "Dependencies and scripts for a no config JavaScript app",
   "author": "Mat Lipe",
   "license": "MIT",
@@ -48,6 +48,7 @@
     "@lipemat/css-mqpacker": "^9.0.0",
     "@lipemat/eslint-config": "^3.1.3",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@teamsupercell/typings-for-css-modules-loader": "^2.5.2",
     "@types/node": "^16",
     "@wordpress/browserslist-config": "^5.19.0",
     "are-you-es5": "^2.1.1",
@@ -75,6 +76,7 @@
     "postcss-nested": "^5.0.6",
     "postcss-preset-env": "^7.5.0",
     "postcss-scss": "^4.0.4",
+    "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-refresh": "^0.14.0",
@@ -95,5 +97,5 @@
     "memfs": "^3.5.3",
     "setimmediate": "^1.0.5"
   },
-  "packageManager": "yarn@3.6.4"
+  "packageManager": "yarn@4.0.2"
 }