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?

My solution was to stop using NX and use Yarn Workspaces instead. It took me a couple of days to configure all the tooling but I'm using Lerna to do this part of it now. You could potentially use Lerna to run the scripts in your NX repo? Bit of a workaround but better than nothing. — decodedcreative, Feb 21 '23 at 20:01

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

0 Answers0