feat: add support for less and less modules

Merge pull request #12 from Ctaque/add_support_for_less_modules

Author: jpavon

README.md

@@ -24,7 +24,7 @@ Found any problem or bug? Please [create a new issue](https://github.com/jpavon/
 - Webpack 4
 - TypeScript compilation [ts-loader](https://github.com/TypeStrong/ts-loader)
 - Type and tslint errors on a separate process [fork-ts-checker-webpack-plugin](https://github.com/Realytics/fork-ts-checker-webpack-plugin)
-- Sass and Css Modules [css-modules](https://github.com/css-modules/css-modules)
+- Sass, Less and Css Modules [css-modules](https://github.com/css-modules/css-modules)
 - Generate TypeScript typings for CSS modules [typings-for-css-modules-loader](https://github.com/jpavon/typings-for-css-modules-loader)
 - Tranform SVG into React components [svgr](https://github.com/smooth-code/svgr)
 - Use `.js|.jsx` and `.ts|.tsx` files together.

config/webpack.base.js

@@ -10,6 +10,7 @@ const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
 
 function getStyleLoader(options) {
   const isSass = options && options.sass;
+  const isLess = options && options.less;
   const isModules = options && options.modules;
 
   let styleRegex = /\.css$/;
@@ -19,6 +20,11 @@ function getStyleLoader(options) {
     styleModuleRegex = /\.(module|m)\.(scss|sass)$/;
   }
 
+  if (isLess) {
+    styleRegex = /\.(less)$/;
+    styleModuleRegex = /\.(module|m).less$/;
+  }
+
   const styleLoader = require.resolve('style-loader');
 
   const miniCss = MiniCssExtractPlugin.loader;
@@ -70,6 +76,13 @@ function getStyleLoader(options) {
     });
   }
 
+  if(isLess) {
+     loaders.push({
+       loader: require.resolve('less-loader'),
+       options: { javascriptEnabled: true }
+     });
+  }
+
   return {
     test: isModules ? styleModuleRegex : styleRegex,
     exclude: isModules ? '//' : styleModuleRegex,
@@ -145,10 +158,14 @@ module.exports.loaders = [
   getStyleLoader(),
   // Process Sass
   getStyleLoader({ sass: true }),
+  // Process Less
+  getStyleLoader({ less: true }),
   // Process Css Modules
   getStyleLoader({ modules: true }),
   // Process Sass Modules
   getStyleLoader({ sass: true, modules: true }),
+  // Process Less Modules
+  getStyleLoader({ less: true, modules: true }),
   {
     test: /\.svg$/,
     exclude: /[\\/]node_modules[\\/]/,

package.json

@@ -53,6 +53,8 @@
     "html-webpack-plugin": "^4.0.0-beta.5",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^23.6.0",
+    "less": "^3.9.0",
+    "less-loader": "^4.1.0",
     "loader-utils": "^1.2.3",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.11.0",

template/src/App.less

@@ -0,0 +1,5 @@
+@color: #60dafb;
+
+.less-success {
+  color: @color;
+}

template/src/App.module.less

@@ -0,0 +1,5 @@
+@color: #60dafb;
+
+.success {
+  color: @color;
+}

template/src/App.module.less.d.ts

@@ -0,0 +1,6 @@
+export interface IAppModuleLess {
+  'success': string;
+}
+
+export const locals: IAppModuleLess;
+export default locals;

template/src/App.tsx

@@ -17,28 +17,34 @@ import fromCssModule from 'App.module.css';
 import 'App.scss';
 // Import sass modules
 import fromSassModule from 'App.module.scss';
+// Import less
+import 'App.less';
+// Import less modules
+import fromLessModule from 'App.module.less';
 
 class App extends React.Component {
-  public render() {
-    return (
-      <div className="App">
-        <header className="App-header">
-          <LogoSvg className="App-logo" />
-          <h1 className="App-title">
-            <Welcome>{welcomeMessage()}</Welcome>
-          </h1>
-          <div>
-            <p className="sass-success">Style from Sass</p>
-            <p className={fromCssModule.success}>Style from Css Modules</p>
-            <p className={fromSassModule.success}>Style from Sass Modules</p>
-          </div>
-        </header>
-        <p className="App-intro">
-          To get started, edit <code>src/App.tsx</code> and save to reload.
-        </p>
-      </div>
-    );
-  }
+    public render() {
+        return (
+            <div className="App">
+                <header className="App-header">
+                    <LogoSvg className="App-logo" />
+                    <h1 className="App-title">
+                        <Welcome>{welcomeMessage()}</Welcome>
+                    </h1>
+                    <div>
+                        <p className="sass-success">Style from Sass</p>
+                        <p className="less-success">Style from Less</p>
+                        <p className={fromCssModule.success}>Style from Css Modules</p>
+                        <p className={fromSassModule.success}>Style from Sass Modules</p>
+                        <p className={fromLessModule.success}>Style from Less Modules</p>
+                    </div>
+                </header>
+                <p className="App-intro">
+                    To get started, edit <code>src/App.tsx</code> and save to reload.
+                </p>
+            </div>
+        );
+    }
 }
 
 export default App;