Feature/less styles

docs/basic-features/built-in-css-support.md

@@ -181,19 +181,39 @@ module.exports = {
 }
 ```
 
-## Less and Stylus Support
+## Less Support
 
-To support importing `.less` or `.styl` files you can use the following plugins:
+Next.js allows you to import Less using the `.less` extension. You can use component-level Less via CSS Modules and the
+`.module.less` extension.
 
-- [@zeit/next-less](https://github.com/vercel/next-plugins/tree/master/packages/next-less)
-- [@zeit/next-stylus](https://github.com/vercel/next-plugins/tree/master/packages/next-stylus)
-
-If using the less plugin, don't forget to add a dependency on less as well, otherwise you'll see an error like:
+Before you can use Next.js' built-in Less support, be sure to install `less`:
 
 ```bash
-Error: Cannot find module 'less'
+npm install less
+```
+
+Less support has the same benefits and restrictions as the built-in CSS suport detailed above.
+
+### Customizing Less Options
+
+If you want to configure the Less compiler you can do so by using the `lessOptions` in `next.config.js`.
+
+For example to add `javascriptEnabled`:
+
+```js
+module.exports = {
+  lessOptions: {
+    javascriptEnabled: true,
+  },
+}
 ```
 
+## Stylus Support
+
+To support importing `.styl` files you can use the following plugin:
+
+- [@zeit/next-stylus](https://github.com/vercel/next-plugins/tree/master/packages/next-stylus)
+
 ## CSS-in-JS
 
 <details>

errors/install-less.md

@@ -0,0 +1,19 @@
+# Install `less` to Use Built-In Less Support
+
+#### Why This Error Occurred
+
+Using Next.js' [built-in Less support](https://nextjs.org/docs/basic-features/built-in-css-support##less-support) requires that you bring your own version of Less.
+
+#### Possible Ways to Fix It
+
+Please install the `less` package in your project.
+
+```bash
+npm i less
+# or
+yarn add less
+```
+
+### Useful Links
+
+- [Less Support in Documentation](https://nextjs.org/docs/basic-features/built-in-css-support#less-support)

package.json

@@ -91,6 +91,8 @@
     "ky": "0.19.1",
     "ky-universal": "0.6.0",
     "lerna": "4.0.0",
+    "less": "4.1.1",
+    "less-loader": "7.3.0",
     "lint-staged": "10.1.7",
     "lost": "8.3.1",
     "minimatch": "3.0.4",

packages/next/build/webpack-config.ts

@@ -1371,6 +1371,7 @@ export default async function getBaseWebpackConfig(
     isServer,
     assetPrefix: config.assetPrefix || '',
     sassOptions: config.sassOptions,
+    lessOptions: config.lessOptions,
     productionBrowserSourceMaps: config.productionBrowserSourceMaps,
     future: config.future,
   })

packages/next/build/webpack/config/blocks/css/index.ts

@@ -14,7 +14,7 @@ import {
 import { getPostCssPlugins } from './plugins'
 
 // RegExps for all Style Sheet variants
-const regexLikeCss = /\.(css|scss|sass)$/
+const regexLikeCss = /\.(css|scss|sass|less)$/
 
 // RegExps for Style Sheets
 const regexCssGlobal = /(?<!\.module)\.css$/
@@ -24,6 +24,9 @@ const regexCssModules = /\.module\.css$/
 const regexSassGlobal = /(?<!\.module)\.(scss|sass)$/
 const regexSassModules = /\.module\.(scss|sass)$/
 
+const regexLessGlobal = /(?<!\.module)\.less$/
+const regexLessModules = /\.module\.less$/
+
 export const css = curry(async function css(
   ctx: ConfigurationContext,
   config: webpack.Configuration
@@ -33,6 +36,7 @@ export const css = curry(async function css(
     additionalData: sassAdditionalData,
     ...sassOptions
   } = ctx.sassOptions
+  const { ...lessOptions } = ctx.lessOptions
 
   const sassPreprocessors: webpack.RuleSetUseItem[] = [
     // First, process files with `sass-loader`: this inlines content, and
@@ -62,6 +66,16 @@ export const css = curry(async function css(
     },
   ]
 
+  const lessPreprocessors: webpack.RuleSetUseItem[] = [
+    {
+      loader: 'less-loader',
+      options: {
+        sourceMap: true,
+        lessOptions,
+      },
+    },
+  ]
+
   const fns: ConfigurationFn[] = [
     loader({
       oneOf: [
@@ -149,13 +163,36 @@ export const css = curry(async function css(
       ],
     })
   )
+  fns.push(
+    loader({
+      oneOf: [
+        // Opt-in support for Less.
+        {
+          // Less Modules should never have side effects. This setting will
+          // allow unused Less to be removed from the production build.
+          // We ensure this by disallowing `:global()` Less at the top-level
+          // via the `pure` mode in `css-loader`.
+          sideEffects: false,
+          // Less Modules are activated via this specific extension.
+          test: regexLessModules,
+          // Less Modules are only supported in the user's application. We're
+          // not yet allowing Less imports _within_ `node_modules`.
+          issuer: {
+            and: [ctx.rootDirectory],
+            not: [/node_modules/],
+          },
+          use: getCssModuleLoader(ctx, postCssPlugins, lessPreprocessors),
+        },
+      ],
+    })
+  )
 
   // Throw an error for CSS Modules used outside their supported scope
   fns.push(
     loader({
       oneOf: [
         {
-          test: [regexCssModules, regexSassModules],
+          test: [regexCssModules, regexSassModules, regexLessModules],
           use: {
             loader: 'error-loader',
             options: {
@@ -172,7 +209,7 @@ export const css = curry(async function css(
       loader({
         oneOf: [
           {
-            test: [regexCssGlobal, regexSassGlobal],
+            test: [regexCssGlobal, regexSassGlobal, regexLessGlobal],
             use: require.resolve('next/dist/compiled/ignore-loader'),
           },
         ],
@@ -241,6 +278,22 @@ export const css = curry(async function css(
           ],
         })
       )
+      fns.push(
+        loader({
+          oneOf: [
+            {
+              // A global Less import always has side effects. Webpack will tree
+              // shake the Less without this option if the issuer claims to have
+              // no side-effects.
+              // See https://github.com/webpack/webpack/issues/6571
+              sideEffects: true,
+              test: regexLessGlobal,
+              issuer: { and: [ctx.customAppFile] },
+              use: getGlobalCssLoader(ctx, postCssPlugins, lessPreprocessors),
+            },
+          ],
+        })
+      )
     }
   }
 
@@ -249,7 +302,7 @@ export const css = curry(async function css(
     loader({
       oneOf: [
         {
-          test: [regexCssGlobal, regexSassGlobal],
+          test: [regexCssGlobal, regexSassGlobal, regexLessGlobal],
           issuer: { and: [/node_modules/] },
           use: {
             loader: 'error-loader',
@@ -267,7 +320,7 @@ export const css = curry(async function css(
     loader({
       oneOf: [
         {
-          test: [regexCssGlobal, regexSassGlobal],
+          test: [regexCssGlobal, regexSassGlobal, regexLessGlobal],
           use: {
             loader: 'error-loader',
             options: {

packages/next/build/webpack/config/index.ts

@@ -13,6 +13,7 @@ export async function build(
     isServer,
     assetPrefix,
     sassOptions,
+    lessOptions,
     productionBrowserSourceMaps,
     future,
   }: {
@@ -22,6 +23,7 @@ export async function build(
     isServer: boolean
     assetPrefix: string
     sassOptions: any
+    lessOptions: any
     productionBrowserSourceMaps: boolean
     future: NextConfig['future']
   }
@@ -39,6 +41,7 @@ export async function build(
         : assetPrefix
       : '',
     sassOptions,
+    lessOptions,
     productionBrowserSourceMaps,
     future,
   }

packages/next/build/webpack/config/utils.ts

@@ -14,6 +14,7 @@ export type ConfigurationContext = {
   assetPrefix: string
 
   sassOptions: any
+  lessOptions: any
   productionBrowserSourceMaps: boolean
 
   future: NextConfig['future']

packages/next/client/dev/error-overlay/format-webpack-messages.js

@@ -108,6 +108,17 @@ function formatMessage(message) {
     lines[1] += '\nLearn more: https://nextjs.org/docs/messages/install-sass'
   }
 
+  // Add helpful message for users trying to use Less for the first time
+  if (lines[1] && lines[1].match(/Cannot find module.+less/)) {
+    // ./file.module.less (<<loader info>>) => ./file.module.less
+    lines[0] = lines[0].replace(/(.+) \(.+?(?=\?\?).+?\)/, '$1')
+
+    lines[1] =
+      "To use Next.js' built-in Less support, you first need to install `less`.\n"
+    lines[1] += 'Run `npm i less` or `yarn add less` inside your workspace.\n'
+    lines[1] += '\nLearn more: https://err.sh/next.js/install-less'
+  }
+
   message = lines.join('\n')
   // Internal stacks are generally useless so we strip them... with the
   // exception of stacks containing `webpack:` because they're normally

packages/next/next-server/server/config-shared.ts

@@ -91,6 +91,7 @@ export const defaultConfig: NextConfig = {
   },
   basePath: '',
   sassOptions: {},
+  lessOptions: {},
   trailingSlash: false,
   i18n: null,
   productionBrowserSourceMaps: false,

packages/next/package.json

@@ -115,12 +115,16 @@
   },
   "peerDependencies": {
     "fibers": ">= 3.1.0",
+    "less": "4.1.1",
     "node-sass": "^4.0.0 || ^5.0.0",
     "react": "^16.6.0 || ^17",
     "react-dom": "^16.6.0 || ^17",
     "sass": "^1.3.0"
   },
   "peerDependenciesMeta": {
+    "less": {
+      "optional": true
+    },
     "node-sass": {
       "optional": true
     },
@@ -217,6 +221,7 @@
     "is-wsl": "2.2.0",
     "json5": "2.1.3",
     "jsonwebtoken": "8.5.1",
+    "less-loader": "7.3.0",
     "loader-utils": "2.0.0",
     "lodash.curry": "4.1.1",
     "lru-cache": "5.1.1",

test/integration/less-fixtures/basic-module-modify-vars/next.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  lessOptions: {
+    modifyVars: {
+      var: 'red',
+    },
+  },
+}

test/integration/less-fixtures/basic-module-modify-vars/pages/index.js

@@ -0,0 +1,9 @@
+import { redText } from './index.module.less'
+
+export default function Home() {
+  return (
+    <div id="verify-red" className={redText}>
+      This text should be red.
+    </div>
+  )
+}

test/integration/less-fixtures/basic-module-modify-vars/pages/index.module.less

@@ -0,0 +1,3 @@
+.redText {
+  color: @var;
+}

test/integration/less-fixtures/basic-module/pages/index.js

@@ -0,0 +1,9 @@
+import { redText } from './index.module.less'
+
+export default function Home() {
+  return (
+    <div id="verify-red" className={redText}>
+      This text should be red.
+    </div>
+  )
+}

test/integration/less-fixtures/basic-module/pages/index.module.less

@@ -0,0 +1,4 @@
+@var: red;
+.redText {
+  color: @var;
+}

test/integration/less-fixtures/compilation-and-prefixing/pages/_app.js

@@ -0,0 +1,12 @@
+import React from 'react'
+import App from 'next/app'
+import '../styles/global.less'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/less-fixtures/compilation-and-prefixing/pages/index.js

@@ -0,0 +1,3 @@
+export default function Home() {
+  return <div className="red-text">This text should be red.</div>
+}

test/integration/less-fixtures/compilation-and-prefixing/styles/global.less

@@ -0,0 +1,10 @@
+@var: red;
+.redText {
+  ::placeholder {
+    color: @var;
+  }
+}
+
+.flex-parsing {
+  flex: 0 0 calc(50% - var(--vertical-gutter));
+}

test/integration/less-fixtures/invalid-global-with-app/pages/_app.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import App from 'next/app'
+
+class MyApp extends App {
+  render() {
+    const { Component, pageProps } = this.props
+    return <Component {...pageProps} />
+  }
+}
+
+export default MyApp

test/integration/less-fixtures/invalid-global-with-app/pages/index.js

@@ -0,0 +1,5 @@
+import '../styles/global.less'
+
+export default function Home() {
+  return <div className="red-text">This text should be red.</div>
+}

test/integration/less-fixtures/invalid-global-with-app/styles/global.less

@@ -0,0 +1,3 @@
+.red-text {
+  color: red;
+}

test/integration/less-fixtures/invalid-global/pages/index.js

@@ -0,0 +1,5 @@
+import '../styles/global.less'
+
+export default function Home() {
+  return <div className="red-text">This text should be red.</div>
+}