Auto define source map options (#15)

- [`.devtool`](https://webpack.js.org/configuration/devtool/#devtool)

Author: retyui

CHANGELOG.md

@@ -1,10 +1,15 @@
 # Change Log
 
+## 4.2.0
+
+- Auto-configure `sourceMap` option, based on [`.devtool`](https://webpack.js.org/configuration/devtool/#devtool)
+
 ## 4.1.0
 
-- Add typescript
+- Fix [invalid](https://github.com/retyui/group-css-media-queries-loader/issues/11#issuecomment-925331021) `postcss` import
+- Add loader options Schema validation
 - Add E2E tests
-- Fix [invalid](https://github.com/retyui/group-css-media-queries-loader/issues/11#issuecomment-925331021) `postcss` import 
+- Add typescript
 
 ## 4.0.0
 
@@ -23,6 +28,6 @@
 
 ## 2.0.0
 
-- deprecated node@4.x.x
-- Deprecated webpack@1.x.x
-- Added `sourceMap: true|false` options (based on postcss)
+- deprecated `node@4.x.x`
+- Deprecated `webpack@1.x.x`
+- Added `sourceMap: boolean` options (based on postcss)

README.md

@@ -7,41 +7,28 @@ A [group-css-media-queries](https://github.com/Se7enSky/group-css-media-queries)
 [![CI](https://github.com/retyui/group-css-media-queries-loader/actions/workflows/nodejs.yml/badge.svg)](https://github.com/retyui/group-css-media-queries-loader/actions/workflows/nodejs.yml)
 [![count downloads group-css-media-queries-loader](https://img.shields.io/npm/dm/group-css-media-queries-loader.svg)](https://www.npmjs.com/package/group-css-media-queries-loader)
 
-## Install
+## Getting Started
+
+To begin, you'll need to install loader:
 
 ```bash
 yarn add -D group-css-media-queries-loader
 ```
 
-## Usage
-
-Use the loader either via your webpack config, CLI or inline.
-
-### Via webpack config (recommended)
-
-**webpack.config.js**
+Then add the plugin to your webpack config. For example:
 
-```js
-const sourceMap = true;
+```tsx
+// webpack.config.js
 
 module.exports = {
-  devtool: sourceMap && "source-map",
   module: {
     rules: [
       {
         test: /\.css$/,
         use: [
           "style-loader",
-          {
-            loader: "css-loader",
-            options: { sourceMap },
-          },
-          // 'group-css-media-queries-loader',
-          // or with config
-          {
-            loader: "group-css-media-queries-loader",
-            options: { sourceMap },
-          },
+          "css-loader",
+          "group-css-media-queries-loader",
         ],
       },
     ],
@@ -51,6 +38,6 @@ module.exports = {
 
 ## Options
 
-#### **`sourceMap`** boolean `true` or `false`
+#### `sourceMap: boolean`
 
-Enable CSS source maps.
+Enables/Disables generation of source maps. (default: `compiler.devtool`)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "group-css-media-queries-loader",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": ["lib"],
@@ -28,6 +28,9 @@
     "test": "node ./test/test.js && cd example/webpack5 && yarn --ignore-engines && yarn build && cd ../..",
     "prepublishOnly": "npm run test"
   },
+  "optionalDependencies": {
+    "postcss-loader": "^6.0.0"
+  },
   "devDependencies": {
     "@tsconfig/node10": "^1.0.1",
     "@types/loader-utils": "^2.0.3",
@@ -43,6 +46,6 @@
     "node": ">=10.0.0"
   },
   "repository": "https://github.com/retyui/group-css-media-queries-loader",
-  "author": "David Narbutovich <vamnemne@gmail.com>",
+  "author": "David <4661784+retyui@users.noreply.github.com>",
   "license": "MIT"
 }

src/index.ts

@@ -5,70 +5,41 @@ import {
   getCurrentRequest,
 } from "loader-utils";
 import { validate } from "schema-utils";
+import type { JSONSchema7 } from "schema-utils/declarations/validate";
 import type { LoaderContext } from "webpack";
+import type { LoaderOptions, SourceMap, AdditionalData } from "./types";
+import initSourceMaps from "./source-map";
 import schema from "./schema.json";
-const GroupCssMediaQueriesPostCssPlugin = require("./group-css-media-queries");
-
-interface LoaderOptions {
-  sourceMap?: boolean;
-}
 
-interface SourceMap {
-  version: number;
-  sources: string[];
-  mappings: string;
-  file?: string;
-  sourceRoot?: string;
-  sourcesContent?: string[];
-  names?: string[];
-}
-
-interface AdditionalData {
-  [index: string]: any;
-  webpackAST: object;
-}
+const GroupCssMediaQueriesPostCssPlugin = require("./group-css-media-queries");
 
 function GroupCssMediaQueriesLoader(
   this: LoaderContext<LoaderOptions>,
   content: string | Buffer,
   prevSourceMap?: string | SourceMap,
   additionalData?: AdditionalData
 ) {
-  // 1.x.x return null if empty query
-  // 2.x.x return empty object if empty query
+  // 1.x.x return `null` if empty query
+  // 2.x.x return empty `object` if empty query
   const loaderOptions = getOptions(this) || {};
 
-  // @ts-ignore
-  validate(schema, loaderOptions, {
+  validate(schema as JSONSchema7, loaderOptions, {
     name: "group-css-media-queries-loader",
   });
 
   const callback = this.async();
+  const sourceMap = initSourceMaps(loaderOptions, () => this);
 
-  // @ts-ignore
   const pipeline = postcss(GroupCssMediaQueriesPostCssPlugin);
 
   pipeline
     .process(content, {
       from: getRemainingRequest(this).split("!").pop(),
       to: getCurrentRequest(this).split("!").pop(),
-      map: loaderOptions.sourceMap
-        ? {
-            prev: prevSourceMap,
-            inline: false,
-            annotation: false,
-            sourcesContent: true,
-          }
-        : undefined,
+      map: sourceMap.getOptions(prevSourceMap),
     })
     .then((result) =>
-      callback(
-        null,
-        result.css,
-        // @ts-ignore
-        result.map?.toJSON(),
-        additionalData
-      )
+      callback(null, result.css, sourceMap.onResult(result), additionalData)
     )
     .catch(callback);
 }

src/schema.json

@@ -1,4 +1,6 @@
 {
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "title": "group-css-media-queries-loader options",
   "type": "object",
   "properties": {
     "sourceMap": {

src/source-map.ts

@@ -0,0 +1,63 @@
+import { LoaderContext } from "webpack";
+import type { Result } from "postcss";
+import type { LoaderOptions, SourceMap } from "./types";
+
+const initSourceMaps = (
+  options: LoaderOptions,
+  getLoaderContext: () => LoaderContext<LoaderOptions>
+) => {
+  const enabled = options.sourceMap ?? getLoaderContext().sourceMap;
+
+  const normalizeSourceMapBefore = (
+    prevSourceMap?: string | SourceMap
+  ): string | SourceMap | undefined => {
+    try {
+      const { normalizeSourceMap } = require("postcss-loader/dist/utils.js");
+
+      return (
+        prevSourceMap &&
+        normalizeSourceMap(prevSourceMap, getLoaderContext().context)
+      );
+    } catch {
+      return prevSourceMap;
+    }
+  };
+
+  return {
+    getOptions: (prevSourceMap?: string | SourceMap) => {
+      if (!enabled) {
+        return undefined;
+      }
+
+      return {
+        prev: normalizeSourceMapBefore(prevSourceMap),
+        inline: false,
+        annotation: false,
+        sourcesContent: true,
+      };
+    },
+    onResult: (result: Result): SourceMap | undefined => {
+      // @ts-ignore
+      const map = result?.map?.toJSON?.() as SourceMap | undefined;
+
+      try {
+        const {
+          normalizeSourceMapAfterPostcss,
+        } = require("postcss-loader/dist/utils.js");
+
+        if (enabled && map) {
+          return normalizeSourceMapAfterPostcss(
+            map,
+            getLoaderContext().context
+          );
+        }
+
+        return map;
+      } catch {
+        return map;
+      }
+    },
+  };
+};
+
+export = initSourceMaps;

src/types.ts

@@ -0,0 +1,18 @@
+export interface LoaderOptions {
+  sourceMap?: boolean;
+}
+
+export interface SourceMap {
+  version: number;
+  sources: string[];
+  mappings: string;
+  file?: string;
+  sourceRoot?: string;
+  sourcesContent?: string[];
+  names?: string[];
+}
+
+export interface AdditionalData {
+  [index: string]: any;
+  webpackAST: object;
+}