[QUESTION] Plugin: PostCSS Design Tokens

[fredboyle]

trafficstars

Is there a recommended PostCSS plugin or method to allow the use of node_module paths in the @design-tokens rule?

Example:

@design-tokens url('@org/module-name/dist/json/tokens.json') format('style-dictionary3');

[romainmenke]

The only way to currently do this is to write out the full path to your node_modules folder.

An example of this can be found in this test :

https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-design-tokens/test/imported.css

[fredboyle]

Ugh that's a bummer. Thanks.

[romainmenke]

I am going to leave this open for a bit because I would like to explore what the options are.

Maybe we can improve things :)

[romainmenke]

@fredboyle We might be able to get this to work with this format :

@design-tokens url('node_modules://@org/module-name/dist/json/tokens.json') format('style-dictionary3');

The node_modules:// scheme is used to differentiate this import from a regular file path. It indicates that the plugin should use node's require.resolve to traverse node_modules directories in search for the listed package.

I considered npm:// but that is misleading because the files are not loaded from npm directly.

Would this solve your issue?

[fredboyle]

@romainmenke Seems reasonable to me and not much of a burden on developers. Makes things a bit more universal and without the need to calculate relative paths every time.

[romainmenke]

@fredboyle We have released v1.2.0 which should resolve this : https://github.com/csstools/postcss-plugins/blob/main/plugins/postcss-design-tokens/CHANGELOG.md#120-september-7-2022

Can you test this version to make sure it works as expected?

If you happen to use the VSCode extension, that one has also been updated with support for node_modules paths.

[romainmenke]

Closing because I assume this now works correct. If you do encounter any more issues feel free to open a new issue or to post a comment here.

Thank you again using the packages and for giving feedback!