Style-dictionary: Custom Parser is Not Running (3.0.0-rc.1)

[danlevy1]

I tried running the example here (https://github.com/amzn/style-dictionary/tree/3.0/examples/advanced/yaml-tokens) and it appears that the parse function is not running. The css output file in the build directory is not outputting any tokens. Also, when I tried to log the contents or the filePath properties of the parse function parameter, nothing was logged.

I also upgraded to 3.0.0-rc.1 in my own project, and I use the extend function in my config, but it still doesn't work (i.e. the output files don't have any of the tokens/properties). I saw that there was https://github.com/amzn/style-dictionary/pull/511, but #511 has not yet been included in a release. It appears that pre- and post-#511, the yaml parser is not working.

[dbanksdesign]

Sorry about that we have been on break for a bit, but we are getting back into development now. This will be fixed in the next release candidate. We should do another release candidate release this week, hopefully today.

[dbanksdesign]

We just published 3.0.0-rc.2 which should fix the issue. You can get it with npm install style-dictionary@next

[dbanksdesign]

@danlevy1 can you confirm on your end the latest release candidate has custom parsers working? Thanks!

[jkinley]

I tried this today and I am having the same issue. No tokens are being generated.

[dbanksdesign]

@jkinley could you post the code you are using and ensure you are using version 3.0.0-rc.2? I'll take a look and see what the issue is. Thanks!

[jkinley]

@jkinley could you post the code you are using and ensure you are using version 3.0.0-rc.2? I'll take a look and see what the issue is. Thanks!

Hi There. I have definitely using the latest; 3.0.0-rc-2 and I am also using the code in the yaml.tokens example.

/* sd.config.js */

const yaml = require('yaml');

module.exports = {
parsers: [{
// A custom parser will only run against filenames that match the pattern
// This pattern will match any file with the .yaml extension.
// This allows you to mix different types of files in your token source
pattern: /.yaml$/,
// the parse function takes a single argument, which is an object with
// 2 attributes: contents which is a string of the file contents, and
// filePath which is the path of the file.
// The function is expected to return a plain object.
parse: ({contents, filePath}) => yaml.parse(contents)
}],
source: [tokens/**/*.yaml],
platforms: {
css: {
transformGroup: 'css',
buildPath: 'build/',
files: [{
destination: 'variables.css',
format: 'css/variables'
}]
}
}
}

/* package.json */

{
"name": "style-dictionary-example-yaml-tokens",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "style-dictionary build --config ./sd.config.js"
},
"author": "",
"license": "Apache-2.0",
"devDependencies": {
"style-dictionary": "3.0.0-rc.2",
"yaml": "^1.10.0"
}
}

/* Properties > Color > base.yaml */

color:
base:
white:
value: "#fff"
red:
value:
r: 255
g: 0
b: 0
green:
value: "rgb(0,255,0)"
success:
value: "{color.base.green.value}"

[dbanksdesign]

@jkinley could you delete your node_modules directory and package-lock.json and re-install the dependencies? I just tried this example locally and it worked for me. If it would be helpful, we could jump on a zoom call tomorrow to screen share and I could try to debug the issue. I'll also sleep on it tonight, maybe something will come to me in my sleep. Also, could anyone else confirm if custom parsers are working in 3.0.0-rc.2?

[jkinley]

@dbanksdesign Hey man, I really appreciate the support. I will do as you suggest and get back to you. I don't think a zoom call will be necessary, but so cool that you offered. I definitely would like to chat with you someday. I watched your presentation from OSCON and love what you are doing! Thanks so much.

[dbanksdesign]

Of course! Shoot me an email at djb at amazon dot com and we can set up call sometime. My 'virtual' door is always open :)

[danlevy1]

Sorry about the late response, but it's working for me with RC 2 (in my personal project)! I'll test out the yaml example in your repo later today and see if I can replicate what @jkinley is saying.

[jkinley]

@danlevy1 Hey no worries at all. I appreciate your help!

[jkinley]

Hey gang, I have resolved my issue. I knew it was something dumb I was doing. I am still a bit new at this type of dev work so I knew that I just had to keep working at it. In the end, my path to the source dir was not correct. Thanks again for the kindness and support!

[dbanksdesign]

Ah! I should have read your posted code more carefully... Are we good with closing this issue?

[jkinley]

Sure!

Sent from my iPhone

On Jan 15, 2021, at 12:21 PM, Danny Banks [e-mail] wrote:


Ah! I should have read your posted code more carefully... Are we good with closing this issue?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or unsubscribe.