Description
Description
Most of the components seem to import fine using postcss-import and lines in my css files like
@import url('@spectrum-css/form/index.css');
@import url('@spectrum-css/fieldlabel/index.css');
however, with both picker and button, I have to use
@import url('@spectrum-css/picker/dist/index.css');
@import url('@spectrum-css/button/dist/index.css');
or else I get
⚠️ Failed to build level_settings_form.css: postcss-import: /Users/lschiere/src/schierer/Game-EvonyTKR/share/node_modules/.pnpm/@spectrum-css+button@14.1.6_@spectrum-css+icon@9.1.0_@spectrum-css+tokens@16.0.2__@spectrum-css+tokens@16.0.2/node_modules/@spectrum-css/button/index.css:14:1: Failed to find '@spectrum-css/commons/basebutton.css'
in [
/Users/lschiere/src/schierer/Game-EvonyTKR/share/node_modules/.pnpm/@spectrum-css+button@14.1.6_@spectrum-css+icon@9.1.0_@spectrum-css+tokens@16.0.2__@spectrum-css+tokens@16.0.2/node_modules/@spectrum-css/button,
/Users/lschiere/src/schierer/Game-EvonyTKR/share/node_modules,
/Users/lschiere/src/schierer/Game-EvonyTKR/share,
/Users/lschiere/src/schierer/Game-EvonyTKR/share/styles
]
12 | */
13 |
> 14 | @import "@spectrum-css/commons/basebutton.css";
| ^
15 | @import "./themes/spectrum-two.css";
16 |
or a slight variation on that with picker instead of button.
Steps to reproduce
- install the npms with pnpm
- create a file
@import url('@spectrum-css/form/index.css'); @import url('@spectrum-css/fieldlabel/index.css'); @import url('@spectrum-css/picker/dist/index.css'); @import url('@spectrum-css/button/dist/index.css'); - create a build script ```
import fs from 'node:fs/promises';
import path from 'node:path';
import process from 'node:process';
import postcss from 'postcss';
// Import PostCSS plugins directly
import postcssImport from 'postcss-import';
import postcssExtend from 'postcss-extend';
import postcssNesting from 'postcss-nesting';
import postcssSorting from 'postcss-sorting';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
import stylelint from 'stylelint';
import { type CssSyntaxError } from 'postcss';
import { exit } from 'node:process';
interface CliArgs {
outDir: string;
minify: boolean;
}
function parseArgs(argv: string[]): CliArgs {
const args = argv.slice(2);
if (args.length < 1) {
console.error('Usage: tsx build-css.ts [--minify]');
process.exit(1);
}
return {
outDir: args[0],
minify: args.includes('--minify'),
};
}
async function buildCSS({ outDir, minify }: CliArgs) {
const stylesDir = path.resolve('styles');
const outputDir = path.resolve(outDir);
try {
const result = await stylelint.lint({
configFile: 'stylelint.config.js',
files: 'styles/*.css',
fix: true,
});
// do things with result.report, result.errored, and result.results
if (result.errored && result.report) {
console.error('css error:', result.report);
exit(1);
}
} catch (err) {
// do things with err e.g.
console.error((err as object)['stack' as keyof typeof err]);
}
const plugins = [
postcssImport({
path: ['node_modules', '.', './styles'],
}),
postcssExtend(),
postcssNesting(),
postcssSorting({
order: ['custom-properties', 'declarations', 'at-rules', 'rules'],
'properties-order': 'alphabetical',
}),
autoprefixer(),
];
if (minify) {
plugins.push(cssnano({ preset: 'default' }));
}
await fs.mkdir(outputDir, { recursive: true });
const entries = await fs.readdir(stylesDir);
const cssFiles = entries.filter((file) => file.endsWith('.css'));
for (const file of cssFiles) {
const inputPath = path.join(stylesDir, file);
const outputPath = path.join(outputDir, file);
const css = await fs.readFile(inputPath, 'utf8');
try {
const result = await postcss(plugins).process(css, {
from: inputPath,
to: outputPath,
});
await fs.writeFile(outputPath, result.css, 'utf8');
console.log(`✔ Built ${path.relative(process.cwd(), outputPath)}`);
} catch (err) {
if (typeof err === 'object' && err) {
if (err instanceof Error) {
console.warn(`⚠️ Failed to build ${file}: ${err.message}`);
}
if ('name' in err && err.name === 'CssSyntaxError') {
console.warn((err as CssSyntaxError).showSourceCode());
}
}
}
}
}
const args = parseArgs(process.argv);
buildCSS(args).catch((err: unknown) => {
console.error('❌ CSS build failed:', err);
process.exit(1);
});
4. configure stylelint as desired.
5. run your build script. ```pnpm tsx ./scripts/build-css.ts ./ts/css/```
6. observe error
## Expected behavior
this should work
## Environment
- OSX 15.5
- pnpm 10.12.2
- node v22.16.0
- grep css package.json
"build:css": "rimraf ./ts/css ; mkdir -p ./ts/css/ ; tsx ./scripts/build-css.ts ./ts/css/",
"@types/postcss-import": "^14.0.3",
"@types/postcss-sorting": "^8.0.2",
"cssnano": "^7.0.7",
"esbuild-plugin-lit-css": "^3.0.2",
"postcss": "^8.5.6",
"postcss-cli": "^11.0.1",
"postcss-extend": "^1.0.5",
"postcss-import": "^16.1.1",
"postcss-load-config": "^6.0.1",
"postcss-nesting": "^13.0.2",
"postcss-preset-env": "^10.2.3",
"postcss-reporter": "^7.1.0",
"postcss-sorting": "^9.1.0",
"@spectrum-css/button": "^14.1.6",
"@spectrum-css/commons": "^11.0.0",
"@spectrum-css/fieldlabel": "^10.1.0",
"@spectrum-css/form": "^1.1.0",
"@spectrum-css/icon": "^9.1.0",
"@spectrum-css/link": "^7.1.0",
"@spectrum-css/overlay": "^4.0.2",
"@spectrum-css/page": "^9.1.0",
"@spectrum-css/picker": "^9.1.4",
"@spectrum-css/sidenav": "^7.1.0",
"@spectrum-css/splitview": "^7.1.0",
"@spectrum-css/table": "^8.1.0",
"@spectrum-css/tokens": "^16.0.2",
"@spectrum-css/typography": "^8.1.0",
## Additional context
There are probably easier ways to reproduce this, but I haven't tried to find a truly minimal one yet. This replicates what I'm doing currently, as I'm building with postcss using exactly this script.