js-build-tools 2.2.11 → 2.3.0

package/functions/partials/sassFor.test.js

@@ -0,0 +1,62 @@
+const fs = require('fs')
+const setUp = require('../test-helpers/setUp')
+setUp.setDefaults('test-sass-for')
+const gulpConfig = setUp.gulpConfig
+const sassFor = require('./sassFor')
+const { countMatches, logObject } = require('../testHelpers')
+
+const sassContents = 'html\n' +
+  '  font-size: 62.5%\n' +
+  '  color: #444\n' +
+  '  font-size: 1em\n' +
+  '  line-height: 1.4\n' +
+  '  background-color: #fff\n' +
+  '\n' +
+  'html, body\n' +
+  '  width: 100%\n' +
+  '  height: 100%\n' +
+  '  margin: 0\n' +
+  '  padding: 0\n' +
+  '  position: absolute\n' +
+  '  text-align: center\n' +
+  '\n' +
+  'a\n' +
+  '  outline: none\n' +
+  '  text-decoration: none'
+
+const sassPath = gulpConfig.get('sassPath')
+
+beforeEach(() => {
+  setUp.beforeEach()
+  return fs.mkdirSync(sassPath, { recursive: true })
+})
+
+afterEach(setUp.afterEach)
+
+describe('sassFor', () => {
+  test('copies the sass directory and converts it into css output', done => {
+    const sassFile = `${sassPath}/sassFor.sass`
+    fs.writeFileSync(sassFile, sassContents)
+    expect.assertions(7)
+    const oldContents = fs.readFileSync(sassFile).toString()
+    expect(countMatches(oldContents, ';')).toEqual(0)
+    expect(countMatches(oldContents, ' {')).toEqual(0)
+    expect(countMatches(oldContents, '\n' +
+      '    }')).toEqual(0)
+    const cssPath = gulpConfig.get('cssPath')
+    sassFor(sassFile)
+      .on('finish', () => {
+        expect(fs.existsSync(cssPath)).toBeTruthy()
+        const cssContents = fs.readFileSync(`${cssPath}/sassFor.css`).toString()
+        // Will add braces and semicolons
+        expect(countMatches(cssContents, ';')).toEqual(13)
+        expect(countMatches(cssContents, '{')).toEqual(3)
+        expect(countMatches(cssContents, '}')).toEqual(3)
+        done()
+      })
+      .on('error', error => {
+        console.error('Encountered error', error)
+        done()
+      })
+  })
+})

package/functions/partials.js

@@ -17,6 +17,7 @@ const minifyFor = require('./partials/minifyFor')
 const readmeTemplate = require('./partials/readmeTemplate')
 const removeDirectory = require('./partials/removeDirectory')
 const runOnChange = require('./partials/runOnChange')
