postcss-color-scheme - npm Package Compare versions

Comparing version 0.3.1 to 0.3.2

CHANGELOG.md

 # Changelog
 
+## 0.3.2
+
+### Patch Changes
+
+- [`65916b0`](https://github.com/vnphanquang/postcss-color-scheme/commit/65916b0c7bf563b2ed97f8468592aec5343a1873) Thanks [@vnphanquang](https://github.com/vnphanquang)! - added test case where used in deeply nested selectors
+
+- [`7acd332`](https://github.com/vnphanquang/postcss-color-scheme/commit/7acd332da371d1699846411e3684ea78fd7e005e) Thanks [@vnphanquang](https://github.com/vnphanquang)! - fix broken links in README, add missing reference to test case
+
+- [`5b946c3`](https://github.com/vnphanquang/postcss-color-scheme/commit/5b946c317f06b380b925453d18b6bdb3b3ae9789) Thanks [@vnphanquang](https://github.com/vnphanquang)! - add test case for where there are child rules in `@dark` and `@light`
+
+- [`d3d86b6`](https://github.com/vnphanquang/postcss-color-scheme/commit/d3d86b61b2bf2e99069cfd58fae0ff3e0d3955a3) Thanks [@vnphanquang](https://github.com/vnphanquang)! - add to docs clarification that tailwind & postcss plugins can be used together, not one or the other
+
+- [`f4f9c80`](https://github.com/vnphanquang/postcss-color-scheme/commit/f4f9c80607aaadd6af9bd9bd37052a0c234874d9) Thanks [@vnphanquang](https://github.com/vnphanquang)! - add support for `:root` selector; i.e `:root { @dark { /* ... */ } }`
+
 ## 0.3.1
@@ -4,0 +18,0 @@

lib/color-scheme.js

@@ -5,6 +5,10 @@ /** @typedef {{ global?: boolean }} ColorSchemeTransformConfig */
  * @param {import('postcss').Container | import('postcss').Document} node
- * @returns {import('postcss').Container}
+ * @returns {import('postcss').Container | undefined}
  */
 function findRootOrMediaNode(node) {
   const parent = /** @type {import('postcss').Container} */(node.parent);
+  if (!parent) {
+    return undefined;
+  }
+
   if (parent.type === 'root' || (parent.type === 'atrule' && /** @type {import('postcss').AtRule} */(parent).name === 'media')) {
@@ -16,2 +20,4 @@ return parent;
 
+const HTML_SELECTOR_PREFIXES = ['html', ':root'];
+const GLOBAL_HTML_SELECTOR_PREFIXES = HTML_SELECTOR_PREFIXES.map((selector) => `:global(${selector}`);
 /**
@@ -30,6 +36,19 @@ * @param {import('postcss').Helpers} helpers
     let joinedSelector = '';
-    if (selector.startsWith('html')) {
-      joinedSelector = `html${additionalChunk}${selector.substring('html'.length)}`;
-      if (global) joinedSelector = `:global(${joinedSelector})`;
-    } else {
+
+    for (const prefix of GLOBAL_HTML_SELECTOR_PREFIXES) {
+      if (selector.startsWith(prefix)) {
+        joinedSelector = `${prefix}${additionalChunk}${selector.substring(prefix.length)}`;
+        break;
+      }
+    }
+
+    for (const prefix of HTML_SELECTOR_PREFIXES) {
+      if (selector.startsWith(prefix)) {
+        joinedSelector = `${prefix}${additionalChunk}${selector.substring(prefix.length)}`;
+        if (global) joinedSelector = `:global(${joinedSelector})`;
+        break;
+      }
+    }
+
+    if (!joinedSelector) {
       let chunkToAdd = `html${additionalChunk}`;
@@ -56,7 +75,7 @@ if (global) chunkToAdd = `:global(${chunkToAdd})`;
   const global = config.global ?? param === 'global';
-  const parent = atRule.parent;
-  if (!parent) {
-    throw atRule.error(`Expect @${theme} to be nested in a selector or a media query.`);
+  const parent = /** @type {import('postcss').Container} */(atRule.parent);
+  const container = findRootOrMediaNode(parent);
+  if (!container) {
+    throw atRule.error(`Expect @${theme} to be nested in a selector.`);
   }
-  const container = findRootOrMediaNode(parent);
 
@@ -63,0 +82,0 @@ let selectorColorSchemeChunk = `:not([data-color-scheme="${theme === 'dark' ? 'light' : 'dark'}"])`;

package.json

 {
   "name": "postcss-color-scheme",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "description": "postcss plugin for handling prefers-color-scheme",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -56,7 +56,7 @@ # postcss-color-scheme
 
-You might have noticed a couple of opinionated code at the top of this document. These are extracted from my work, and currently serve my use cases very well. Should you have concerns, suggestions for improvements, or solution for making this more generic, feel free to open an issue. Thanks!
+You might have noticed a couple of opinionated code at the top of this document. These are extracted from my daily work, and currently serve my use cases very well. Should you have concerns, suggestions for improvements, or solution for making this more generic, feel free to open an issue. Thanks!
 
 1. Rely on `data-color-scheme` for explicit theme settings. This requires setting `data-color-scheme` on the root html element.
 
-2. Provide fallback to when user has not explicitly select a theme. Let's refer to the demo above, with rules enumerated:
+2. Provide fallback when user has not explicitly select a theme. Let's refer to the demo above, with rules enumerated:
 
@@ -82,3 +82,3 @@ ```css
 
-    Imagine your system provides 3 options: `dark`, `light`, and `system` (default). There are 4 possible scenarios.
+    Imagine your system provides 3 options: `dark`, `light`, and `system` (default, auto, i.e respect system preferences). There are 4 possible scenarios.
 
@@ -109,3 +109,3 @@ 1. User has not explicitly selected a theme (theme = `system`), and the system prefers `light` (`prefers-color-scheme` = `light`):
         C -->Light
-        C --->Dark
+        C -->Dark
     ```
@@ -151,8 +151,11 @@
 | --- | --- | --- | --- |
-| nest in other media queries | `@media (min-width: 768px) { .my-class { @dark { color: white } } }` | [input][tests.in-media-queries.input] | [output][tests.in-media-queries.output] |
-| with combined selector | `.my-class, .others { @dark { color: white } }` | [input][tests.with-combined-selector.input] | [output][tests.with-combined-selector.output] |
-| with [postcss-nesting] | `.my-class { & .nested { @dark { color: white } } }` | [input][tests.with-postcss-nesting.input] | [output][tests.with-postcss-nesting.output] |
-| with [postcss-nested] | `.my-class { .nested { @dark { color: white } } }` | [input][tests.with-postcss-nested.input] | [output][tests.with-postcss-nested.output] |
+| in media queries | `@media (min-width: 768px) { .my-class { @dark { color: blue } } }` | [input][tests.in-media-queries.input] | [output][tests.in-media-queries.output] |
+| with combined selector | `.my-class, .others { @dark { color: blue } }` | [input][tests.with-combined-selector.input] | [output][tests.with-combined-selector.output] |
+| with [postcss-nesting] | `.my-class { & .nested { @dark { color: blue } } }` | [input][tests.with-postcss-nesting.input] | [output][tests.with-postcss-nesting.output] |
+| with [postcss-nested] | `.my-class { .nested { @dark { color: blue } } }` | [input][tests.with-postcss-nested.input] | [output][tests.with-postcss-nested.output] |
+| inside `:global` | `:global(.my-class) { @dark global { color: blue } }` | [input][tests.inside-global.input] | [output][tests.inside-global.output] |
+| with selector at `html`| `html { @dark { color: blue } }` | [input][tests.with-selector-at-html.input] | [output][tests.with-selector-at-html.output] |
+| has child rules| `...` | [input][tests.has-child-rules.input] | [output][tests.has-child-rules.output] |
 
-## Tailwind Support
+## [Tailwind] Support
 
@@ -165,10 +168,10 @@ Make sure you have installed and configured `tailwindcss`.
 
-Add `postcss-color-scheme` to your tailwind config as a plugin, and turn off the default `darkMode` handling.
+Add `postcss-color-scheme` to your [tailwind] config as a plugin, and turn off the default `darkMode` handling.
 
-```js
+```diff
 /** @type {import("tailwindcss").Config } */
 module.exports = {
   // your config ...
-  darkMode: '',
-  plugins: [require('postcss-color-scheme/lib/tailwind')],
++ darkMode: '',
++ plugins: [require('postcss-color-scheme/lib/tailwind')],
 };
@@ -183,17 +186,31 @@ ```
 
+Note that this `tailwind` plugin can be used in conjunction with the `postcss` plugin. They are complementary and not exclusive.
+
+- `postcss` plugin provides `@dark` and `@light` css at-rule syntax,
+- `tailwind` plugin provides `dark:` and `light:` classes in html.
+
 [changelog]: ./CHANGELOG.md
-[tests]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/src/color-scheme.test.js
+[tests]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/color-scheme.test.js
 
-[tests.in-media-queries.input]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/src/tests/in-media-queries.input.css
-[tests.in-media-queries.output]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/src/tests/in-media-queries.output.css
+[tests.in-media-queries.input]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/in-media-queries.input.css
+[tests.in-media-queries.output]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/in-media-queries.output.css
 
-[tests.with-combined-selector.input]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/src/tests/with-combined-selector.input.css
-[tests.with-combined-selector.output]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/src/tests/with-combined-selector.output.css
+[tests.with-combined-selector.input]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/with-combined-selector.input.css
+[tests.with-combined-selector.output]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/with-combined-selector.output.css
 
-[tests.with-postcss-nesting.input]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/src/tests/with-postcss-nesting.input.css
-[tests.with-postcss-nesting.output]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/src/tests/with-postcss-nest.output.css
+[tests.with-postcss-nesting.input]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/with-postcss-nesting.input.css
+[tests.with-postcss-nesting.output]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/with-postcss-nest.output.css
 
-[tests.with-postcss-nested.input]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/src/tests/with-postcss-nested.input.css
-[tests.with-postcss-nested.output]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/src/tests/with-postcss-nest.output.css
+[tests.with-postcss-nested.input]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/with-postcss-nested.input.css
+[tests.with-postcss-nested.output]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/with-postcss-nest.output.css
 
+[tests.with-selector-at-html.input]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/selector-is-html.input.css
+[tests.with-selector-at-html.output]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/selector-is-html.output.css
+
+[tests.inside-global.input]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/inside-global.input.css
+[tests.inside-global.output]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/inside-global.output.css
+
+[tests.has-child-rules.input]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/has-child-rules.input.css
+[tests.has-child-rules.output]: https://github.com/vnphanquang/postcss-color-scheme/blob/main/lib/tests/has-child-rules.output.css
+
 <!-- npm -->
@@ -200,0 +217,0 @@ [npm.badge]: https://img.shields.io/npm/v/postcss-color-scheme

No alert changes

Improved metrics

Total package byte prevSize

20376

increased by19.47%

Lines of code

167

increased by9.87%

Number of lines in readme file

225

increased by8.17%

No dependency changes