Skip to content

Commit 9413291

Browse files
authored
final typescript conversions (#712)
* final typescript conversions * postcss-dir-pseudo-class * export plugin types * fix * fix * fix * postcss-gap-properties * lint * postcss-overflow-shorthand * postcss-place * fix * postcss-pseudo-class-any-link * one more * more fixes and typings * wip * docs * typed options for postcss-preset-env * final fixes * add to list of plugins in execution order * clean up * Update index.ts * update cssdb * update CHANGELOG
1 parent 8bba42a commit 9413291

File tree

186 files changed

+2187
-435
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

186 files changed

+2187
-435
lines changed
+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
import assert from 'assert';
2+
import plugin from 'postcss-preset-env';
3+
import postcss from 'postcss';
4+
5+
const result = await postcss([plugin()]).process(':any-link { color: blue; }').css;
6+
7+
if (process.env.BROWSERSLIST_ENV === 'production') {
8+
assert.equal(
9+
result,
10+
':link, :visited, area[href] { color: blue; }\n' +
11+
':-moz-any-link { color: blue; }\n' +
12+
':any-link { color: blue; }',
13+
);
14+
}
15+
16+
if (process.env.BROWSERSLIST_ENV === 'development') {
17+
assert.equal(result, ':any-link { color: blue; }');
18+
}
+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "@csstools/e2e--browserslist--package-json",
3+
"version": "0.0.0",
4+
"private": true,
5+
"description": "Can you use PostCSS Preset Env with a browserslist in package.json?",
6+
"scripts": {
7+
"test": "BROWSERSLIST_ENV=development node ./index.mjs && BROWSERSLIST_ENV=production node ./index.mjs"
8+
},
9+
"devDependencies": {
10+
"postcss": "^8.4.19",
11+
"postcss-preset-env": "^7.8.3"
12+
},
13+
"browserslist": {
14+
"development": [
15+
"chrome > 100"
16+
],
17+
"production": [
18+
"last 1 version",
19+
"> 1%",
20+
"not dead"
21+
]
22+
}
23+
}

package-lock.json

+10-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

plugin-packs/postcss-preset-env/CHANGELOG.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# Changes to PostCSS Preset Env
22

