Skip to content

Commit 47ca0d3

Browse files
vnphanquangvnphanquang
committed
feat: [BREAKING] v1.0 - consolidated public API, typescript support
1 parent f5dd1e3 commit 47ca0d3

11 files changed

Lines changed: 1450 additions & 995 deletions

File tree

‎.changeset/selfish-meals-sleep.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"postcss-color-scheme": major
3+
---
4+
5+
[BREAKING] more predictable public exports with typescript support

lib/.eslintrc.cjs renamed to .eslintrc.cjs

File renamed without changes.

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,4 @@ node_modules
22
.DS_Store
33
temp
44
coverage
5+
types

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -166,9 +166,9 @@ Add `postcss-color-scheme` to your [tailwind] config as a plugin, and turn off t
166166
```diff
167167
/** @type {import("tailwindcss").Config } */
168168
module.exports = {
169-
// your config ...
169+
// negate default Tailwind darkMode declaration
170170
+ darkMode: '',
171-
+ plugins: [require('postcss-color-scheme/lib/tailwind')],
171+
+ plugins: [require('postcss-color-scheme/tailwind')],
172172
};
173173
```
174174

‎lib/index.js‎

Lines changed: 0 additions & 1 deletion
This file was deleted.

lib/color-scheme.js renamed to lib/postcss.js

File renamed without changes.

lib/color-scheme.test.js renamed to lib/postcss.test.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import postcssNested from 'postcss-nested';
77
import postcssNesting from 'postcss-nesting';
88
import { test, expect, describe } from 'vitest';
99

10-
import plugin from './color-scheme';
10+
import plugin from './postcss.js';
1111

1212
/**
1313
* @param {string} path

‎lib/tailwind.js‎

Lines changed: 55 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,68 @@
1-
const postcss = require('postcss');
2-
const plugin = require('tailwindcss/plugin');
1+
import postcss from 'postcss';
2+
import plugin from 'tailwindcss/plugin.js';
33

4-
module.exports = plugin(
4+
/**
5+
* Relies on the api object passed to functions in addVariant,
6+
* see https://github.com/tailwindlabs/tailwindcss/blob/f57678e29ba7a9b7b2c1c5862bc9d4fd5b03d240/src/lib/setupContextUtils.js#L543
7+
*/
8+
9+
export default plugin(
510
function({ addVariant }) {
611
// dark
712
addVariant('dark', [
8-
':merge(html[data-color-scheme="dark"]) &',
9-
({ container }) => {
10-
const originalRule = container.nodes[0];
11-
const mediaRule = postcss.atRule({
12-
name: 'media',
13-
params: '(prefers-color-scheme: dark)',
14-
nodes: [
15-
postcss.rule({
16-
selector: `html:not([data-color-scheme="light"]) ${originalRule.selector}`,
17-
nodes: originalRule.nodes,
18-
}),
19-
],
20-
});
21-
container.removeAll();
22-
container.append(mediaRule);
23-
},
13+
() => ':merge(html[data-color-scheme="dark"]) &',
14+
/** @type {any} */(
15+
/**
16+
*
17+
* @param {{ container: import('postcss').Container }} param0
18+
*/
19+
({ container }) => {
20+
const originalRule = /** @type {import('postcss').Rule} */(container.nodes[0]);
21+
const mediaRule = postcss.atRule({
22+
name: 'media',
23+
params: '(prefers-color-scheme: dark)',
24+
nodes: [
25+
postcss.rule({
26+
selector: `html:not([data-color-scheme="light"]) ${originalRule.selector}`,
27+
nodes: originalRule.nodes,
28+
}),
29+
],
30+
});
31+
container.removeAll();
32+
container.append(mediaRule);
33+
}
34+
),
2435
]);
2536

2637
// light
2738
addVariant('light', [
28-
':merge(html[data-color-scheme="light"]) &',
29-
({ container }) => {
30-
const originalRule = container.nodes[0];
31-
const mediaRule = postcss.atRule({
32-
source: originalRule.source,
33-
name: 'media',
34-
params: '(prefers-color-scheme: light)',
35-
nodes: [
36-
postcss.rule({
37-
selector: `html:not([data-color-scheme="dark"]) ${originalRule.selector}`,
38-
nodes: originalRule.nodes,
39-
}),
40-
],
41-
});
42-
container.removeAll();
43-
container.append(mediaRule);
44-
},
39+
() => ':merge(html[data-color-scheme="light"]) &',
40+
/** @type {any} */(
41+
/**
42+
*
43+
* @param {{ container: import('postcss').Container }} param0
44+
*/
45+
({ container }) => {
46+
const originalRule = /** @type {import('postcss').Rule} */(container.nodes[0]);
47+
const mediaRule = postcss.atRule({
48+
source: originalRule.source,
49+
name: 'media',
50+
params: '(prefers-color-scheme: light)',
51+
nodes: [
52+
postcss.rule({
53+
selector: `html:not([data-color-scheme="dark"]) ${originalRule.selector}`,
54+
nodes: originalRule.nodes,
55+
}),
56+
],
57+
});
58+
container.removeAll();
59+
container.append(mediaRule);
60+
}
61+
),
4562
]);
4663
},
4764
{
48-
darkMode: '',
65+
// negate default Tailwind dark variant declaration
66+
darkMode: /** @type {any} */(''),
4967
},
5068
);

