feat: Add stylus/less/scss loader package.

package/kkt-loader-less/README.md

@@ -0,0 +1,20 @@
+@kkt/loader-less
+---
+
+This package contains a plugin for using [Less](https://github.com/less/less.js) with [kkt](https://github.com/kktjs/kkt).
+
+
+## Usage in kkt Projects
+
+```bash
+npm add @kkt/loader-less --dev
+```
+
+### With the loaderOneOf options
+
+```js
+// .kktrc.js
+export const loaderOneOf = [
+  require.resolve('@kkt/loader-less')
+];
+```

package/kkt-loader-less/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@kkt/loader-less",
+  "version": "1.0.3",
+  "description": "A Less loader for KKT. Compiles Less to CSS.",
+  "main": "lib/index.js",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "prepare": "npm run build",
+    "build": "tsbb build",
+    "watch": "tsbb watch"
+  },
+  "keywords": [
+    "less",
+    "react",
+    "kkt",
+    "ssr"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kktjs/kkt/tree/master/packages/kkt-loader-less"
+  },
+  "author": "Kenny Wong <wowohoo@qq.com>",
+  "license": "MIT",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "peerDependencies": {
+    "kkt": "^5.0.0"
+  },
+  "dependencies": {
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0"
+  },
+  "devDependencies": {
+    "kkt": "5.0.0-alpha.1",
+    "tsbb": "^1.1.3",
+    "webpack": "^4.40.2"
+  }
+}

package/kkt-loader-less/src/index.ts

@@ -0,0 +1,48 @@
+import { Configuration } from 'webpack';
+import getStyleLoaders from 'kkt/lib/utils/getStyleLoaders';
+import getCSSModuleLocalIdent from 'kkt/lib/utils/getCSSModuleLocalIdent';
+import { OptionConf } from 'kkt/lib/config/webpack.config';
+
+const lessRegex = /\.(less)$/;
+const lessModuleRegex = /\.module\.(less)$/;
+
+// "url" loader works like "file" loader except that it embeds assets
+// smaller than specified limit in bytes as data URLs to avoid requests.
+// A missing `test` is equivalent to a match.
+module.exports = (conf: Configuration, options: OptionConf) => {
+  return [
+    // Opt-in support for LESS (using .scss or .less extensions).
+    // By default we support LESS Modules with the
+    // extensions .module.scss or .module.less
+    {
+      test: lessRegex,
+      exclude: lessModuleRegex,
+      use: getStyleLoaders(
+        {
+          importLoaders: 1,
+          sourceMap: options.isEnvProduction && options.shouldUseSourceMap,
+        }, options,
+        require.resolve('less-loader')
+      ),
+      // Don't consider CSS imports dead code even if the
+      // containing package claims to have no side effects.
+      // Remove this when webpack adds a warning or an error for this.
+      // See https://github.com/webpack/webpack/issues/6571
+      sideEffects: true,
+    },
+    // Adds support for CSS Modules, but using LESS
+    // using the extension .module.scss or .module.less
+    {
+      test: lessModuleRegex,
+      use: getStyleLoaders(
+        {
+          importLoaders: 1,
+          sourceMap: options.isEnvProduction && options.shouldUseSourceMap,
+          modules: true,
+          getLocalIdent: getCSSModuleLocalIdent,
+        }, options,
+        require.resolve('less-loader')
+      ),
+    }
+  ];
+}

package/kkt-loader-scss/README.md

@@ -0,0 +1,20 @@
+@kkt/loader-scss
+---
+
+This package contains a plugin for using [SCSS/SASS](https://sass-lang.com/) with [kkt](https://github.com/kktjs/kkt).
+
+
+## Usage in kkt Projects
+
+```bash
+npm add @kkt/loader-scss --dev
+```
+
+### With the loaderOneOf options
+
+```js
+// .kktrc.js
+export const loaderOneOf = [
+  require.resolve('@kkt/loader-scss')
+];
+```

package/kkt-loader-scss/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@kkt/loader-scss",
+  "version": "1.0.3",
+  "description": "A SCSS loader for KKT. Compiles Less to CSS.",
+  "main": "lib/index.js",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "prepare": "npm run build",
+    "build": "tsbb build",
+    "watch": "tsbb watch"
+  },
+  "keywords": [
+    "scss",
+    "react",
+    "kkt",
+    "ssr"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kktjs/kkt/tree/master/packages/kkt-loader-scss"
+  },
+  "author": "Kenny Wong <wowohoo@qq.com>",
+  "license": "MIT",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "peerDependencies": {
+    "kkt": "^5.0.0"
+  },
+  "dependencies": {
+    "fibers": "^4.0.1",
+    "node-sass": "^4.12.0",
+    "sass": "^1.22.12",
+    "sass-loader": "^8.0.0"
+  },
+  "devDependencies": {
+    "kkt": "5.0.0-alpha.1",
+    "tsbb": "^1.1.3",
+    "webpack": "^4.40.2"
+  }
+}

package/kkt-loader-scss/src/index.ts

