postcss-color-scheme - npm Package Compare versions

Comparing version 0.2.2 to 0.3.0

CHANGELOG.md

 # Changelog
 
+## 0.3.0
+
+### Minor Changes
+
+- [`e0c5423`](https://github.com/vnphanquang/postcss-color-scheme/commit/e0c54236c6c953e068a1dd84422f3625adb95b30) Thanks [@vnphanquang](https://github.com/vnphanquang)! - adjustments to adhere to [postcss plugin guidelines](https://github.com/postcss/postcss/blob/main/docs/guidelines/plugin.md)
+
+### Patch Changes
+
+- [`da6fac2`](https://github.com/vnphanquang/postcss-color-scheme/commit/da6fac2d405e3719937c943a07c691026cd3bd5b) Thanks [@vnphanquang](https://github.com/vnphanquang)! - test case for invalid parameters
+
 ## 0.2.2
@@ -4,0 +14,0 @@

lib/color-scheme.js

@@ -1,3 +0,1 @@
-const postcss = require('postcss');
-
 /** @typedef {{ global?: boolean }} ColorSchemeTransformConfig */
@@ -18,2 +16,3 @@
 /**
+ * @param {import('postcss').Helpers} helpers
  * @param {import('postcss').AtRule} atRule
@@ -23,56 +22,53 @@ * @param {'dark' | 'light'} theme
  */
-function transform(atRule, theme, config = {}) {
-  try {
-    const { global } = {
-      global: atRule.params.trim() === 'global',
-      ...config,
-    };
-    const parent = atRule.parent;
-    const container = findRootOrMediaNode(parent);
+function transform(helpers, atRule, theme, config = {}) {
+  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);
 
-    let htmlSelectorChunk = `html:not([data-color-scheme="${theme === 'dark' ? 'light' : 'dark'}"])`;
-    if (global) {
-      htmlSelectorChunk = `:global(${htmlSelectorChunk})`;
-    }
-    const implicitRule = new postcss.Rule({
-      selector: postcss.list
-        .comma(parent.selector)
-        .map((s) => `${htmlSelectorChunk} ${s}`)
-        .join(', '),
-      nodes: atRule.nodes,
-    })
-    const implicitAtRule = new postcss.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);
-    }
+  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);
+  }
 
-    htmlSelectorChunk = `html[data-color-scheme="${theme}"]`;
-    if (global) {
-      htmlSelectorChunk = `:global(${htmlSelectorChunk})`;
-    }
-    const explicitRule = new postcss.Rule({
-      selector: postcss.list
-        .comma(parent.selector)
-        .map((s) => `${htmlSelectorChunk} ${s}`)
-        .join(', '),
-      source: atRule.source,
-      nodes: atRule.nodes,
-    });
-    container.append(explicitRule);
+  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();
-  } catch (error) {
-    console.error(error);
-  }
+  atRule.remove();
+  if (parent.nodes.length === 0) parent.remove();
 }
@@ -87,4 +83,4 @@
     AtRule: {
-      'dark': (atRule) => transform(atRule, 'dark'),
-      'light': (atRule) => transform(atRule, 'light'),
+      'dark': (atRule, helpers) => transform(helpers, atRule, 'dark'),
+      'light': (atRule, helpers) => transform(helpers, atRule, 'light'),
     },
@@ -91,0 +87,0 @@ };

package.json

 {
   "name": "postcss-color-scheme",
-  "version": "0.2.2",
+  "version": "0.3.0",
   "description": "postcss plugin for handling prefers-color-scheme",
@@ -18,2 +18,3 @@ "main": "lib/index.js",
   "keywords": [
+    "postcss-plugin",
     "postcss",
@@ -41,2 +42,5 @@ "plugin",
   },
+  "peerDependencies": {
+    "postcss": "^8.0.0"
+  },
   "engines": {
@@ -43,0 +47,0 @@ "pnpm": ">=8.0.0",

No alert changes

Improved metrics

Total package byte prevSize

15690

increased by4.32%

Worsened metrics

Dependency count

1

increased byInfinity%

Lines of code

129

decreased by-2.27%

No dependency changes