diff --git a/index.js b/index.js index f86661b..0607229 100755 --- a/index.js +++ b/index.js @@ -1,6 +1,7 @@ #!/usr/bin/env node const program = require('commander') +const path = require('path') const watch = require('./lib/watch') const build = require('./lib/build') const scripts = require('./lib/scripts') @@ -32,16 +33,16 @@ program .option('-d, --default', 'overwrites ng-tailwind.js file to default paths except any concurrent arguments') .action((args) => { const ngTwConfig = {} - if (args.config) ngTwConfig.configJS = args.config - if (args.source) ngTwConfig.sourceCSS = args.source - if (args.output) ngTwConfig.outputCSS = args.output + if (args.config) ngTwConfig.configJS = path.resolve(args.config) + if (args.source) ngTwConfig.sourceCSS = path.resolve(args.source) + if (args.output) ngTwConfig.outputCSS = path.resolve(args.output) configure(ngTwConfig, args.default) }) program .command('scripts') .alias('s') - .description('Automatically inserts ng-tailwindcss the default scripts into your package.json') + .description('Automatically inserts the default build/serve/watch scripts into your package.json') .action((cmd) => { scripts() }) diff --git a/lib/build.js b/lib/build.js index c30b9a5..a7413de 100644 --- a/lib/build.js +++ b/lib/build.js @@ -7,10 +7,10 @@ module.exports = () => { if (fs.existsSync(ngTwFile)) { const config = require(ngTwFile) exec( - `./node_modules/.bin/tailwind build ${config.sourceCSS} -c ${config.configJS} -o ${config.outputCSS}`, + `${path.resolve('./node_modules/.bin/tailwind')} build ${config.sourceCSS} -c ${config.configJS} -o ${config.outputCSS}`, err => err ? console.error(err) : console.info('Successful Build!') ) } else { - console.error('No ng-tailwind.js file exists.\nPlease run `ng-tailwindcss configure`.\nRun `ng-tailwindcss --help` for assistance,\nor view the Readme at\nhttps://github.com/tehpsalmist/ng-tailwindcss') + console.error('No ng-tailwind.js file exists.\nPlease run `ng-tailwindcss configure`.\n\nRun `ng-tailwindcss --help` for assistance,\nor view the Readme at\nhttps://github.com/tehpsalmist/ng-tailwindcss') } } diff --git a/lib/configure.js b/lib/configure.js index c9fc709..1885685 100644 --- a/lib/configure.js +++ b/lib/configure.js @@ -4,9 +4,9 @@ const path = require('path') module.exports = (userDefConfig, defaultOverride) => { const ngTwFile = path.resolve(process.cwd(), 'ng-tailwind.js') const defaultConfig = { - configJS: './tailwind.js', - sourceCSS: './src/tailwind.css', - outputCSS: './src/styles.css' + configJS: `${path.resolve('./tailwind.js')}`, + sourceCSS: `${path.resolve('./src/tailwind.css')}`, + outputCSS: `${path.resolve('./src/styles.css')}` } let newConfig let currentConfig @@ -22,8 +22,8 @@ module.exports = (userDefConfig, defaultOverride) => { configJS: '${newConfig.configJS}', sourceCSS: '${newConfig.sourceCSS}', outputCSS: '${newConfig.outputCSS}' -} - `, err => { +}`, + err => { if (err) console.error('Error updating ng-tailwind.js:', err) } ) @@ -39,8 +39,8 @@ module.exports = (userDefConfig, defaultOverride) => { configJS: '${newConfig.configJS}', sourceCSS: '${newConfig.sourceCSS}', outputCSS: '${newConfig.outputCSS}' -} - `, err => { +}`, + err => { if (err) console.error('Error updating ng-tailwind.js:', err) } ) @@ -55,8 +55,8 @@ module.exports = (userDefConfig, defaultOverride) => { configJS: '${newConfig.configJS}', sourceCSS: '${newConfig.sourceCSS}', outputCSS: '${newConfig.outputCSS}' -} - `, err => { +}`, + err => { if (err) console.error('Error creating ng-tailwind.js:', err) } ) diff --git a/lib/watch.js b/lib/watch.js index 7a7d269..f5621a8 100644 --- a/lib/watch.js +++ b/lib/watch.js @@ -15,6 +15,6 @@ module.exports = () => { build() }) } else { - console.error('No ng-tailwind.js file exists.\nPlease run `ng-tailwindcss configure`.\nRun `ng-tailwindcss --help` for assistance,\nor view the Readme at\nhttps://github.com/tehpsalmist/ng-tailwindcss') + console.error('No ng-tailwind.js file exists.\nPlease run `ng-tailwindcss configure` in your project\'s root directory.\nRun `ng-tailwindcss --help` for assistance,\nor view the Readme at https://github.com/tehpsalmist/ng-tailwindcss') } } diff --git a/readme.md b/readme.md index a3a41aa..52ecb5b 100644 --- a/readme.md +++ b/readme.md @@ -7,7 +7,7 @@ If you haven't used [Tailwind CSS](https://tailwindcss.com) yet, you really shou You use `ng eject`! _(loud booing ensues)_ -Yes, using this excellent [SO answer](https://stackoverflow.com/questions/47381149/angular-4-tailwindcss-setup/#answer-47502171) or [YouTube video](https://www.youtube.com/watch?v=mUS0gclgO9Q), you can get at the postCSS controls and have a smooth tailwind build process and enjoy faster development speeds _when writing your styles_. But when you need a fancy new component and you type `ng g c complicated-but-awesome`, you'll quickly realize you just lost 5-10 minutes of your life when your terminal barks back, +Yes, using this excellent [SO answer](https://stackoverflow.com/questions/47381149/angular-4-tailwindcss-setup/#answer-47502171) or [YouTube video](https://www.youtube.com/watch?v=mUS0gclgO9Q), you can get at the postCSS controls and have a smooth tailwind build process and enjoy faster development speeds _when writing your styles_. But when you need a fancy new component and you type `ng g c fancy-new-component`, you'll quickly realize you just lost 5-10 minutes of your life when your terminal barks back, ``` You're on your own, pal. @@ -51,9 +51,9 @@ Put all your [tailwind imports](https://tailwindcss.com/docs/installation/#3-use `ng new angular-meets-tailwind` 3. Follow Steps 1-3 from the Tailwind Installation Instructions: - - [Install Tailwind](https://tailwindcss.com/docs/installation#1-install-tailwind-via-npm) (`npm i tailwindcss -D`) - - [initialize](https://tailwindcss.com/docs/installation#2-create-a-tailwind-config-file) (`./node_modules/.bin/tailwind init`) - - [Use tailwind in your _source_ css files](https://tailwindcss.com/docs/installation#3-use-tailwind-in-your-css). + - [Install Tailwind](https://tailwindcss.com/docs/installation#1-install-tailwind-via-npm) (`npm i tailwindcss -D`) + - [initialize](https://tailwindcss.com/docs/installation#2-create-a-tailwind-config-file) (`./node_modules/.bin/tailwind init`) + - [Use tailwind in your _source_ css files](https://tailwindcss.com/docs/installation#3-use-tailwind-in-your-css). A recommendation for new projects (no changes to global stylesheet yet) is to `touch src/tailwind.css` and use that file for all global styles and [component classes](https://tailwindcss.com/docs/extracting-components). See Configuration below for existing projects.