@@ -0,0 +1,48 @@
+import { Configuration } from 'webpack';
+import getStyleLoaders from 'kkt/lib/utils/getStyleLoaders';
+import getCSSModuleLocalIdent from 'kkt/lib/utils/getCSSModuleLocalIdent';
+import { OptionConf } from 'kkt/lib/config/webpack.config';
+
+const sassRegex = /\.(scss|sass)$/;
+const sassModuleRegex = /\.module\.(scss|sass)$/;
+
+// "url" loader works like "file" loader except that it embeds assets
+// smaller than specified limit in bytes as data URLs to avoid requests.
+// A missing `test` is equivalent to a match.
+module.exports = (conf: Configuration, options: OptionConf) => {
+  return [
+    // Opt-in support for SASS (using .scss or .sass extensions).
+    // By default we support SASS Modules with the
+    // extensions .module.scss or .module.sass
+    {
+      test: sassRegex,
+      exclude: sassModuleRegex,
+      use: getStyleLoaders(
+        {
+          importLoaders: 1,
+          sourceMap: options.isEnvProduction && options.shouldUseSourceMap,
+        }, options,
+        require.resolve('sass-loader')
+      ),
+      // Don't consider CSS imports dead code even if the
+      // containing package claims to have no side effects.
+      // Remove this when webpack adds a warning or an error for this.
+      // See https://github.com/webpack/webpack/issues/6571
+      sideEffects: true,
+    },
+    // Adds support for CSS Modules, but using SASS
+    // using the extension .module.scss or .module.sass
+    {
+      test: sassModuleRegex,
+      use: getStyleLoaders(
+        {
+          importLoaders: 1,
+          sourceMap: options.isEnvProduction && options.shouldUseSourceMap,
+          modules: true,
+          getLocalIdent: getCSSModuleLocalIdent,
+        }, options,
+        require.resolve('sass-loader')
+      ),
+    }
+  ];
+}

package/kkt-loader-stylus/README.md

@@ -0,0 +1,20 @@
+@kkt/loader-stylus
+---
+
+This package contains a plugin for using [stylus](https://github.com/stylus/stylus/) with [kkt](https://github.com/kktjs/kkt).
+
+
+## Usage in kkt Projects
+
+```bash
+npm add @kkt/loader-stylus --dev
+```
+
+### With the loaderOneOf options
+
+```js
+// .kktrc.js
+export const loaderOneOf = [
+  require.resolve('@kkt/loader-stylus')
+];
+```

package/kkt-loader-stylus/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@kkt/loader-stylus",
+  "version": "1.0.3",
+  "description": "A SCSS loader for KKT. Compiles Less to CSS.",
+  "main": "lib/index.js",
+  "engines": {
+    "node": ">=10"
+  },
+  "scripts": {
+    "prepare": "npm run build",
+    "build": "tsbb build",
+    "watch": "tsbb watch"
+  },
+  "keywords": [
+    "scss",
+    "react",
+    "kkt",
+    "ssr"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/kktjs/kkt/tree/master/packages/kkt-loader-stylus"
+  },
+  "author": "Kenny Wong <wowohoo@qq.com>",
+  "license": "MIT",
+  "files": [
+    "lib",
+    "src"
+  ],
+  "peerDependencies": {
+    "kkt": "^5.0.0"
+  },
+  "dependencies": {
+    "stylus": "^0.54.7",
+    "stylus-loader": "^3.0.2"
+  },
+  "devDependencies": {
+    "kkt": "5.0.0-alpha.1",
+    "tsbb": "^1.1.3",
+    "webpack": "^4.40.2"
+  }
+}

package/kkt-loader-stylus/src/index.ts

@@ -0,0 +1,48 @@
+import { Configuration } from 'webpack';
+import getStyleLoaders from 'kkt/lib/utils/getStyleLoaders';
+import getCSSModuleLocalIdent from 'kkt/lib/utils/getCSSModuleLocalIdent';
+import { OptionConf } from 'kkt/lib/config/webpack.config';
+
+const sassRegex = /\.(styl)$/;
+const sassModuleRegex = /\.module\.(styl)$/;
+
+// "url" loader works like "file" loader except that it embeds assets
+// smaller than specified limit in bytes as data URLs to avoid requests.
+// A missing `test` is equivalent to a match.
+module.exports = (conf: Configuration, options: OptionConf) => {
+  return [
+    // Opt-in support for SASS (using .styl or .sass extensions).
+    // By default we support Stylus Modules with the
+    // extensions .module.styl or .module.sass
+    {
+      test: sassRegex,
+      exclude: sassModuleRegex,
+      use: getStyleLoaders(
+        {
+          importLoaders: 1,
+          sourceMap: options.isEnvProduction && options.shouldUseSourceMap,
+        }, options,
+        require.resolve('stylus-loader')
+      ),
+      // Don't consider CSS imports dead code even if the
+      // containing package claims to have no side effects.
+      // Remove this when webpack adds a warning or an error for this.
+      // See https://github.com/webpack/webpack/issues/6571
+      sideEffects: true,
+    },
+    // Adds support for CSS Modules, but using SASS
+    // using the extension .module.styl or .module.sass
+    {
+      test: sassModuleRegex,
+      use: getStyleLoaders(
+        {
+          importLoaders: 1,
+          sourceMap: options.isEnvProduction && options.shouldUseSourceMap,
+          modules: true,
+          getLocalIdent: getCSSModuleLocalIdent,
+        }, options,
+        require.resolve('stylus-loader')
+      ),
+    }
+  ];
+}