Skip to content

Commit eb77ac8

Browse files
nielslyngsoenielslyngsoe
committed
Merge remote-tracking branch 'origin/bugfix/replace-postcss-custom-properties-fallback-with-local-version' into bgfix/use-shadow-custom-properties
2 parents e574f14 + 821c43d commit eb77ac8

File tree

9 files changed

+13281
-3726
lines changed

9 files changed

+13281
-3726
lines changed

‎.storybook/main.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,4 @@
11
const tsconfigPaths = require('vite-tsconfig-paths').default;
2-
const processLitCSSPlugin =
3-
require('../scripts/vite.processLitCSSPlugin').default;
42

53
module.exports = {
64
stories: ['../packages/**/*.story.ts'],
@@ -10,9 +8,14 @@ module.exports = {
108
'@storybook/addon-a11y',
119
],
1210
core: { builder: 'storybook-builder-vite' },
11+
staticDirs: ['./images'],
12+
1313
async viteFinal(config, { configType }) {
1414
// customize the Vite config here
1515

16+
const processLitCSSPlugin = (
17+
await import('../scripts/processLitCSSPlugin.mjs')
18+
).default;
1619
config.plugins.push(processLitCSSPlugin());
1720

1821
if (configType === 'DEVELOPMENT') {

‎package-lock.json

Lines changed: 13082 additions & 3637 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,8 @@
2525
"format:prettier": "prettier \"**/*.js\" \"**/*.ts\" \"**/*.mjs\" --write --ignore-path .gitignore",
2626
"lint": "npm run lint:eslint && npm run lint:prettier",
2727
"format": "npm run format:eslint && npm run format:prettier",
28-
"storybook": "npm run bootstrap && npm run storybook:analyze && start-storybook -p 6006 -s ./.storybook/images",
29-
"storybook:build": "npm run bootstrap && npm run storybook:analyze && build-storybook -s ./.storybook/images",
28+
"storybook": "npm run bootstrap && npm run storybook:analyze && start-storybook -p 6006",
29+
"storybook:build": "npm run bootstrap && npm run storybook:analyze && build-storybook",
3030
"storybook:analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json",
3131
"test": "web-test-runner --coverage",
3232
"test:watch": "web-test-runner --watch",
@@ -91,7 +91,6 @@
9191
"postcss-cli": "9.0.1",
9292
"postcss-color-function": "4.1.0",
9393
"postcss-custom-properties": "12.0.0",
94-
"postcss-custom-properties-fallback": "1.0.1",
9594
"postcss-jsx": "0.36.4",
9695
"postcss-load-config": "3.1.0",
9796
"postcss-url": "^10.1.3",

‎packages/rollup-package.config.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,9 @@ import { nodeResolve } from '@rollup/plugin-node-resolve';
33
import minifyHTML from 'rollup-plugin-minify-html-literals';
44
import { readPackageJson } from '../scripts/modify-pkgjson.mjs';
55
import rollupPostcss from 'rollup-plugin-postcss';
6-
import postcssCustomPropertiesFallback from 'postcss-custom-properties-fallback';
6+
import postcssCustomPropertiesFallback from '../scripts/postcss-custom-properties-fallback/plugin.mjs';
77
import path from 'path';
8-
import processLitCSSPlugin from '../scripts/rollup.processLitCSSPlugin.mjs';
8+
import processLitCSSPlugin from '../scripts/processLitCSSPlugin.mjs';
99
import importCss from 'rollup-plugin-import-css';
1010

1111
// @ts-ignore-start

‎packages/uui-css/scripts/cache-custom-properties.mjs

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,17 +35,6 @@ export const CacheCustomProperties = async masterCSSPath => {
3535

3636
let json = JSON.stringify(fileData);
3737

38-
try {
39-
await fs.writeFile(
40-
'./custom-properties.cjs',
41-
`module.exports = ${json};`,
42-
'utf8'
43-
);
44-
} catch (err) {
45-
console.error(err);
46-
}
47-
48-
// Second file for ESM, TODO: fix so we can use the same file in both cases.
4938
try {
5039
await fs.writeFile(
5140
'./custom-properties.module.js',

‎scripts/postcss-custom-properties-fallback/import-from.mjs

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
import fs from 'fs';
2+
import path from 'path';
3+
import * as postcss from 'postcss';
4+
import { parse } from 'postcss-values-parser';
5+
6+
async function getCustomPropertiesFromCSSFile(from) {
7+
const css = await readFile(from); // eslint-disable-next-line no-unused-vars
8+
9+
postcss.parse(css, {
10+
from,
11+
});
12+
throw new Error('Importing from CSS files not supported yet'); //return getCustomPropertiesFromRoot(root, { preserve: true });
13+
}
14+
/* Get Custom Properties from Object
15+
/* ========================================================================== */
16+
17+
function getCustomPropertiesFromObject(object) {
18+
const customProperties = Object.assign(
19+
{},
20+
Object(object).customProperties,
21+
Object(object)['custom-properties']
22+
);
23+
24+
for (const key in customProperties) {
25+
customProperties[key] = parse(String(customProperties[key])).nodes;
26+
}
27+
28+
return customProperties;
29+
}
30+
/* Get Custom Properties from JSON file
31+
/* ========================================================================== */
32+
33+
async function getCustomPropertiesFromJSONFile(from) {
34+
const object = await readJSON(from);
35+
return getCustomPropertiesFromObject(object);
36+
}
37+
/* Get Custom Properties from JS file
38+
/* ========================================================================== */
39+
40+
async function getCustomPropertiesFromJSFile(from) {
41+
const object = await import(from);
42+
43+
return getCustomPropertiesFromObject(object);
44+
}
45+
46+
export default function getCustomPropertiesFromImports(sources) {
47+
return sources
48+
.map(source => {
49+
if (source instanceof Promise) {
50+
return source;
51+
} else if (source instanceof Function) {
52+
return source();
53+
} // read the source as an object
54+
55+
const opts =
56+
source === Object(source)
57+
? source
58+
: {
59+
from: String(source),
60+
}; // skip objects with Custom Properties
61+
62+
if (opts.customProperties || opts['custom-properties']) {
63+
return opts;
64+
} // source pathname
65+
66+
const from = path.resolve(String(opts.from || '')); // type of file being read from
67+
68+
const type = (opts.type || path.extname(from).slice(1)).toLowerCase();
69+
return {
70+
type,
71+
from,
72+
};
73+
})
74+
.reduce(async (customProperties, source) => {
75+
const { type, from } = await source;
76+
77+
if (type === 'css') {
78+
return Object.assign(
79+
await customProperties,
80+
await getCustomPropertiesFromCSSFile(from)
81+
);
82+
}
83+
84+
if (type === 'js') {
85+
return Object.assign(
86+
await customProperties,
87+
await getCustomPropertiesFromJSFile(from)
88+
);
89+
}
90+
91+
if (type === 'json') {
92+
return Object.assign(
93+
await customProperties,
94+
await getCustomPropertiesFromJSONFile(from)
95+
);
96+
}
97+
98+
return Object.assign(
99+
await customProperties,
100+
await getCustomPropertiesFromObject(await source)
101+
);
102+
}, {});
103+
}
104+
105+
const readFile = from =>
106+
new Promise((resolve, reject) => {
107+
fs.readFile(from, 'utf8', (error, result) => {
108+
if (error) {
109+
reject(error);
110+
} else {
111+
resolve(result);
112+
}
113+
});
114+
});
115+
116+
const readJSON = async from => JSON.parse(await readFile(from));
117+
//# sourceMappingURL=import-from.js.map

‎scripts/postcss-custom-properties-fallback/plugin.mjs

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import getCustomPropertiesFromImports from './import-from.mjs';
2+
3+
import valueParser from 'postcss-value-parser'; // match custom property inclusions
4+
// @TODO optimize to skip vars with fallbacks already
5+
6+
const customPropertiesRegExp = /(^|[^\w-])var\([\W\w]+\)/; // var\([\W\w]+,[\W\w]+\) template for detecting if skippable?
7+
// whether the declaration should be potentially transformed
8+
9+
const isTransformableDecl = decl => customPropertiesRegExp.test(decl.value);
10+
11+
import * as postcssValuesParser from 'postcss-values-parser'; // eslint-disable-next-line no-empty-pattern
12+
13+
export default opts => ({
14+
postcssPlugin: 'postcss-custom-properties-fallback',
15+
16+
prepare() {
17+
// sources to import custom selectors from
18+
const importFrom = [].concat(Object(opts).importFrom || []); // promise any custom selectors are imported
19+
20+
const customPropertiesPromise = getCustomPropertiesFromImports(importFrom);
21+
return {
22+
async Declaration(node) {
23+
if (isTransformableDecl(node)) {
24+
const customProperties = await customPropertiesPromise;
25+
const parsed = valueParser(node.value);
26+
parsed.walk(node => {
27+
// Only deal with vars without a fallback
28+
if (node.type !== 'function' || node.nodes.length !== 1) {
29+
return;
30+
}
31+
32+
const fallback = customProperties[node.nodes[0].value];
33+
34+
if (fallback && fallback.length === 1) {
35+
node.nodes.push(
36+
{
37+
type: 'divider',
38+
value: ',',
39+
},
40+
{
41+
type: 'word',
42+
value: fallback,
43+
}
44+
);
45+
} //when fallback value contains more then one node, stringify them with value parser used to parse the customProperties object and add as one node type word.
46+
47+
if (fallback && fallback.length > 1) {
48+
node.nodes.push(
49+
{
50+
type: 'divider',
51+
value: ',',
52+
},
53+
{
54+
type: 'word',
55+
value: fallback
56+
.map(fallbackNode =>
57+
postcssValuesParser.nodeToString(fallbackNode)
58+
)
59+
.join(' '),
60+
}
61+
);
62+
}
63+
});
64+
node.value = parsed.toString();
65+
}
66+
},
67+
};
68+
},
69+
});
70+
//# sourceMappingURL=plugin.js.map

‎scripts/rollup.processLitCSSPlugin.mjs renamed to ‎scripts/processLitCSSPlugin.mjs

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
1+
import { createFilter } from '@rollup/pluginutils';
12
import postcss from 'postcss';
23
import syntax from 'postcss-jsx';
3-
import postcssCustomPropertiesFallback from 'postcss-custom-properties-fallback';
4-
import { createFilter } from '@rollup/pluginutils';
54
import postcssConfig from 'postcss-load-config';
65

7-
// @ts-ignore-start
8-
// eslint-disable-next-line -- // @typescript-eslint/ban-ts-comment // @ts-ignore
9-
import customProperties from '../packages/uui-css/custom-properties.module'; // eslint-disable-line
10-
// @ts-ignore-end
6+
import customProperties from '../packages/uui-css/custom-properties.module.js';
7+
import postcssCustomPropertiesFallback from './postcss-custom-properties-fallback/plugin.mjs';
118

129
const options = {
1310
include: ['**/index.ts', '**/uui-*.ts', '**/*Mixin.ts', '**/*.styles.ts'],

‎scripts/vite.processLitCSSPlugin.js

Lines changed: 0 additions & 65 deletions
This file was deleted.

0 commit comments

Comments
 (0)