‎package.json‎

Lines changed: 43 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,36 @@
22
"name": "postcss-color-scheme",
33
"version": "0.3.2",
44
"description": "postcss plugin for handling prefers-color-scheme",
5-
"main": "lib/index.js",
5+
"type": "module",
6+
"main": "lib/postcss.js",
7+
"types": "types/postcss.d.ts",
8+
"exports": {
9+
".": {
10+
"import": "./lib/postcss.js",
11+
"types": "./types/postcss.d.ts"
12+
},
13+
"./postcss": {
14+
"import": "./lib/postcss.js",
15+
"types": "./types/postcss.d.ts"
16+
},
17+
"./tailwind": {
18+
"import": "./lib/tailwind.js",
19+
"types": "./types/tailwind.d.ts"
20+
}
21+
},
22+
"typesVersions": {
23+
"*": {
24+
"postcss": [
25+
"./types/postcss.d.ts"
26+
],
27+
"tailwind": [
28+
"./types/tailwind.d.ts"
29+
]
30+
}
31+
},
632
"scripts": {
33+
"dts": "tsc",
34+
"prepublishOnly": "tsc",
735
"lint": "eslint --ignore-path .gitignore \"./**/*/*{ts,js,cjs}\"",
836
"test": "vitest --ui --coverage",
937
"ci:test": "vitest run --coverage",
@@ -33,31 +61,32 @@
3361
"mode"
3462
],
3563
"devDependencies": {
36-
"@changesets/changelog-github": "^0.4.8",
37-
"@changesets/cli": "^2.26.2",
38-
"@types/postcss-js": "^4.0.1",
39-
"@vitest/coverage-istanbul": "^0.33.0",
40-
"@vitest/ui": "^0.33.0",
64+
"@changesets/changelog-github": "^0.5.0",
65+
"@changesets/cli": "^2.27.1",
66+
"@types/node": "^20.11.16",
67+
"@types/postcss-js": "^4.0.4",
68+
"@vitest/coverage-istanbul": "^1.2.2",
69+
"@vitest/ui": "^1.2.2",
4170
"@vnphanquang/eslint-config": "^2.0.0",
4271
"@vnphanquang/prettierrc": "^1.0.1",
43-
"postcss": "^8.4.26",
72+
"postcss": "^8.4.33",
4473
"postcss-js": "^4.0.1",
4574
"postcss-nested": "^6.0.1",
46-
"postcss-nesting": "^12.0.0",
47-
"prettier": "^3.0.0",
48-
"tailwindcss": "^3.3.3",
49-
"typescript": "^5.1.6",
50-
"vitest": "^0.33.0"
75+
"postcss-nesting": "^12.0.2",
76+
"prettier": "^3.2.5",
77+
"tailwindcss": "^3.4.1",
78+
"typescript": "^5.3.3",
79+
"vitest": "^1.2.2"
5180
},
5281
"peerDependencies": {
5382
"postcss": "^8.0.0"
5483
},
5584
"engines": {
5685
"pnpm": ">=8.6.0",
57-
"node": ">=18.16.0"
86+
"node": ">=20.0.0"
5887
},
5988
"packageManager": "pnpm@8.6.7",
6089
"volta": {
61-
"node": "18.17.0"
90+
"node": "20.10.0"
6291
}
6392
}

0 commit comments

Comments
 (0)
⚡