Skip to content

Commit a90c9f5

Browse files
Antonio-Lagunaromainmenke
Antonio-Laguna
and
romainmenke
authored
Preset env home revamp (#316)
* Pseudo dir for now * Ensuring a single source of truth for plugins and features * Finish wiring features * More work * lint generated files * maybe works on windows? * rotating words didn't initialise when I had the bundle in browser cache * Revert "rotating words didn't initialise when I had the bundle in browser cache" This reverts commit be05d4b. * Updating dependencies * Using Prism for highlighting instead of filtering * Changing examples * Removing playground * Limiting height * Moving site to final destination * Removing unused CSS Co-authored-by: romainmenke <romainmenke@gmail.com>
1 parent a3c1316 commit a90c9f5

Some content is hidden

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

61 files changed

+14846
-11421
lines changed

‎plugin-packs/postcss-preset-env/docs/generate.mjs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { packageNamesToIds } from '../src/plugins/plugins-map.mjs';
1+
import { getFeaturesIds } from '../src/plugins/plugins-map.mjs';
22
import cssdb from 'cssdb';
33
import { promises as fsp } from 'fs';
44

@@ -7,7 +7,7 @@ let featuresTable = '';
77
featuresTable = featuresTable + '| ID | Feature | example | docs |\n';
88
featuresTable = featuresTable + '|:--- |:--- |:--- |:--- |\n';
99

10-
const ids = Array.from(Object.values(packageNamesToIds));
10+
const ids = getFeaturesIds();
1111
ids.sort();
1212

1313
for (const id of ids) {

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

+1
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@
7878
"postcss-simple-vars": "^6.0.3"
7979
},
8080
"scripts": {
81+
"prebuild": "node ./scripts/generate-plugins-data.mjs && eslint --fix ./src/plugins/*.mjs",
8182
"build": "rollup -c ../../rollup/default.js",
8283
"clean": "node -e \"fs.rmSync('./dist', { recursive: true, force: true });\"",
8384
"docs": "node ./docs/generate.mjs",

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

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { readFile, writeFile } from 'fs/promises';
2+
const pluginsData = await readFile('./scripts/plugins-data.json', 'utf8').then(JSON.parse);
3+
4+
const esmPlugins = `export default ${JSON.stringify(pluginsData, null, 2)}\n`;
5+
6+
function generatePluginsByID(data) {
7+
const plugins = data.slice(0).sort((a, b) => a.id.localeCompare(b.id));
8+
let result = '';
9+
10+
for (let i = 0; i < plugins.length; i++) {
11+
const plugin = plugins[i];
12+
result += `import ${plugin.importName} from '${plugin.importedPackage || plugin.packageName}';\n`;
13+
}
14+
15+
result += `
16+
// postcss plugins ordered by id
17+
export const pluginsById = new Map(
18+
\t[\n`;
19+
20+
for (let i = 0; i < plugins.length; i++) {
21+
const plugin = plugins[i];
22+
result += `\t\t['${plugin.id}', ${plugin.importName}],\n`;
23+
}
24+
25+
result += '\t],\n);\n';
26+
27+
return result;
28+
}
29+
30+
await Promise.all([
31+
writeFile('./src/plugins/plugins-data.mjs', esmPlugins),
32+
writeFile('./src/plugins/plugins-by-id.mjs', generatePluginsByID(pluginsData)),
33+
]);

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

+198
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
[
2+
{
3+
"packageName": "css-blank-pseudo",
4+
"id": "blank-pseudo-class",
5+
"importName": "postcssBlankPseudo"
6+
},
7+
{
8+
"packageName": "css-has-pseudo",
9+
"id": "has-pseudo-class",
10+
"importName": "postcssHasPseudo"
11+
},
12+
{
13+
"packageName": "css-prefers-color-scheme",
14+
"id": "prefers-color-scheme-query",
15+
"importName": "postcssPrefersColorScheme"
16+
},
17+
{
18+
"packageName": "postcss-attribute-case-insensitive",
19+
"id": "case-insensitive-attributes",
20+
"importName": "postcssAttributeCaseInsensitive"
21+
},
22+
{
23+
"packageName": "postcss-clamp",
24+
"id": "clamp",
25+
"importName": "postcssClamp"
26+
},
27+
{
28+
"packageName": "@csstools/postcss-color-function",
29+
"id": "color-function",
30+
"importName": "postcssColorFunction"
31+
},
32+
{
33+
"packageName": "postcss-color-functional-notation",
34+
"id": "color-functional-notation",
35+
"importName": "postcssColorFunctionalNotation"
36+
},
37+
{
38+
"packageName": "postcss-color-hex-alpha",
39+
"id": "hexadecimal-alpha-notation",
40+
"importName": "postcssColorHexAlpha"
41+
},
42+
{
43+
"packageName": "postcss-color-rebeccapurple",
44+
"id": "rebeccapurple-color",
45+
"importName": "postcssColorRebeccapurple"
46+
},
47+
{
48+
"packageName": "postcss-custom-media",
49+
"id": "custom-media-queries",
50+
"importName": "postcssCustomMedia"
51+
},
52+
{
53+
"packageName": "postcss-custom-properties",
54+
"id": "custom-properties",
55+
"importName": "postcssCustomProperties"
56+
},
57+
{
58+
"packageName": "postcss-custom-selectors",
59+
"id": "custom-selectors",
60+
"importName": "postcssCustomSelectors"
61+
},
62+
{
63+
"packageName": "postcss-dir-pseudo-class",
64+
"id": "dir-pseudo-class",
65+
"importName": "postcssDirPseudoClass"
66+
},
67+
{
68+
"packageName": "postcss-double-position-gradients",
69+
"id": "double-position-gradients",
70+
"importName": "postcssDoublePositionGradients"
71+
},
72+
{
73+
"packageName": "postcss-env-function",
74+
"id": "environment-variables",
75+
"importName": "postcssEnvFunction"
76+
},
77+
{
78+
"packageName": "postcss-focus-visible",
79+
"id": "focus-visible-pseudo-class",
80+
"importName": "postcssFocusVisible"
81+
},
82+
{
83+
"packageName": "postcss-focus-within",
84+
"id": "focus-within-pseudo-class",
85+
"importName": "postcssFocusWithin"
86+
},
87+
{
88+
"packageName": "@csstools/postcss-font-format-keywords",
89+
"id": "font-format-keywords",
90+
"importName": "postcssFontFormatKeywords"
91+
},
92+
{
93+
"packageName": "postcss-font-variant",
94+
"id": "font-variant-property",
95+
"importName": "postcssFontVariant"
96+
},
97+
{
98+
"packageName": "postcss-gap-properties",
99+
"id": "gap-properties",
100+
"importName": "postcssGapProperties"
101+
},
102+
{
103+
"packageName": "@csstools/postcss-hwb-function",
104+
"id": "hwb-function",
105+
"importName": "postcssHWBFunction"
106+
},
107+
{
108+
"packageName": "@csstools/postcss-ic-unit",
109+
"id": "ic-unit",
110+
"importName": "postcssICUnit"
111+
},
112+
{
113+
"packageName": "postcss-image-set-function",
114+
"id": "image-set-function",
115+
"importName": "postcssImageSetFunction"
116+
},
117+
{
118+
"packageName": "postcss-initial",
119+
"id": "all-property",
120+
"importName": "postcssInitial"
121+
},
122+
{
123+
"packageName": "@csstools/postcss-is-pseudo-class",
124+
"id": "is-pseudo-class",
125+
"importName": "postcssIsPseudoClass"
126+
},
127+
{
128+
"packageName": "postcss-lab-function",
129+
"id": "lab-function",
130+
"importName": "postcssLabFunction"
131+
},
132+
{
133+
"packageName": "postcss-logical",
134+
"id": "logical-properties-and-values",
135+
"importName": "postcssLogical"
136+
},
137+
{
138+
"packageName": "postcss-media-minmax",
139+
"id": "media-query-ranges",
140+
"importName": "postcssMediaMinmax"
141+
},
142+
{
143+
"packageName": "postcss-nesting",
144+
"id": "nesting-rules",
145+
"importName": "postcssNesting"
146+
},
147+
{
148+
"packageName": "@csstools/postcss-normalize-display-values",
149+
"id": "display-two-values",
150+
"importName": "postcssNormalizeDisplayValues"
151+
},
152+
{
153+
"packageName": "@csstools/postcss-oklab-function",
154+
"id": "oklab-function",
155+
"importName": "postcssOKLabFunction"
156+
},
157+
{
158+
"packageName": "postcss-opacity-percentage",
159+
"id": "opacity-percentage",
160+
"importName": "postcssOpacityPercentage"
161+
},
162+
{
163+
"packageName": "postcss-overflow-shorthand",
164+
"id": "overflow-property",
165+
"importName": "postcssOverflowShorthand"
166+
},
167+
{
168+
"packageName": "postcss-page-break",
169+
"id": "break-properties",
170+
"importName": "postcssPageBreak"
171+
},
172+
{
173+
"packageName": "postcss-place",
174+
"id": "place-properties",
175+
"importName": "postcssPlace"
176+
},
177+
{
178+
"packageName": "postcss-pseudo-class-any-link",
179+
"id": "any-link-pseudo-class",
180+
"importName": "postcssPseudoClassAnyLink"
181+
},
182+
{
183+
"packageName": "postcss-replace-overflow-wrap",
184+
"id": "overflow-wrap-property",
185+
"importName": "postcssReplaceOverflowWrap"
186+
},
187+
{
188+
"packageName": "postcss-selector-not",
189+
"id": "not-pseudo-class",
190+
"importName": "postcssSelectorNot"
191+
},
192+
{
193+
"packageName": "postcss-system-ui-font-family",
194+
"importedPackage": "../patch/postcss-system-ui-font-family.mjs",
195+
"id": "system-ui-font-family",
196+
"importName": "postcssFontFamilySystemUI"
197+
}
198+
]

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
1-
import { idsToPackageNames, packageNamesToIds } from './plugins-map.mjs';
1+
import { getFeaturesIds, getPackageNames, getPackageNamesToIds } from './plugins-map.mjs';
22

33
export function pluginIdHelp(featureNamesInOptions, root, result) {
4-
const featureNames = Object.keys(idsToPackageNames);
5-
const packageNames = Object.keys(packageNamesToIds);
4+
const featureNames = getFeaturesIds();
5+
const packageNames = getPackageNames();
6+
const packageNamesToIds = getPackageNamesToIds();
67

78
featureNamesInOptions.forEach((featureName) => {
89
if (featureNames.includes(featureName)) {

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

+22-22
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,42 @@
1-
import postcssAttributeCaseInsensitive from 'postcss-attribute-case-insensitive';
1+
import postcssInitial from 'postcss-initial';
2+
import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
23
import postcssBlankPseudo from 'css-blank-pseudo';
4+
import postcssPageBreak from 'postcss-page-break';
5+
import postcssAttributeCaseInsensitive from 'postcss-attribute-case-insensitive';
6+
import postcssClamp from 'postcss-clamp';
7+
import postcssColorFunction from '@csstools/postcss-color-function';
38
import postcssColorFunctionalNotation from 'postcss-color-functional-notation';
4-
import postcssColorHexAlpha from 'postcss-color-hex-alpha';
5-
import postcssColorRebeccapurple from 'postcss-color-rebeccapurple';
69
import postcssCustomMedia from 'postcss-custom-media';
710
import postcssCustomProperties from 'postcss-custom-properties';
811
import postcssCustomSelectors from 'postcss-custom-selectors';
912
import postcssDirPseudoClass from 'postcss-dir-pseudo-class';
13+
import postcssNormalizeDisplayValues from '@csstools/postcss-normalize-display-values';
1014
import postcssDoublePositionGradients from 'postcss-double-position-gradients';
1115
import postcssEnvFunction from 'postcss-env-function';
1216
import postcssFocusVisible from 'postcss-focus-visible';
1317
import postcssFocusWithin from 'postcss-focus-within';
18+
import postcssFontFormatKeywords from '@csstools/postcss-font-format-keywords';
1419
import postcssFontVariant from 'postcss-font-variant';
15-
import postcssFontFamilySystemUi from '../patch/postcss-system-ui-font-family.mjs';
1620
import postcssGapProperties from 'postcss-gap-properties';
1721
import postcssHasPseudo from 'css-has-pseudo';
18-
import postcssImageSetPolyfill from 'postcss-image-set-function';
19-
import postcssInitial from 'postcss-initial';
22+
import postcssColorHexAlpha from 'postcss-color-hex-alpha';
23+
import postcssHWBFunction from '@csstools/postcss-hwb-function';
24+
import postcssICUnit from '@csstools/postcss-ic-unit';
25+
import postcssImageSetFunction from 'postcss-image-set-function';
26+
import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class';
2027
import postcssLabFunction from 'postcss-lab-function';
2128
import postcssLogical from 'postcss-logical';
2229
import postcssMediaMinmax from 'postcss-media-minmax';
2330
import postcssNesting from 'postcss-nesting';
31+
import postcssSelectorNot from 'postcss-selector-not';
32+
import postcssOKLabFunction from '@csstools/postcss-oklab-function';
33+
import postcssOpacityPercentage from 'postcss-opacity-percentage';
2434
import postcssOverflowShorthand from 'postcss-overflow-shorthand';
25-
import postcssPageBreak from 'postcss-page-break';
35+
import postcssReplaceOverflowWrap from 'postcss-replace-overflow-wrap';
2636
import postcssPlace from 'postcss-place';
2737
import postcssPrefersColorScheme from 'css-prefers-color-scheme';
28-
import postcssPseudoClassAnyLink from 'postcss-pseudo-class-any-link';
29-
import postcssReplaceOverflowWrap from 'postcss-replace-overflow-wrap';
30-
import postcssSelectorNot from 'postcss-selector-not';
31-
import postcssIsPseudoClass from '@csstools/postcss-is-pseudo-class';
32-
import postcssHWBFunction from '@csstools/postcss-hwb-function';
33-
import postcssOpacityPercentage from 'postcss-opacity-percentage';
34-
import postcssClamp from 'postcss-clamp';
35-
import postcssFontFormatKeywords from '@csstools/postcss-font-format-keywords';
36-
import postcssNormalizeDisplayValues from '@csstools/postcss-normalize-display-values';
37-
import postcssColorFunction from '@csstools/postcss-color-function';
38-
import postcssOKLabFunction from '@csstools/postcss-oklab-function';
39-
import postcssICUnit from '@csstools/postcss-ic-unit';
38+
import postcssColorRebeccapurple from 'postcss-color-rebeccapurple';
39+
import postcssFontFamilySystemUI from '../patch/postcss-system-ui-font-family.mjs';
4040

4141
// postcss plugins ordered by id
4242
export const pluginsById = new Map(
@@ -61,11 +61,11 @@ export const pluginsById = new Map(
6161
['font-format-keywords', postcssFontFormatKeywords],
6262
['font-variant-property', postcssFontVariant],
6363
['gap-properties', postcssGapProperties],
64-
['hwb-function', postcssHWBFunction],
6564
['has-pseudo-class', postcssHasPseudo],
6665
['hexadecimal-alpha-notation', postcssColorHexAlpha],
66+
['hwb-function', postcssHWBFunction],
6767
['ic-unit', postcssICUnit],
68-
['image-set-function', postcssImageSetPolyfill],
68+
['image-set-function', postcssImageSetFunction],
6969
['is-pseudo-class', postcssIsPseudoClass],
7070
['lab-function', postcssLabFunction],
7171
['logical-properties-and-values', postcssLogical],
@@ -79,6 +79,6 @@ export const pluginsById = new Map(
7979
['place-properties', postcssPlace],
8080
['prefers-color-scheme-query', postcssPrefersColorScheme],
8181
['rebeccapurple-color', postcssColorRebeccapurple],
82-
['system-ui-font-family', postcssFontFamilySystemUi],
82+
['system-ui-font-family', postcssFontFamilySystemUI],
8383
],
8484
);

0 commit comments

Comments
 (0)