amzn / style-dictionary

A build system for creating cross-platform styles.
https://styledictionary.com
Apache License 2.0
3.93k stars 557 forks source link

registerAction in a .js config results in TypeError: Cannot read property 'undo' of undefined #879

Closed maxkvelland2xper closed 2 years ago

maxkvelland2xper commented 2 years ago

Having some trouble registering a simple custom action using a .js config and the basic example, I'm getting the following error on style-dictionary build:

"TypeError: Cannot read property 'undo' of undefined"

The steps I've taken:

  1. Ran style-dictionary init basic
  2. Changed the config from .json to .js
  3. Ran style-dictionary build to make sure it runs properly (it does)
  4. Copied the copy_assets custom action example from https://amzn.github.io/style-dictionary/#/api?id=registeraction
  5. Renamed the action (else it seems to run the built-in copy_assets) and removed the fs-functions
  6. Ran style-dictionary build
  7. At this point I'm getting the error "TypeError: Cannot read property 'undo' of undefined", which I'm interpreting as the action not being registered properly

I'm probably missing something obvious but can't figure out what it is.

My config.js for reference:

const StyleDictionary = require("style-dictionary");

StyleDictionary.registerAction({
  name: "copy_monkeys",
  do: function (dictionary, config) {
    console.log("Copying monkey directory");
  },
  undo: function (dictionary, config) {
    console.log("Cleaning monkey directory");
  },
});

module.exports = {
  source: ["tokens/**/*.json"],
  platforms: {
    "ios-swift": {
      transformGroup: "ios-swift",
      buildPath: "build/ios-swift/",
      files: [
        {
          destination: "StyleDictionary.swift",
          format: "ios-swift/class.swift",
          className: "StyleDictionary",
          filter: {},
        },
      ],
      actions: ["copy_monkeys"],
    },
    "ios-swift-separate-enums": {
      transformGroup: "ios-swift-separate",
      buildPath: "build/ios-swift/",
      files: [
        {
          destination: "StyleDictionaryColor.swift",
          format: "ios-swift/enum.swift",
          className: "StyleDictionaryColor",
          filter: {
            attributes: {
              category: "color",
            },
          },
        },
        {
          destination: "StyleDictionarySize.swift",
          format: "ios-swift/enum.swift",
          className: "StyleDictionarySize",
          type: "float",
          filter: {
            attributes: {
              category: "size",
            },
          },
        },
      ],
    },
  },
};
maxkvelland2xper commented 2 years ago

After some trial and error I found to my surprise that renaming my config to sd.config.js and adding

"scripts": {
    "build": "style-dictionary build --config ./sd.config.js"
},

to package.json resolved my issues.

Not sure if this is intended behaviour or not, but it seems very strange to me since the config.js was working properly in terms of which platforms to build etc - but using any registers (registerAction, registerFileHeader, etc) would not work. I would expect the config.js to either apply fully or not at all.

sebastiandg7 commented 2 years ago

@maxkvelland2xper If I'm not wrong, actions registration is meant to be done when using the NPM Module API to run style-dictionary.

maxkvelland2xper commented 2 years ago

@maxkvelland2xper If I'm not wrong, actions registration is meant to be done when using the NPM Module API to run style-dictionary.

Thanks for your input!

I'm not sure I completely understand the difference. As I mentioned, the only changes I made was declaring the build script in package.json and explicitly passing the config (as sd.config.js) and running npm build - as opposed to directly running style-dictionary build and relying on the build script picking up the default config.js name.

Granted, I'm not well-versed in NPM, and if it is indeed obvious to most people then I guess I'll just have to chalk it up as an error on my part.