Add GitHub Actions to test package exports with CSS @import validation and fix runtime dependencies

[Copilot]

This PR implements automated testing for all package exports to ensure they work correctly for consumers, with comprehensive CSS import validation using actual @import statements.

Problem Solved

The package exports defined in package.json needed validation to ensure they work with pre-release builds and that consumers can properly import CSS files, tokens, and the main API.

Changes Made

Added Explicit Package Exports
Added a clear exports field to package.json defining the public API:

{
  "exports": {
    ".": {
      "types": "./dist/build/primerStyleDictionary.d.ts", 
      "import": "./dist/build/primerStyleDictionary.js"
    },
    "./tokens/*": "./src/tokens/*",
    "./dist/*": "./dist/*"
  }
}

Fixed Runtime Dependencies
Moved essential dependencies from devDependencies to dependencies:

• style-dictionary - Required by the main export
• color2k, json5, prettier, zod - Used by built modules

Added Comprehensive Export Testing

The workflow tests all export patterns with realistic usage:

• Main API: Validates PrimerStyleDictionary functionality
• CSS Files: Uses actual @import statements processed with PostCSS to verify CSS imports work correctly:

  @import '@primer/primitives/dist/css/functional/themes/light.css';

• Token Files: Tests source JSON5 token file access
• Built Files: Validates generated JSON files
• TypeScript: Ensures type definitions work correctly

Pre-release Testing
Added test_exports_prerelease.yml that triggers after Release Candidate workflow to test actual published packages from npm.

Benefits

• Prevents breaking changes to package exports through automated testing
• Validates CSS imports realistically using actual @import statements instead of just file existence checks
• Improves consumer experience with clear, documented exports
• Catches dependency issues that would cause runtime failures
• Provides confidence that the package works as intended across different consumption patterns

This ensures reliable consumption of @primer/primitives by other projects and validates that all documented import patterns continue to work.

---

💬 Share your feedback on Copilot coding agent for the chance to win a $200 gift card! Click here to start the survey.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 6533023

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[lukasoppermann]

@copilot The test is failing:

0s
Run cd test-exports
cd test-exports
PACKAGE_FILE=$(ls ../@primer-primitives-.tgz | head -1)
npm install "$PACKAGE_FILE"
shell: /usr/bin/bash -e {0}
ls: cannot access '../@primer-primitives-.tgz': No such file or directory

up to date, audited 1 package in 247ms

found 0 vulnerabilities
0s
Run cd test-exports
cd test-exports
cat > test-main.mjs << 'EOF'
// Test main export
try {
const { PrimerStyleDictionary } = await import('@primer/primitives');
console.log('✓ Main export works:', typeof PrimerStyleDictionary);

if (!PrimerStyleDictionary || typeof PrimerStyleDictionary !== 'object') {
  throw new Error('PrimerStyleDictionary is not properly exported');
}

// Test that it has expected methods
if (typeof PrimerStyleDictionary.extend !== 'function') {
  throw new Error('PrimerStyleDictionary.extend is not a function');
}

console.log('✓ PrimerStyleDictionary has expected API');

} catch (error) {
console.error('✗ Main export failed:', error.message);
process.exit(1);
}
EOF
node test-main.mjs
shell: /usr/bin/bash -e {0}
✗ Main export failed: Cannot find package '@primer/primitives' imported from /home/runner/work/primitives/primitives/test-exports/test-main.mjs
Error: Process completed with exit code 1.
0s

[lukasoppermann]

@copilot The test is failing:

0s
Run cd test-exports
cd test-exports
PACKAGE_FILE=$(ls ../@primer-primitives-.tgz | head -1)
npm install "$PACKAGE_FILE"
shell: /usr/bin/bash -e {0}
ls: cannot access '../@primer-primitives-.tgz': No such file or directory

up to date, audited 1 package in 247ms

found 0 vulnerabilities
0s
Run cd test-exports
cd test-exports
cat > test-main.mjs << 'EOF'
// Test main export
try {
const { PrimerStyleDictionary } = await import('@primer/primitives');
console.log('✓ Main export works:', typeof PrimerStyleDictionary);

if (!PrimerStyleDictionary || typeof PrimerStyleDictionary !== 'object') {
  throw new Error('PrimerStyleDictionary is not properly exported');
}

// Test that it has expected methods
if (typeof PrimerStyleDictionary.extend !== 'function') {
  throw new Error('PrimerStyleDictionary.extend is not a function');
}

console.log('✓ PrimerStyleDictionary has expected API');

} catch (error) {
console.error('✗ Main export failed:', error.message);
process.exit(1);
}
EOF
node test-main.mjs
shell: /usr/bin/bash -e {0}
✗ Main export failed: Cannot find package '@primer/primitives' imported from /home/runner/work/primitives/primitives/test-exports/test-main.mjs
Error: Process completed with exit code 1.
0s

[Copilot]

@copilot The test is failing:

0s
...

Fixed in commit d161229. The issue was that the test was looking for @primer-primitives-*.tgz but npm pack actually creates primer-primitives-*.tgz (scoped packages remove the @ and replace / with -). Updated the workflow to use the correct filename pattern.

[lukasoppermann]

@copilot Instead of testing if the files exist you need to install the package and import the css files using an import statement in js or @import in css

[Copilot]

Updated in commit 6533023. The CSS testing now uses actual @import statements processed with PostCSS instead of just checking file existence. The test creates CSS files with @import statements like @import '@primer/primitives/dist/css/functional/themes/light.css'; and uses PostCSS with postcss-import to verify they resolve correctly and include the expected content.