Generate JavaScript tokens

[tylersticka]

Overview

This is an alternative approach to #788. Instead of exposing Theo tokens directly via Rollup, the tokens are preprocessed and JavaScript versions are generated.

The drawback to this approach are that the import paths are a little longer and recompiling token changes is a bit slower.

But there are a few benefits:

1. It appears to play nicely with TypeScript, and does not seem to require any separate declaration files or additions to our existing types.ds file.
2. It allows you to import values directly instead of as a glob.
3. In the future, this may invalidate our need for the Theo Webpack loader, which would further simplify our configuration.

Screenshots

Testing

1. Check out branch locally.
2. Attempt to import a design token of your choosing using one of those documented in Storybook. (To avoid having to create a new file, try adding it to the Elastic Textarea script.)
3. Run npm run build
4. See if the token made it to dist/cloudfour-patterns.js.
5. Run npm run lint and npm run type to make sure there are no errors after that change was made.

---

• Resolves Figure out how to consume design tokens in client-side JS #787

/CC @calebeby

[changeset-bot]

💥 No Changeset

Latest commit: 97554e5

Merging this PR will not cause any packages to be released. If these changes should not cause updates to packages in this repo, this is fine 🙂

If these changes should be published to npm, you need to add a changeset.

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

[spaceninja]

This failed for me. I added

import { textDark } from '../../design-tokens/generated/colors.js';
console.log(textDark);

to elastic-textarea.ts and then ran npm run build per your testing instructions.

It failed because colors.js doesn't exist. It looks like the build command doesn't run the preprocess command. I think we could just add preprocess to the build command like so:

npm run clean && npm run preprocess && run-p build:*

[tylersticka]

@cloudfour/dev @calebeby My heart sank as I added preprocess to our build script and encountered a new error whenever I tried including one of the design token files:

error TS5055: Cannot write file '/Users/tylersticka/Repos/cloudfour.com-patterns/src/design-tokens/generated/colors.js' because it would overwrite input file.

I tried following the recommendations in this Stack Overflow thread, but they don't seem to work.

I'm beyond frustrated. So far, 100% of my experience with TypeScript has been resolving unhelpful errors. I don't know what else to try.

[calebeby]

This looks like it is an error coming from dts-bundle-generator, if npm run type passes but the gulp buildScripts fails.

If that is the case, then I think we should find an alternative to dts-bundle-generator, since it has been causing a lot of problems

[spaceninja]

@calebeby as a way to keep Tyler moving forward with this PR, could we temporarily comment out the buildTypes command?

If not, is there something we could do to help Tyler get this unblocked? I'm unfamiliar with what dts-bundle-generator is doing, so I'm not confident in finding a replacement.

Basically, I think we need to prioritize getting this PR unblocked. That could mean either we fix the root problem if it's quick, or we add a short-term workaround and then file an issue to fix the problem the right way as a separate effort.

[calebeby]

Since we have continuous publishing to npm, I think we shouldn't merge this PR to v-next with buildTypes commented out, because that means that a release could be triggered to npm with types missing, which should be a breaking change.

@tylersticka If you want I can make the changes in another PR today to switch out dts-bundle-generator

[tylersticka]

@calebeby That would be great! Thank you for your help.

[tylersticka]

Feedback addressed and updated with @calebeby's TypeScript improvements. Appears to work on my end once testing steps are followed.

[spaceninja]

Works great!