+const sassFor = require('./partials/sassFor')
 const tsFor = require('./partials/tsFor')
 
 module.exports = {
@@ -30,5 +31,6 @@ module.exports = {
   readmeTemplate,
   removeDirectory,
   runOnChange,
+  sassFor,
   tsFor,
 }

package/functions/partials.test.js

@@ -2,6 +2,6 @@ const partials = require('./partials')
 
 describe('partials', () => {
   test('is object with all partial exports', () => {
-    expect(Object.keys(partials).length).toBe(11)
+    expect(Object.keys(partials).length).toBe(12)
   })
 })

package/functions/sass.js

@@ -0,0 +1,6 @@
+const sassFor = require('./partials/sassFor')
+
+// Compile sass into CSS & auto-inject into browsers
+const sass = () => sassFor()
+
+module.exports = sass

package/functions/sass.test.js

@@ -0,0 +1,30 @@
+const fs = require('fs')
+const setUp = require('./test-helpers/setUp')
+setUp.setDefaults('test-sass')
+const gulpConfig = setUp.gulpConfig
+const sass = require('./sass')
+
+beforeEach(() => setUp.beforeEach().then(
+  () => {
+    const sassPath = gulpConfig.get('sassPath')
+    return fs.mkdirSync(sassPath, { recursive: true })
+  }
+))
+
+afterEach(setUp.afterEach)
+
+describe('sass', () => {
+  test('uses the configured paths', done => {
+    const sassPath = gulpConfig.get('sassPath')
+    expect.assertions(1)
+    sass()
+      .on('finish', () => {
+        expect(fs.existsSync(sassPath)).toBeTruthy()
+        done()
+      })
+      .on('error', error => {
+        console.error('Encountered error', error)
+        done()
+      })
+  }, 10000)
+})

package/functions/test-helpers/setUp.js

@@ -17,8 +17,10 @@ const setDefaults = (testDir = 'test-temp') => {
   srcPath = `${tempDir}src`
   const distPath = `${tempDir}dist`
   const browserPath = `${tempDir}browser`
+  const sassPath = `${tempDir}sass`
   gulpConfig.set('browserPath', browserPath)
   gulpConfig.set('cleanPaths', [distPath, browserPath])
+  gulpConfig.set('cssPath', `${browserPath}/css`)
   gulpConfig.set('distMain', `${distPath}/main`)
   gulpConfig.set('distPath', distPath)
   gulpConfig.set('distSearch', `${distPath}/**/*.js`)
@@ -26,6 +28,8 @@ const setDefaults = (testDir = 'test-temp') => {
   gulpConfig.set('readmePath', tempDir)
   gulpConfig.set('readmeSearch', `${srcPath}/**/!(*.test).js`)
   gulpConfig.set('rootPath', tempDir)
+  gulpConfig.set('sassPath', sassPath)
+  gulpConfig.set('sassSearch', `${sassPath}/**/*.+(scss|sass)`)
   gulpConfig.set('srcPath', srcPath)
   gulpConfig.set('srcSearch', `${srcPath}/**/!(*.test).js`)
   gulpConfig.set('tsSearch', `${srcPath}/**/*.ts`)

package/gulp.config.js

@@ -113,6 +113,7 @@ const setDefaults = {
   browserName: 'default',
   browserPath: 'browser',
   cleanPaths: ['dist', 'browser'],
+  cssPath: 'browser/css',
   distMain: 'dist/main',
   distPath: 'dist',
   distSearch: 'dist/**/*.js',
@@ -123,6 +124,8 @@ const setDefaults = {
   readmePath: './',
   readmeSearch: 'src/**/!(*.test).js',
   rootPath: './',
+  sassPath: 'sass',
+  sassSearch: 'sass/**/*.+(scss|sass)',
   srcPath: 'src',
   srcSearch: 'src/**/!(*.test).js',
   testOptions: {
@@ -138,6 +141,7 @@ const setDefaults = {
   },
   testPath: ['src'],
   tsSearch: 'src/**/*.ts',
+  useSass: false,
   useTsConfig: false,
   watchSearch: 'src/**/*.js'
 }

package/gulpfile.base.js

@@ -17,6 +17,7 @@ const distLint = require('./functions/distLint.js')
 const distMinify = require('./functions/distMinify.js')
 const gulpConfig = require('./gulp.config.js')
 const partials = require('./functions/partials.js')
+const sass = require('./functions/sass.js')
 const testFull = require('./functions/testFull.js')
 const testHelpers = require('./functions/testHelpers.js')
 const testQuick = require('./functions/testQuick.js')
@@ -36,6 +37,7 @@ module.exports = {
   gulpConfig,
   partials,
   readme: compileReadme,
+  sass,
   testFull,
   testHelpers,
   testQuick,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "js-build-tools",
-  "version": "2.2.11",
+  "version": "2.3.0",
   "description": "Standardised build process with gulp.",
   "main": "gulpfile.base.js",
   "scripts": {
@@ -33,26 +33,29 @@
     ]
   },
   "dependencies": {
-    "@babel/core": "^7.23.5",
+    "@babel/core": "^7.23.7",
     "@babel/plugin-proposal-throw-expressions": "^7.23.3",
-    "@babel/preset-env": "^7.23.5",
+    "@babel/preset-env": "^7.23.7",
     "@babel/preset-typescript": "^7.23.3",
-    "@babel/runtime-corejs3": "^7.23.5",
+    "@babel/runtime-corejs3": "^7.23.7",
     "babel-jest": "^29.7.0",
     "browserify": "^17.0.0",
-    "core-js": "^3.34.0",
+    "core-js": "^3.35.0",
     "fs": "^0.0.1-security",
     "glob": "^10.3.10",
     "gulp": "^4.0.2",
     "gulp-babel": "^8.0.0",
+    "gulp-cssnano": "^2.1.3",
     "gulp-rename": "^2.0.0",
+    "gulp-sass": "^5.1.0",
     "gulp-standard": "^14.0.0",
     "gulp-typescript": "^6.0.0-alpha.1",
     "gulp-uglify-es": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdoc-to-markdown": "^8.0.0",
-    "regenerator-runtime": "^0.14.0",
+    "regenerator-runtime": "^0.14.1",
+    "sass": "^1.69.7",
     "vinyl-source-stream": "^2.0.0"
   },
   "files": [