Breaking: Turn rule config into array (#2)

Fixes #1

This changes the config from a single object into an array of objects.  This allows more flexibility if you have multiple different kinds of files that you want to wrap in layers (though if you only have a few, you should probably just add the layers to the files themselves for extra clarity when editing).

Author: IanVS

README.md

@@ -73,17 +73,32 @@ If you do not use PostCSS, add it according to [official docs] and set this plug
 module.exports = {
   plugins: [
     require('autoprefixer'),
-+   require('postcss-assign-layer')({
-+     include: '**/*.module.css',
-+     layerName: 'components',
-+   }),
++   require('postcss-assign-layer')(/* Optional configuration */),
   ],
 }
 ```
 
 ### **Step 4:** Configure the plugin
 
-It's possible to configure the include glob, as well as the layer name.
+It's possible to configure the include glob and the layer name, and more than one set of rules can be provided.
+
+```diff
+module.exports = {
+  plugins: [
+    require('autoprefixer'),
++   require('postcss-assign-layer')([
++     {
++       include: '**/*.module.css',
++       layerName: 'components',
++     },
++     {
++       include: 'global/*.css',
++       layerName: 'base',
++     },
++   ]),
+  ],
+}
+```
 
 #### `include`
 

index.js

@@ -1,27 +1,47 @@
 const { createFilter } = require("@rollup/pluginutils");
 
+const DEFAULT_INCLUDE = "**/*.module.css";
+const DEFAULT_LAYERNAME = "components";
+
 /**
  * @type {import('postcss').PluginCreator}
  */
-module.exports = ({
-  include = "**/*.module.css",
-  layerName = "components",
-} = {}) => {
-  const filter = createFilter(include);
+module.exports = (
+  configItems = [
+    {
+      include: DEFAULT_INCLUDE,
+      layerName: DEFAULT_LAYERNAME,
+    },
+  ]
+) => {
+  const filters = [];
+
+  for (const config of configItems) {
+    const filter = createFilter(config.include ?? DEFAULT_INCLUDE);
+    filters.push({ filter, layerName: config.layerName ?? DEFAULT_LAYERNAME });
+  }
 
   return {
     postcssPlugin: "postcss-assign-layers",
     async Once(root, { AtRule }) {
       const inputFile = root.source.input.file;
-      if (!filter(inputFile)) return;
+      const layerNames = [];
+
+      for (const { filter, layerName } of filters) {
+        if (filter(inputFile)) {
+          layerNames.push(layerName);
+        }
+      }
 
-      const layer = new AtRule({
-        name: "layer",
-        params: layerName,
-        nodes: root.nodes,
-      });
-      root.removeAll();
-      root.append(layer);
+      for (const layerName of layerNames) {
+        const layer = new AtRule({
+          name: "layer",
+          params: layerName,
+          nodes: root.nodes,
+        });
+        root.removeAll();
+        root.append(layer);
+      }
     },
   };
 };

index.test.mjs

@@ -53,7 +53,7 @@ describe("postcss-assign-layer", () => {
           color: WhiteSmoke;
         }
       }`,
-      { layerName: "custom" },
+      [{ layerName: "custom" }],
       {
         from: filePath,
       }
@@ -85,9 +85,11 @@ describe("postcss-assign-layer", () => {
           color: FireBrick;
         }
       }`,
-      {
-        include: "**/base.css",
-      },
+      [
+        {
+          include: "**/base.css",
+        },
+      ],
       {
         from: filePath,
       }
@@ -106,11 +108,82 @@ describe("postcss-assign-layer", () => {
       i {
         color: WhiteSmoke;
       }`,
+      [
+        {
+          include: "**/base.css",
+        },
+      ],
+      {
+        from: filePath,
+      }
+    );
+  });
+
+  it("allows specifying layer name and pattern", async () => {
+    const filePath = path.resolve("test/fixtures/base.css");
+    const file = readFileSync(filePath, "utf-8");
+    await run(
+      file,
+      `@layer styles {
+        a {
+          color: FireBrick;
+        }
+      }`,
+      [
+        {
+          include: "**/base.css",
+          layerName: "styles",
+        },
+      ],
+      {
+        from: filePath,
+      }
+    );
+  });
+
+  it("allows multiple patterns and layers", async () => {
+    const basePath = path.resolve("test/fixtures/base.css");
+    const componentPath = path.resolve("test/fixtures/component.module.css");
+    const baseFile = readFileSync(basePath, "utf-8");
+    const componentFile = readFileSync(componentPath, "utf-8");
+    const config = [
       {
         include: "**/base.css",
+        layerName: "styles",
       },
       {
-        from: filePath,
+        // include: "**/*.module.css", <- the default is still used for unspecified properties
+        layerName: "components",
+      },
+    ];
+
+    await run(
+      baseFile,
+      `@layer styles {
+        a {
+          color: FireBrick;
+        }
+      }`,
+      config,
+      {
+        from: basePath,
+      }
+    );
+
+    await run(
+      componentFile,
+      `@layer components {
+        a {
+          color: BurlyWood;
+        }
+
+        i {
+          color: WhiteSmoke;
+        }
+      }`,
+      config,
+      {
+        from: componentPath,
       }
     );
   });