test: test case for invalid parameter

Author: Quang Phan

.changeset/happy-suits-notice.md

@@ -0,0 +1,5 @@
+---
+'postcss-color-scheme': patch
+---
+
+test case for invalid parameters

lib/color-scheme.js

@@ -19,60 +19,56 @@ function findRootOrMediaNode(node) {
  * @param {ColorSchemeTransformConfig} config
  */
 function transform(helpers, atRule, theme, config = {}) {
-  try {
-    const param = atRule.params.trim();
-    if (param && param !== 'global') {
-      atRule.warn('Unsupported parameter, expected "global" or nothing.');
-    }
-    const global = config.global ?? param === 'global';
-    const parent = atRule.parent;
-    const container = findRootOrMediaNode(parent);
-
-    let htmlSelectorChunk = `html:not([data-color-scheme="${theme === 'dark' ? 'light' : 'dark'}"])`;
-    if (global) {
-      htmlSelectorChunk = `:global(${htmlSelectorChunk})`;
-    }
-    const implicitRule = new helpers.Rule({
-      selector: helpers.list
-        .comma(parent.selector)
-        .map((s) => `${htmlSelectorChunk} ${s}`)
-        .join(', '),
-      nodes: atRule.nodes,
-    })
-    const implicitAtRule = new helpers.AtRule({
-      source: atRule.source,
-      name: 'media',
-      params: `(prefers-color-scheme: ${theme})`,
-      nodes: [implicitRule],
-    });
-    const existingAtRule = container.nodes.find((node) => {
-      return node.type === implicitAtRule.type && node.name === implicitAtRule.name && node.params === implicitAtRule.params;
-    });
-    if (existingAtRule) {
-      existingAtRule.append(implicitRule);
-    } else {
-      container.append(implicitAtRule);
-    }
+  const param = atRule.params.trim();
+  if (param && param !== 'global') {
+    throw atRule.error('Invalid parameter, expected "global" or nothing.');
+  }
+  const global = config.global ?? param === 'global';
+  const parent = atRule.parent;
+  const container = findRootOrMediaNode(parent);
 
-    htmlSelectorChunk = `html[data-color-scheme="${theme}"]`;
-    if (global) {
-      htmlSelectorChunk = `:global(${htmlSelectorChunk})`;
-    }
-    const explicitRule = new helpers.Rule({
-      selector: helpers.list
-        .comma(parent.selector)
-        .map((s) => `${htmlSelectorChunk} ${s}`)
-        .join(', '),
-      source: atRule.source,
-      nodes: atRule.nodes,
-    });
-    container.append(explicitRule);
+  let htmlSelectorChunk = `html:not([data-color-scheme="${theme === 'dark' ? 'light' : 'dark'}"])`;
+  if (global) {
+    htmlSelectorChunk = `:global(${htmlSelectorChunk})`;
+  }
+  const implicitRule = new helpers.Rule({
+    selector: helpers.list
+      .comma(parent.selector)
+      .map((s) => `${htmlSelectorChunk} ${s}`)
+      .join(', '),
+    nodes: atRule.nodes,
+  })
+  const implicitAtRule = new helpers.AtRule({
+    source: atRule.source,
+    name: 'media',
+    params: `(prefers-color-scheme: ${theme})`,
+    nodes: [implicitRule],
+  });
+  const existingAtRule = container.nodes.find((node) => {
+    return node.type === implicitAtRule.type && node.name === implicitAtRule.name && node.params === implicitAtRule.params;
+  });
+  if (existingAtRule) {
+    existingAtRule.append(implicitRule);
+  } else {
+    container.append(implicitAtRule);
+  }
 
-    atRule.remove();
-    if (parent.nodes.length === 0) parent.remove();
-  } catch (error) {
-    throw atRule.error('Something went wrong:', error.message);
+  htmlSelectorChunk = `html[data-color-scheme="${theme}"]`;
+  if (global) {
+    htmlSelectorChunk = `:global(${htmlSelectorChunk})`;
   }
+  const explicitRule = new helpers.Rule({
+    selector: helpers.list
+      .comma(parent.selector)
+      .map((s) => `${htmlSelectorChunk} ${s}`)
+      .join(', '),
+    source: atRule.source,
+    nodes: atRule.nodes,
+  });
+  container.append(explicitRule);
+
+  atRule.remove();
+  if (parent.nodes.length === 0) parent.remove();
 }
 
 /**

lib/color-scheme.test.js

@@ -88,3 +88,11 @@ describe('usage with postcss-nested', async () => {
     compareCSS(output, result.css);
   });
 });
+
+test('unsupported parameter', async () => {
+  const input = 'input { @dark meow { color: red } }';
+  const processor = postcss([plugin()]);
+  await expect(
+    processor.process(input, { from: undefined })
+  ).rejects.toThrowError(/Invalid parameter/);
+});