callstack / linaria

Zero-runtime CSS in JS library
https://linaria.dev
MIT License
11.7k stars 417 forks source link

cli: doesn't properly resolves globs when executed via lerna #394

Closed Hotell closed 5 years ago

Hotell commented 5 years ago

Environment

macOs 10.14.4 node 8

Description

When linaria CLI is executed via lerna, file globs resolution doesn't work properly (used within monorepo)

Both following use cases are broken when linaria is executed via lerna:

1. via root package.json

{
  "scripts": {
    "build:css": "lerna exec --scope @twisto/styles -- 'linaria --out-dir dist/styles src/**/*.ts src/**/*.tsx'"
  }
}

2. via root package.json script by executing local package.json script

// root package.json
{
  "scripts": {
    "build:css": "lerna run build:css --scope @twisto/styles"
  }
}
// child(package) package.json
{
  "scripts": {
    "build:css": "linaria --out-dir dist/styles src/**/*.ts src/**/*.tsx"
  }
}

This might be indeed yargs bug, because everything depends on argv._ in linaria/cli source.

Globs spread that are applied (lerna vs non lerna exection):

  1. via lerna

Globs are spread only within 1st nested folder level. Second glob is not applied at all -> src/**/*.tsx

$ lerna exec --scope @twisto/styles -- 'linaria --out-dir dist/styles src/**/*.ts src/**/*.tsx'

Executing command in 1 package: "linaria --out-dir dist/styles src/**/*.ts src/**/*.tsx"

# Files (argv._)
     'src/classes/index.ts',
     'src/classes/make-classes.test.ts',
     'src/classes/make-classes.ts',
     'src/theme/breakpoints.test.ts',
     'src/theme/breakpoints.ts',
     'src/theme/colors.ts',
     'src/theme/index.ts',
     'src/theme/mixins.ts',
     'src/theme/palette.ts',
     'src/theme/shadows.ts',
     'src/theme/shapes.ts',
     'src/theme/spacing.ts',
     'src/theme/transitions.ts',
     'src/theme/typography.ts',
     'src/theme/z-index.ts',
    #  👉 whops, WRONG!
     'src/**/*.tsx'
  1. directly from terminal

Globs are properly spread and applied on all files

yarn linaria --out-dir packages/styles/dist/styles packages/styles/src/**/*.ts packages/styles/src/**/*.tsx

# Files
     'packages/styles/src/classes/index.ts',
     'packages/styles/src/classes/make-classes.test.ts',
     'packages/styles/src/classes/make-classes.ts',
     'packages/styles/src/index.ts',
     'packages/styles/src/one/two/three/moo.styles.ts',
     'packages/styles/src/theme/breakpoints.test.ts',
     'packages/styles/src/theme/breakpoints.ts',
     'packages/styles/src/theme/colors.ts',
     'packages/styles/src/theme/index.ts',
     'packages/styles/src/theme/mixins.ts',
     'packages/styles/src/theme/palette.ts',
     'packages/styles/src/theme/shadows.ts',
     'packages/styles/src/theme/shapes.ts',
     'packages/styles/src/theme/spacing.ts',
     'packages/styles/src/theme/transitions.ts',
     'packages/styles/src/theme/typography.ts',
     'packages/styles/src/theme/z-index.ts',
     'packages/styles/src/utility-classes.ts',
     #  👉 CORRECT!
     'packages/styles/src/foo.tsx'
Hotell commented 5 years ago

I've spent 2 hours with this... for anyone else experiencing this issue, fix is following: wrap globs within double quotes 🤦‍🤦‍

{
"build:css": "lerna exec --scope @twisto/icons -- 'linaria --config $LERNA_ROOT_PATH/linaria.config.js --out-dir dist/styles --source-root dist --insert-css-requires dist \"src/**/*.tsx\" \"src/**/*.ts\"'"
}