3+
### Unreleased
4+
5+
- Added: TypeScript support.
6+
- Added `@csstools/postcss-media-queries-aspect-ratio-number-values` [Check the plugin README](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-media-queries-aspect-ratio-number-values#readme) for usage details.
7+
- Fixed: `all-property` and `overflow-wrap-property` now follow the `preserve` plugin option
8+
39
### (8.0.0-alpha.1) (November 14, 2022)
410

511
- Updated Support for Node v14+ (major).

plugin-packs/postcss-preset-env/README.md

-2
Original file line numberDiff line numberDiff line change
@@ -369,8 +369,6 @@ Given they have no support they will always be enabled if they match by Stage:
369369

370370
* `blank-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo) / [Polyfill](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-blank-pseudo/README-BROWSER.md)
371371
* `custom-media-queries`: [Plugin](https://github.com/postcss/postcss-custom-media)
372-
* `has-pseudo-class`: [Plugin](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo) / [Polyfill](https://github.com/csstools/postcss-plugins/blob/main/plugins/css-has-pseudo/README-BROWSER.md)
373-
* `image-set-function`: [Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-image-set-function)
374372
* `media-query-ranges`: [Plugin](https://github.com/postcss/postcss-media-minmax)
375373
* `nesting-rules`: [Plugin](https://github.com/csstools/postcss-plugins/tree/main/plugins/postcss-nesting)
376374

plugin-packs/postcss-preset-env/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
},
1414
"main": "dist/index.cjs",
1515
"module": "dist/index.mjs",
16+
"types": "dist/index.d.ts",
1617
"exports": {
1718
".": {
1819
"import": "./dist/index.mjs",
@@ -33,6 +34,7 @@
3334
"@csstools/postcss-hwb-function": "^1.0.2",
3435
"@csstools/postcss-ic-unit": "^1.0.1",
3536
"@csstools/postcss-is-pseudo-class": "^2.0.7",
37+
"@csstools/postcss-media-queries-aspect-ratio-number-values": "^1.0.0",
3638
"@csstools/postcss-nested-calc": "^1.0.0",
3739
"@csstools/postcss-normalize-display-values": "^1.0.1",
3840
"@csstools/postcss-oklab-function": "^1.1.1",
@@ -47,7 +49,7 @@
4749
"css-blank-pseudo": "^4.1.1",
4850
"css-has-pseudo": "^4.0.1",
4951
"css-prefers-color-scheme": "^7.0.1",
50-
"cssdb": "^7.1.0",
52+
"cssdb": "^7.2.0",
5153
"postcss-attribute-case-insensitive": "^5.0.2",
5254
"postcss-clamp": "^4.1.0",
5355
"postcss-color-functional-notation": "^4.2.4",

plugin-packs/postcss-preset-env/scripts/generate-plugins-data.mjs

+31
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
import { readFile, writeFile } from 'fs/promises';
2+
import { existsSync } from 'fs';
3+
import path from 'path';
4+
25
const pluginsData = await readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse);
36

47
const esmPlugins = `export default ${JSON.stringify(pluginsData, null, 2)}\n`;
@@ -27,7 +30,35 @@ export const pluginsById = new Map(
2730
return result;
2831
}
2932

33+
function generatePluginOptions(data) {
34+
const plugins = data.slice(0).sort((a, b) => a.id.localeCompare(b.id));
35+
let result = '';
36+
37+
for (let i = 0; i < plugins.length; i++) {
38+
const plugin = plugins[i];
39+
40+
if (existsSync(path.join('./src/types/', plugin.packageName, 'plugin-options.ts'))) {
41+
result += `import type { pluginOptions as ${plugin.importName} } from '${path.join('../types/', plugin.packageName, 'plugin-options')}';\n`;
42+
} else {
43+
result += `import type { pluginOptions as ${plugin.importName} } from '${plugin.packageName}';\n`;
44+
}
45+
}
46+
47+
result += '\nexport type pluginsOptions = {\n';
48+
49+
for (let i = 0; i < plugins.length; i++) {
50+
const plugin = plugins[i];
51+
result += `\t/** plugin options for "${plugin.packageName}" */\n`;
52+
result += `\t'${plugin.id}'?: ${plugin.importName} | boolean\n`;
53+
}
54+
55+
result += '};\n';
56+
57+
return result;
58+
}
59+
3060
await Promise.all([
3161
writeFile('./src/plugins/plugins-data.mjs', esmPlugins),
3262
writeFile('./src/plugins/plugins-by-id.mjs', generatePluginsByID(pluginsData)),
63+
writeFile('./src/plugins/plugins-options.ts', generatePluginOptions(pluginsData)),
3364
]);

plugin-packs/postcss-preset-env/scripts/plugins-data.json

+5
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,11 @@
139139
"id": "media-query-ranges",
140140
"importName": "postcssMediaMinmax"
141141
},
142+
{
143+
"packageName": "@csstools/postcss-media-queries-aspect-ratio-number-values",
144+
"id": "media-queries-aspect-ratio-number-values",
145+
"importName": "postcssMediaQueriesAspectRatioNumberValues"
146+
},
142147
{
143148
"packageName": "postcss-nesting",
144149
"id": "nesting-rules",

plugin-packs/postcss-preset-env/src/index.js renamed to plugin-packs/postcss-preset-env/src/index.ts

+6-4
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,11 @@ import { initializeSharedOptions } from './lib/shared-options.mjs';
66
import { listFeatures } from './lib/list-features.mjs';
77
import { newLogger } from './log/helper.mjs';
88
import { pluginIdHelp } from './plugins/plugin-id-help.mjs';
9+
import type { pluginOptions } from './options';
10+
import type { PluginCreator } from 'postcss';
11+
export type { pluginOptions } from './options';
912

10-
11-
const plugin = (opts) => {
13+
const creator: PluginCreator<pluginOptions> = (opts?: pluginOptions) => {
1214
const logger = newLogger();
1315

1416
// initialize options
@@ -58,6 +60,6 @@ const plugin = (opts) => {
5860
};
5961
};
6062

61-
plugin.postcss = true;
63+
creator.postcss = true;
6264

63-
export default plugin;
65+
export default creator;

plugin-packs/postcss-preset-env/src/lib/format-feature.mjs

+10
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,16 @@ export function formatStagedFeature(cssdbList, browsers, features, feature, shar
5454
// postcss-preset-env : option overrides
5555
options.enableProgressiveCustomProperties = false;
5656

57+
// https://github.com/maximkoretskiy/postcss-initial#replace
58+
if (feature.id === 'all-property' && 'preserve' in options) {
59+
options.replace = options.preserve;
60+
}
61+
62+
// https://github.com/MattDiMu/postcss-replace-overflow-wrap/blob/ec9914e0b9473a75a5d1fe32ea4311555eb81b71/index.js#L10
63+
if (feature.id === 'overflow-wrap-property' && 'preserve' in options) {
64+
options.method = options.preserve ? 'copy' : 'replace';
65+
}
66+
5767
if (feature.plugin.postcss && typeof feature.plugin === 'function') {
5868
plugin = feature.plugin(options);
5969
} else if (feature.plugin && feature.plugin.default && typeof feature.plugin.default === 'function' && feature.plugin.default.postcss) {

plugin-packs/postcss-preset-env/src/lib/ids-by-execution-order.mjs

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ export default [
55
'custom-properties',
66
'environment-variables', // run environment-variables here to access transpiled custom media params and properties
77
'image-set-function', // run images-set-function before nesting-rules so that it may fix nested media
8-
'media-query-ranges', // run media-query-range and
8+
'media-query-ranges', // run media-query-range
9+
'media-queries-aspect-ratio-number-values',
910
'prefers-color-scheme-query', // run prefers-color-scheme-query here to prevent duplicate transpilation after nesting-rules
1011
'nesting-rules',
1112
'custom-selectors', // run custom-selectors after nesting-rules to correctly transpile &:--custom-selector
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
import type autoprefixer from 'autoprefixer';
2+
import { pluginsOptions } from './plugins/plugins-options';
3+
4+
export type pluginOptions = {
5+
/**
6+
* Determine which CSS features to polyfill,
7+
* based upon their process in becoming web standards.
8+
* default: 2
9+
*/
10+
stage?: number
11+
12+
/**
13+
* Determine which CSS features to polyfill,
14+
* based their implementation status.
15+
* default: 0
16+
*/
17+
minimumVendorImplementations?: number
18+
19+
/**
20+
* Enable any feature that would need an extra browser library to be loaded into the page for it to work.
21+
* default: false
22+
*/
23+
enableClientSidePolyfills?: boolean
24+
25+
/**
26+
* PostCSS Preset Env supports any standard browserslist configuration,
27+
* which can be a `.browserslistrc` file,
28+
* a `browserslist` key in `package.json`,
29+
* or `browserslist` environment variables.
30+
*
31+
* The `browsers` option should only be used when a standard browserslist configuration is not available.
32+
*/
33+
browsers?: string | readonly string[] | null
34+
35+
/**
36+
* Determine whether all plugins should receive a `preserve` option,
37+
* which may preserve or remove the original and now polyfilled CSS.
38+
* Each plugin has it's own default, some true, others false.
39+
* default: _not set_
40+
*/
41+
preserve?: boolean
42+
43+
/**
44+
* [Configure autoprefixer](https://github.com/postcss/autoprefixer#options)
45+
*/
46+
autoprefixer?: autoprefixer.Options
47+
48+
/**
49+
* Enable or disable specific polyfills by ID.
50+
* Passing `true` to a specific [feature ID](https://github.com/csstools/postcss-plugins/blob/main/plugin-packs/postcss-preset-env/FEATURES.md) will enable its polyfill,
51+
* while passing `false` will disable it.
52+
*
53+
* Passing an object to a specific feature ID will both enable and configure it.
54+
*/
55+
features?: pluginsOptions
56+
57+
/**
58+
* The `insertBefore` key allows you to insert other PostCSS plugins into the chain.
59+
* This is only useful if you are also using sugary PostCSS plugins that must execute before certain polyfills.
60+
* `insertBefore` supports chaining one or multiple plugins.
61+
*/
62+
insertBefore?: Record<string, unknown>
63+
64+
/**
65+
* The `insertAfter` key allows you to insert other PostCSS plugins into the chain.
66+
* This is only useful if you are also using sugary PostCSS plugins that must execute after certain polyfills.
67+
* `insertAfter` supports chaining one or multiple plugins.
68+
*/
69+
insertAfter?: Record<string, unknown>
70+
71+
/**
72+
* Enable debugging messages to stdout giving insights into which features have been enabled/disabled and why.
73+
* default: false
74+
*/
75+
debug?: boolean
76+
}

plugin-packs/postcss-preset-env/src/plugins/plugins-by-id.mjs

+2
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import postcssImageSetFunction from 'postcss-image-set-function';
2626
import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class';
2727
import postcssLabFunction from 'postcss-lab-function';
2828
import postcssLogical from 'postcss-logical';
29+
import postcssMediaQueriesAspectRatioNumberValues from '@csstools/postcss-media-queries-aspect-ratio-number-values';
2930
import postcssMediaMinmax from 'postcss-media-minmax';
3031
import postcssNestedCalc from '@csstools/postcss-nested-calc';
3132
import postcssNesting from 'postcss-nesting';
@@ -75,6 +76,7 @@ export const pluginsById = new Map(
7576
['is-pseudo-class', postcssIsPseudoClass],
7677
['lab-function', postcssLabFunction],
7778
['logical-properties-and-values', postcssLogical],
79+
['media-queries-aspect-ratio-number-values', postcssMediaQueriesAspectRatioNumberValues],
7880
['media-query-ranges', postcssMediaMinmax],
7981
['nested-calc', postcssNestedCalc],
8082
['nesting-rules', postcssNesting],

plugin-packs/postcss-preset-env/src/plugins/plugins-data.mjs

+5
Original file line numberDiff line numberDiff line change
@@ -139,6 +139,11 @@ export default [
139139
'id': 'media-query-ranges',
140140
'importName': 'postcssMediaMinmax',
141141
},
142+
{
143+
'packageName': '@csstools/postcss-media-queries-aspect-ratio-number-values',
144+
'id': 'media-queries-aspect-ratio-number-values',
145+
'importName': 'postcssMediaQueriesAspectRatioNumberValues',
146+
},
142147
{
143148
'packageName': 'postcss-nesting',
144149
'id': 'nesting-rules',

0 commit comments

Comments
 (0)