feat: add support for less and less modules

Merge pull request #12 from Ctaque/add_support_for_less_modules
jpavon · Feb 10, 2019 · 5f512f2 · 5f512f2
2 parents 2dfb052 + 1946f2e
commit 5f512f2
Show file tree

Hide file tree

Showing 7 changed files with 62 additions and 21 deletions.
diff --git a/README.md b/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.

diff --git a/config/webpack.base.js b/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[\\/]/,

diff --git a/package.json b/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",

diff --git a/template/src/App.less b/template/src/App.less
@@ -0,0 +1,5 @@
+@color: #60dafb;
+
+.less-success {
+  color: @color;
+}
diff --git a/template/src/App.module.less b/template/src/App.module.less
@@ -0,0 +1,5 @@
+@color: #60dafb;
+
+.success {
+  color: @color;
+}
diff --git a/template/src/App.module.less.d.ts b/template/src/App.module.less.d.ts
@@ -0,0 +1,6 @@
+export interface IAppModuleLess {
+  'success': string;
+}
+
+export const locals: IAppModuleLess;
+export default locals;
diff --git a/template/src/App.tsx b/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;