ng-tailwindcss - npm Package Compare versions

Comparing version 1.1.4 to 1.2.0

index.js

@@ -40,2 +40,3 @@ #!/usr/bin/env node
   .option('--unset-purge', 'Sets `purge: false` in ng-tailwind.js, which is the default configuration')
+  .option('--sass', 'Sets `sass: true` in ng-tailwind.js. Default is `false`.')
   .action((args) => {
@@ -50,2 +51,3 @@ if (args.purge && args.unsetPurge) {
     if (args.hasOwnProperty('purge') || args.unsetPurge) ngTwConfig.purge = args.purge || false
+    if (args.sass) ngTwConfig.sass = args.sass || false
     configure(ngTwConfig, args.default)
@@ -52,0 +54,0 @@ })

lib/build.js

@@ -6,15 +6,49 @@ const exec = require('child_process').exec
 
+// Conditionally require node-sass
+const pathToSass = path.normalize(path.resolve(process.cwd(), 'node_modules', 'node-sass'))
+let sass = null
+
+try {
+  sass = require(pathToSass)
+} catch (err) {
+  sass = null
+}
+
 module.exports = ({ purgeFlag }) => {
   const ngTwFile = path.normalize(path.resolve(process.cwd(), 'ng-tailwind.js'))
+  const config = fs.existsSync(ngTwFile) && require(ngTwFile)
 
-  if (fs.existsSync(ngTwFile)) {
-    const config = require(ngTwFile)
-    exec(
-      `${path.normalize('./node_modules/.bin/tailwind')} build "${config.sourceCSS}" -c "${config.configJS}" -o "${config.outputCSS}"`,
-      err => {
-        if (err) return console.error(err)
-        console.info('Successful Tailwind Build!')
-        if (config.purge || purgeFlag) purge({})
-      }
-    )
+  const twBuild = (sourceFile) => new Promise((resolve, reject) => exec(
+    `${path.normalize('./node_modules/.bin/tailwind')} build "${sourceFile}" -c "${config.configJS}" -o "${config.outputCSS}"`,
+    err => {
+      if (err) return reject(err)
+
+      console.info('Successful Tailwind Build!')
+
+      if (config.purge || purgeFlag) purge({})
+
+      return resolve(sourceFile)
+    }
+  ))
+
+  const sassBuild = () => new Promise((resolve, reject) => sass.render({
+    file: config.sourceCSS
+  }, (err, result) => {
+    if (err) return reject(err)
+
+    const tempFile = path.normalize(path.resolve(process.cwd(), 'temporary-tailwind-css-file.css'))
+
+    fs.writeFile(tempFile, result.css, err => err ? reject(err) : console.info('Sass Compiled.') || resolve(tempFile))
+  }))
+
+  const removeFile = (file) => fs.unlink(file, err => err && console.error(err))
+
+  if (config) {
+    if (config.sass) {
+      sass
+        ? sassBuild().then(twBuild).then(removeFile).catch(err => err && console.error(err))
+        : console.log('node-sass not installed. Run `npm i -O node-sass` and try again.')
+    } else {
+      twBuild(config.sourceCSS).catch(err => err && console.error(err))
+    }
   } else {
@@ -21,0 +55,0 @@ console.error(`No ng-tailwind.js file found at ${ngTwFile}.

lib/configure.js

@@ -15,2 +15,3 @@ const fs = require('fs')
     purge: false,
+    sass: false,
     keyframes: currentConfig ? currentConfig.keyframes || false : false,
@@ -24,29 +25,17 @@ fontFace: currentConfig ? currentConfig.fontFace || false : false,
 
-  let newConfig
+  if (currentConfig && currentConfig.sass) userDefConfig.sass = currentConfig.sass
 
-  if (defaultOverride) {
-    newConfig = {
-      ...defaultConfig,
-      ...userDefConfig
-    }
-    writeConfigFile(newConfig)
-  } else if (currentConfig) {
-    newConfig = {
-      ...defaultConfig,
-      ...currentConfig,
-      ...userDefConfig
-    }
-    writeConfigFile(newConfig)
-  } else {
-    newConfig = {
-      ...defaultConfig,
-      ...userDefConfig
-    }
-    writeConfigFile(newConfig)
-  }
+  const newConfig = defaultOverride
+    ? { ...defaultConfig, ...userDefConfig }
+    : currentConfig
+      ? { ...defaultConfig, ...currentConfig, ...userDefConfig }
+      : { ...defaultConfig, ...userDefConfig }
 
-  function writeConfigFile (config) {
-    fs.writeFile(
-      ngTwFile,
-      `module.exports = {
+  writeConfigFile(newConfig, ngTwFile)
+}
+
+function writeConfigFile (config, file) {
+  fs.writeFile(
+    file,
+    `module.exports = {
   // Tailwind Paths
@@ -56,2 +45,4 @@ configJS: '${config.configJS}',
   outputCSS: '${config.outputCSS}',
+  // Sass
+  sass: ${config.sass},
   // PurgeCSS Settings
@@ -66,15 +57,14 @@ purge: ${config.purge},
 }\n`,
-      err => err
-        ? console.error('Error writing to ng-tailwind.js:', err)
-        : console.log(`${ngTwFile} updated!`)
-    )
-  }
+    err => err
+      ? console.error('Error writing to ng-tailwind.js:', err)
+      : console.log(`${file} updated!`)
+  )
+}
 
-  function prettyPrint (list) {
-    return list.length ? list.reduce((prettiness, item) => `${prettiness}\n    '${item}',`, '').slice(0, -1) + '\n  ' : ''
-  }
+function prettyPrint (list) {
+  return list.length ? list.reduce((prettiness, item) => `${prettiness}\n    '${item}',`, '').slice(0, -1) + '\n  ' : ''
+}
 
-  function prettyPrintRegex (list) {
-    return list.length ? list.reduce((prettiness, item) => `${prettiness}\n    ${item},`, '').slice(0, -1) + '\n  ' : ''
-  }
+function prettyPrintRegex (list) {
+  return list.length ? list.reduce((prettiness, item) => `${prettiness}\n    ${item},`, '').slice(0, -1) + '\n  ' : ''
 }

lib/scripts.js

@@ -39,6 +39,3 @@ const fs = require('fs')
         JSON.stringify(packageJSON, null, 2),
-        err => {
-          if (err) console.error(err)
-          else console.info('Successfully Updated Scripts!')
-        }
+        err => err ? console.error(err) : console.log('Successfully Updated Scripts!')
       )
@@ -45,0 +42,0 @@ }

package.json

 {
   "name": "ng-tailwindcss",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "preferGlobal": true,
@@ -5,0 +5,0 @@ "bin": {

readme.md

 # ng-tailwindcss
 ### A CLI tool for integrating Tailwind CSS into Angular-CLI projects with as little pain as possible
 
-> _What's New (v1.1.1+):_
+> _What's New (v1.2+):_
 >
-> - PurgeCSS integration! Read on for the updated API
+> - PurgeCSS, ready to rock, right out of the box!
 >
-> - New command alias = `ngtw`
->
-> - No breaking changes! Upgrade from 1.0.3 without skipping a beat!
+> - Sass support with optional dependency on node-sass
 
@@ -76,2 +74,4 @@ ## Why Is This Necessary?
       outputCSS: '/Absolute/path/to/outputted-global-styles.css',
+      // Sass
+      sass: false,
       // PurgeCSS Settings
@@ -123,2 +123,4 @@ ...
     outputCSS: './src/styles.css',
+    // Sass
+    sass: false,
     // PurgeCSS Settings
@@ -147,2 +149,4 @@ ...
     outputCSS: './way/different/location/of/styles.css'
+    // Sass
+    sass: false,
     // PurgeCSS Settings
@@ -167,2 +171,4 @@ ...
     outputCSS: './src/my-groovy-styles.css' // -o (--output) overrides default
+    // Sass
+    sass: false,
     // PurgeCSS Settings
@@ -265,2 +271,4 @@ ...
       outputCSS: './src/styles.css',
+      // Sass
+      sass: false,
       // PurgeCSS Settings
@@ -279,5 +287,17 @@ purge: false,
 
+## Using Sass
+
+To take advantage of Sass in your `tailwind.(s)css` file, you must first install `node-sass` in your project (possibly included with your Angular app if you are using sass there).
+
+Once this optional dependency is in place, configure for Sass with `ngtw c --sass`.
+
+That's all! Keep in mind, this tool does not compile CSS/SCSS from any other files, so you'll still have to configure your `angular.json` for the rest.
+
+**_A note on how this is implemented:_** _The compiled CSS from your tailwind.scss is stored in a temporary `.css` file that is immediately destroyed once the build is complete. At the moment, there is no way to alter this behavior. If this is not optimal for your situaion, please [file an issue](https://github.com/tehpsalmist/ng-tailwindcss/issues/new)._
+
+--------
+
 ## Upgrading from ng-tailwindcss =< 1.0.3
 
-There are no breaking changes from 1.0.3 to 1.1.0, so all commands will continue to work as expected, but to take full advantage of PurgeCSS, simply install the latest version globally with `npm up -g ng-tailwindcss`, then run `ngtw c` and your ng-tailwind.js file will automatically fill out with the default PurgeCSS settings properties (of course, you could manually add them too, if you're into that sort of thing). Even without updating ng-tailwind.js, running any variety of the purge command will still work (and use the default PurgeCSS Settings).
+There are no breaking changes from 1.0.3 to 1.1.0+ or 1.2.0+, so all commands will continue to work as expected, but to take full advantage of PurgeCSS, simply install the latest version globally with `npm i -g ng-tailwindcss@latest`, then run `ngtw c` and your ng-tailwind.js file will automatically fill out with the default PurgeCSS settings properties (of course, you could manually add them too, if you're into that sort of thing). Even without updating ng-tailwind.js, running any variety of the purge command will still work (and use the default PurgeCSS Settings).
 
@@ -325,2 +345,3 @@ --------
           --unset-purge (no alias)
+          --sass (no alias, and must be manually set to false)
 
@@ -340,2 +361,3 @@ build => b
   ```
+
 including `--help` will provide a description of any command or argument.
@@ -342,0 +364,0 @@

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

AI-detected potential code anomaly

Supply chain risk

AI has identified unusual behaviors that may pose a security risk.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

28856

increased by7.8%

Lines of code

287

increased by4.36%

Number of lines in readme file

361

increased by6.49%

Worsened metrics

Number of low supply chain risk alerts

11

increased by22.22%

No dependency changes