fix: postcss composes directive

[eirikbacker]

• Closes Investigate CSS composition #2385
• Using same syntax as postcss composes, but custom implementation for postcss

[changeset-bot]

⚠️ No Changeset found

Latest commit: ae8cfce

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

[github-actions]

Preview deployments for this pull request:

📖 Storybook 13. Sep 2024 - 13:30 (Norwegian time)

See all deployments at https://dev.designsystemet.no

[github-actions]

Coverage Report

Status	Category	Percentage	Covered / Total
🔵	Lines	63.75%	4590 / 7200
🔵	Statements	63.75%	4590 / 7200
🔵	Functions	86.11%	155 / 180
🔵	Branches	75.8%	586 / 773

File Coverage

No changed files found.

Generated in workflow #284

[github-actions]

Preview deployments

Theme 13. Sep 2024 - 13:30 (Norwegian time)

[mimarz]

How do we want to handle multiple applies?

1. @apply ds-focus, ds-paragraph--md;

2. @apply ds-focus ds-paragraph--md;

3. @apply ds-focus 
   @apply ds-paragraph--md;

[mimarz]

Do we have to fix the build for individual files? When the rule is not found it just keeps the @apply ds-focus.

[eirikbacker]

Do we have to fix the build for individual files? When the rule is not found it just keeps the @apply ds-focus.

The individual files are not processed at all by postcss as you can see, so I'm a bit unsure why we add them to dist?

[eirikbacker]

How do we want to handle multiple applies?

1. @apply ds-focus, ds-paragraph--md;

2. @apply ds-focus ds-paragraph--md;

3. @apply ds-focus 
   @apply ds-paragraph--md;

I suggest the #3 approach - no problem making the others work, but it will require more code in your little plugin, and one apply class per line seems a bit cleaner too? ☺️

[mimarz]

After a short meeting between me and @eirikbacker we decided to tweak the @apply to a @composes with path to css file like css modules. @composes ds-focus from './utilities.css';

This will make it more clear and also work for single component css files having it applied correctly.

[mimarz]

Make sure to update the description and pr title with new directive name :)

[unekinn]

Bra jobba! 👏