Run an NPM script inside every package in an NX project's library

Question

I'm using NX to manage a React design system mono-repo. I want to create my components within an NX Library and am currently looking into creating a Node package which will run the CSS for each component through PostCSS to get it production ready.

I've tested my PostCSS Node package in isolation and I know it's doing what I need it to to the files, however I'm having trouble working out how to configure the NX repo to run an NPM script in each component's package.json. A component such as my Button component has a package.json like so:

{
  "name": "css-components-button",
  "version": "0.1.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "prepack": "tools-postcss 'lib/**/*.css' dist/"
  },
  "dependencies": {
    "tools-postcss": "file:.yalc/tools-postcss"
  }
}

In the CSS Components Library the project.json file looks like this:

{
  "name": "css-components",
  "sourceRoot": "libs/css-components/src",
  "projectType": "library",
  "tags": [],
  "targets": {
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["libs/css-components/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "build": {
      "executor": "@nrwl/rollup:rollup",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/libs/css-components",
        "tsConfig": "libs/css-components/tsconfig.lib.json",
        "project": "libs/css-components/package.json",
        "entryFile": "libs/css-components/src/index.ts",
        "external": ["react/jsx-runtime"],
        "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
        "compiler": "babel",
        "assets": [
          {
            "glob": "libs/css-components/README.md",
            "input": ".",
            "output": "."
          }
        ]
      }
    },
    "test": {
      "executor": "@nrwl/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "libs/css-components/jest.config.ts",
        "passWithNoTests": true
      }
    },
    "prepack": {
      "executor": "@nrwl/workspace:run-script",
      "options": {
        "script": "prepack"
      }
    }
  }
}

In particular I've added a "prepack" custom target which I'm trying to use to run a "prepack" NPM script in each component's package.json. Currently when I run nx run css-components:prepack in the Terminal I get **error Command "prepack" not found.**

Would really appreciate some help with this. Any ideas?

Answer 1

If you have multiple packages on your monorepo and all or some of the packages have a script (let's say lint). For every package the scripts will be something like:

"scripts": {
    "lint": "eslint ./src --report-unused-disable-directives"
}

now in the main package.json you will have:

"scripts": {
    "lint": "nx run-many -t lint"
}

It's that simple, unfortunately, this basic use case is not presented in the docs and they provide something that is overcomplicated.