• Right now the JS entry file name is correct: index.ts
• Change input site.scss name to index.scss
• Change default ouput site.css name to ipack.css
• Change default output bundle.js name to ipack.js

While technically a breaking change (version 5), the remedy should be easy enough for the tool users.

When: October release will drop Node 6 support in favor of Node 8 LTS, which should bump the major version. Use this moment to perform this change as well.

Allow renaming output css and js file names.

package.json:

{
  "instapack": {
    "jsOut": "bundle.js",
    "cssOut": "site.css",
  }
}

The above example is how you'd emit output files identical to instapack 4.

instapack should intelligently parse jsOut and cssOut: the fields can be set with or without .js or .css extension!

Also, fix concat output configuration to detect whether .js extension is given or not.

• Pros:

  • Certain SASS syntax do not conform to future CSS standards... (like var() and calc())
  • Allows the entire CSS build to run on PostCSS ecosystem (would probably fix the phantom CSS sourcemap issue).
  • Might be faster than libsass. (doubt it)

• Cons:

  • IDEs (e.g. Visual Studio) will scream bloody errors when a future or non-standard symbols are found!

• http://cssnext.io/

  • https://github.com/MoOx/postcss-cssnext
  • https://www.npmjs.com/package/postcss-cssnext
  • Well-maintained. Includes autoprefixer

• Listing down equivalent future CSS features to Sass features, using http://sass-lang.com/guide

  • Variables: http://cssnext.io/features/#custom-properties-var
  • Nesting: http://cssnext.io/features/#nesting
  • Import: use precss or postcss-import
  • Extend: use precss
  • Math operators: http://cssnext.io/features/#reduced-calc

• Rename input site.scss to index.css

• Obviously a breaking change.

  • Build flow: precss --> cssnext --> cssnano
  • Remove packages: node-sass & autoprefixer
  • Add packages: precss & cssnext

This is a thought experiment, related to #257

Check if TypeScript build target in tsconfig.json is es3 or es5

If yes, use uglify-js for minification. We still need this to prevent ninja incompatibilities when one or more libraries are published as ES2015+ (will crash instead of successfully being compiled!)

If no, use terser for minification.

This way, we can actually support people who actually wants to develop web apps not targeting IE anymore!

Often times, developers are not aware of out-of-sync packages in node_modules, when compared to their lock file.

npm install and yarn command can perform quick *offline* integrity check of packages (under 1 seconds) through package-lock.json and yarn.lock files.

The command should be invoked when starting build, in accordance to user's package manager preference (#98).

However, should the command failed due to broken internet connectivity, it MUST NOT block the developer; build should run like nothing happened. (Simply output a warning to the console)

This behavior should be adjustable by using the command:

ipack set integrity-check true
ipack set integrity-check false

This update should disable existing package restore logic (on node_modules missing and on ipack new command).

The integrity check should not run if package.json is missing.

EDIT: also, disable JS build on tsconfig.json missing instead of throwing an error.

https://medium.com/palantir/tslint-in-2019-1a144c2317a9

In order to avoid bifurcating the linting tool space for TypeScript, we therefore plan to deprecate TSLint and focus our efforts instead on improving ESLint’s TypeScript support.

https://github.com/typescript-eslint/typescript-eslint

palantir/tslint#4534

https://eslint.org/blog/2019/01/future-typescript-eslint#the-future-of-typescript-on-eslint

https://github.com/typescript-eslint/typescript-eslint/blob/master/packages/eslint-plugin/ROADMAP.md

The devDependency @types/fs-extra was updated from 5.0.5 to 5.1.0.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/fs-extra is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

The devDependency @types/yargs was updated from 11.1.1 to 11.1.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/yargs is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Similar to git clean -fdxn

Allows user to review which files are to be deleted before command execution!

Currently, instapack depends on the following modules:

• gulp-uglify
• gulp-sass
• browserify-transform-tools for HTMLify transform.

While we already have direct dependency to uglify-js, it would be desirable to be able to depend directly to node-sass.

By using through2, all those three modules can be easily rewritten into TypeScript. The base modules appear to have very simple APIs:

• UglifyJS

var UglifyJS = require("uglify-js");

// Synchronous API
var result = UglifyJS.minify(code);
console.log(result.error);
console.log(result.code); 

• node-sass

var sass = require('node-sass');

// Asynchronous API
sass.render({ 
    data: code,
    [, options..]
}, function(err, result) { /*...*/ });

We can keep on using gulp-postcss because it is an official plugin by PostCSS team!

Currently: info, warning, success, error are coded manually using console.log and chalk. Timed log is a notable exception which gets extracted into CompilerUtilities module.

Ideally there is a module named Logger which contains these assorted methods.

There should be no console.log inside the code base anymore.

Version 6.7.0 is deprecated from npm due to a fatal bug concerning missing tsconfig.json when using ipack new command introduced by this commit.

To compensate for the inconvenience, instapack 6.7.1 special servicing release is now released with fix for above bug plus these changes:

• Backported JS minifier bug fix from 7.0.0
• Backported CSS minifier bug fix from 7.0.0
• Allow 6.7.1 to be installed in NodeJS 11, with the new node-sass update.
• General package and template updates, except TypeScript stays on 3.0.3 to prevent introducing breaking changes to existing 6.7.0 users.
• Removed broken mithril package. (To be investigated further before releasing instapack 7.1.2)
• Added 6.7.1 to Azure CI

This release should hopefully be the last release of instapack 6 version.

Users of instapack 6 are urged to migrate to instapack 7 soon. CC @Tieantono

Thank you to @evanemelga for reporting this bug.

Obviously a breaking change. ☢️ 🚨

When

Currently vetur cannot provide intellisense for members of a component class. vuejs/vetur#145

Accelist dev team prefers the purity of current module ecosystem (TS, JS, HTML, JSON; hence the makeshift .vue.html file). However, this will change if suddenly vetur adds rich intellisense:

• instapack will be modified to enable .vue file compilation!

  • To encourage migrations of older projects for improved maintainability, .vue.html file support will be deprecated.

• VS Code + Vetur will be the preferred IDE for developing a Single-Page Application.

  • and Auto-Close Tag extension.

  • and Auto-Rename Tag extension.

What

The below example reflects the new vue template if Vue Single Component compilation is supported. Currently:

• compiler and framework are not exposed by the vetur auto-complete.

• Hovering over compiler and framework does not tell the data types of respective variables. Neither when using directives such as v-for.

Hello.vue

<template>
  <div>
      <h1>Hello from {{ compiler }} and {{ framework }}!</h1>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
import Component from "vue-class-component";

@Component({
  props: ["framework", "compiler"]
})
export default class Hello extends Vue {
  framework: string;
  compiler: string;
}
</script>

vue-shim.d.ts

declare module "*.vue" {
    import Vue from "vue";
    export default Vue;
}

// allows:
import Hello from './components/Hello.vue';

Changes Required for the TS Build Tool

yarn add vue-loader -E

get typescriptLoader() {
    let options = this.tsconfigOptions;
    options.sourceMap = this.flags.sourceMap;
    options.inlineSources = this.flags.sourceMap;

    return {
        loader: 'core-typescript-loader',
        options: {
            compilerOptions: options
        }
    };
}

get typescriptWebpackRules() {
    return {
        test: /\.tsx?$/,
        use: [this.typescriptLoader]
    };
}

get vueWebpackRules() {
    return {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
            loaders: {
                'ts': [this.typescriptLoader]
            }
        }
    }
}

Changes Required for The TS Checker Tool

Include .vue files regardless it being imported or not. (We cannot detect import due to vue-shim.d.ts)

However we include them as .vue.ts to enable checks. Obviously, this file is imaginary / virtual / phantom.

When reading the file, we read the .vue counterpart, strip all codes before <script lang="ts"> and strip all codes after </script>

This essentially turns the .vue file into a normal TypeScript file. That way, we can still check for errors in parallel with the actual compilation!

In case there are future frameworks doing this kind of 💩 again, develop the feature as a plugin system.

Hello, I'm a bit confused on how to set environment variable to be used on client/index.ts like so

// client/index.ts
const apiUrl = process.env.API_URL

I have tried running ipack with cross-env like

cross-env API_URL=localhost:3000 ipack --dev

also with dotenv, but process.env remains an empty object..

So.. how can I attach config variable to client JS file using ipack?

https://webpack.js.org/configuration/externals/

package.json:

"instapack": {
    "externals": {
        "jquery": "$"
    }
}

Above example indicates that require('jquery') should be converted into window["$"] which is a global object exposed by any browsers.

This is a simple transform, but handy for playing nice with packages build via concat command or libraries downloaded using CDN.

Because this and alias transform both modify the require calls, it is ideal to actually merge both transforms into a single transform called requireify for better performance.

In this new transform, externals will take priority if there is a module with both alias and externals defined. For example:

"instapack": {
    "alias": {
        "vue": "vue/dist/vue.common"
    },
    "externals": {
        "vue": "Vue"
    },
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>

There should also be a warning output for the above anti-pattern.

Default templatify compilation mode is to simply minify then stringify the HTML outputs.

However, frameworks such as Vue.js have methods that allow compilation of HTML to render functions: https://vuejs.org/v2/guide/render-function.html

(Unlike React and Inferno which conveniently support the built-in .tsx file compilation)

Using https://www.npmjs.com/package/vue-template-compiler we can minify then export the render function code for improved Vue.js performance (+30% faster).

Proposed settings:

{
  "instapack": {
    "template": "vue"
  }
}

Default template setting should be string.

Code Usage

Before:

@Component({
    template: require('./MyComponent.html') as string
})
export class MyComponent extends Vue {
}

After:

import { render, staticRenderFns } from './MyComponent.html';

@Component({
    render: render,
    staticRenderFns: staticRenderFns
})
export class MyComponent extends Vue {
}

Enable TypeScript import for .html files by creating this file: template.d.ts

import * as Vue from 'vue';

declare global {
    interface CompiledVueTemplate {
        render: Vue.CreateElement,
        staticRenderFns: ((createElement: Vue.CreateElement) => Vue.VNode)[]
    }

    module '*.html' {
        let _: CompiledVueTemplate;
        export = _;
    }
}

EDIT: Vue component also needs the staticRenderFns passed into the component options!

Whenever package.json and tsconfig.json changes in watch build mode, instapack should re-parse the files, terminate all build processes, and then restart the watch build.

Currently, ipack new command is not friendly for Node.js back-end project because it overwrites the package.json

Ideally, it should merge the two package.json by parsing existing dependencies and incoming dependencies, then overwriting the existing file with the resulting one.

NODE_ENV=production

https://vuejs.org/v2/guide/deployment.html

https://github.com/hughsk/envify

This allows purging development-time warning checks from libraries like Vue.js to optimize build size and performance!

Dev mode speed should not be impacted by this change; do not load the transform when tool detected a dev mode flag.

Sass does not remove multi-line comments, even with compressed-style output.

Sass supports standard multiline CSS comments with /* */, as well as single-line comments with //. The multiline comments are preserved in the CSS output where possible, while the single-line comments are removed.

This behavior is not ideal for minimizing asset size due to multi-line comments often times being large and overly talkative...

To remedy this, currently postcss and postcss-discard-comments are being used. These are overkill.

EDIT: I forgot that autoprefixer requires postcss. Abort mission.

gulp is robust and stable but hasn't been updated in a while. (Last published date for the stable version is nearly 3 years ago...)

Certain modules used internally by gulp can be consumed directly to improve tool quality:

• undertaker is the new task orchestration engine for the unreleased gulp v4, which can replace gulp and gulp-plumber.

• vinyl-fs exposes gulp.src and gulp.dest methods.

• chokidar can be consumed directly in place of gulp-watch.

• bonus: assimilate pretty-bytes, pretty-hrtime, and prettyjson modules.

gulp 4 reference source: https://github.com/gulpjs/gulp/blob/4.0/index.js

There should be two settings:

• Global preferences:

ipack set package-manager yarn
ipack set package-manager npm

Preferences should default to yarn. 🐈

Unless yarn does not exist in the system, then fall back to npm.

For easier instapack debugging / core development, upon completion of #111

There should be another log method named verbose which gets ignored if verbose build flag is invoked, somehow...

Similar to the TypeScript path alias but in package.json instead of tsconfig.json.

{
  "instapack": {
    "cssAlias": {
      "~": "./client/css"
    }
  }
}

EDIT: Is this even a good idea...?

Publishing a package to npm as non-ES5 package is a very bad idea because npm baseline browser / node compatibility is usually assumed to be ES5 (most mainstream JS packages are babel-compiled prior publishing!).

However, there are increasingly worrying amount of packages which are being published as ES2015+ modules.

instapack should automagically detect whether a more advanced language feature is being used than current targeted language in a dependency JS and automagically transpile it!

... when version 4 gets published.

https://www.npmjs.com/package/@types/enhanced-resolve

Currently concat task relies on gulp-concat and event-stream by making multiple pipes and then merging them.

Adding salt to the pain, the gulp.src relies on array of string containing relative / absolute file paths, not resolved file paths. Not to mention that concatResolution getter property on CompilerSettings is using synchronous resolve logic.

By rewriting, performance can be improved and at the same time removing 2 dependencies from the project.

how-to:

• https://github.com/gulpjs/vinyl-fs/blob/master/lib/src/index.js
• https://github.com/alexmingoia/gulp-file/blob/master/lib/file.js

EDIT: rewritten concatenation list resolution using async-await Promise.

Mission

• Refactor concat.json into rpack.json, which allows additional custom settings such as output folder (default is wwwroot).
• Refactor gulpfile.js and its devDependencies into index.js that can be invoked using rpack in command line. https://developer.atlassian.com/blog/2015/11/scripting-with-node/
• Further refactor gulpfile.js into segregated task registration modules.
• Due to package.json split, it is essential to provide tooling for installing / initializing project-level package.json (with only dependencies!), tsconfig.json, rpack.json, and client folder.
• Redesign ryan_modules/stringify.js into a much more opinionated module.
• Rewrite the entire modules in TypeScript.
• Update README for V4

Design Notes

• This change is proposed to reduce disk size, download bandwidth usage, and thus speeding development time for projects using rpack. (Install once then reuse!)
• This change also allows shipping rpack to NPM package repository, which allows easy tooling upgrades using npm / yarn without touching the application project source code.
• This change also allows fast package restore for deploying Continuous Integration, due to new leaner package.json dependencies!

Expected CLI Commands

• rpack builds the whole client application project.
• rpack new provides project initialization tool for plugging into an existing web application project.
• rpack js builds only the TypeScript client project.
• rpack concat performs concatenation on assets defined in rpack.json:concat.
• rpack css builds only the SASS client project.
• rpack --version displays the compiler engine version.
• rpack --help displays a list of available commands.

Build Flags

• -w provides watched (incremental build) project compilation.
• -r provides minified (RELEASE mode) project compilation.

https://www.npmjs.com/package/gulp-imagemin
http://diezjietal.be/blog/2015/02/18/image-optimizers.html

1. Take images from /client/img/**
2. Pipe to /wwwroot/img/**
3. Compare result to https://tinypng.com/analyzer#accelist.com

Alternatively, we can convert images from any format to webp
https://en.wikipedia.org/wiki/WebP

Adds an upgrade notification by reading package.json on master branch on the GitHub repository, parsing the version number, then comparing to currently running CLI package version.

TBA when #258 is completed.

Candidates

vue-es2015 same as vue

react-es2015 same as react but uses the latest and greatest MobX which cannot run in ES5 browsers.

Future Notes

• When Vue 3 targeting ES2015+ browsers is released, we'll be ready.

• Uncertain, but might flip the naming for ES5-targeting templates to es5-[framework_name], for example es5-vue

The latest Vue.js brings about a deadly change: https://medium.com/the-vue-point/upcoming-typescript-changes-in-vue-2-5-e9bd7e2ecf08

The Catalyst

Normally, you'd import Vue.js like this:

import * as Vue from 'vue';

This also applies to most other frameworks, like React, AngularJS, etc.

However, the latest Vue.js 2.5 updated the typings so that you must do this:

import Vue from 'vue';

vuejs/vue#5887
vuejs/vue#6391

The Explanation

Normally this is called an ES module default export / import. For example:

export function x(){}
export function y(){}
export function z(){}
export default function a(){}

Is actually an object:

{
  x: function(){},
  y: function(){},
  z: function(){},
  default: function(){},
}

Therefore when you do this:

import { x, y, z } from './myModule';
import a from './myModule';

You are actually plucking the properties from the exported object!

The Problem

Now you see, by forcing Vue.js default import, you are to expect that the exported Vue.js object has a default property.

However, that is not the case!

The typing is NOT the same as the exported object, which looks somewhat like this: (not default-exported)

{
  component: function(){},
  filter: function(){}
}

When imported using the normal import * as Vue from 'vue' or import Vue = require('vue') syntax, this is correct...

However, this is causing a huge mess when the app code is being forced to use default import syntax.

The Solution

Unlike Browserify; WebPack and Rollup appears to magically convert default imports into star import for libraries which are not default-exported ES module...

Now, we can solve this issue either with the easy way or the hard way:

The easy way would be to simply replace Browserify module bundler with WebPack or Rollup.

The hard way would be to somehow write a transform that emulates this behavior. No idea how for now...

If this feature is completed, allowSyntheticDefaultImports flag in tsconfig.json in projects can be enabled.

The Workaround

Stay on these package versions, for now:

• vue 2.4.4
• vue-class-component 5.0.2
• vue-router 2.7.0
• vuex 2.4.1

Templates will be updated to exact semver for those packages, until the feature is completed.

Chokidar 2.0.0 (Dec 29, 2017)

• Breaking: Upgrade globbing dependencies which require globs to be more strict and always use POSIX-style slashes because Windows-style slashes are used as escape sequences
• Update tests to work with upgraded globbing dependencies
• Add ability to log FSEvents require error by setting CHOKIDAR_PRINT_FSEVENTS_REQUIRE_ERROR env
• Fix for handling braces in globs
• Add node 8 & 9 to CI configs
• Allow node 0.10 failures on Windows

#49 This broke TypeScript checker watch. Needs fix...

Search keyword: HACK78

These can be fixed when source-map sub-dependencies in @types/webpack and @types/webpack-sources are upgraded to version 0.7.1 or above:

https://github.com/ryanelian/instapack/blob/master/src/loaders/core-typescript-loader.ts#L28

https://github.com/ryanelian/instapack/blob/master/src/loaders/template-loader.ts#L90

https://github.com/ryanelian/instapack/blob/master/src/TypeScriptBuildWebpackPlugin.ts#L56

https://github.com/ryanelian/instapack/blob/master/src/TypeScriptBuildWebpackPlugin.ts#L101

This one should be fixed when postcss upgrades their source-map dependency:

https://github.com/ryanelian/instapack/blob/master/src/SassBuildTool.ts#L116

instapack ships with vue-template-compiler but projects might use mismatched vue package version.

instapack should dynamically refer to vue-template-compiler dependency in package.json of the project if explicitly specified.

The devDependency @types/yargs was updated from 12.0.1 to 12.0.2.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/yargs is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Concat is supposed to be an array of string:

{
  "instapack": {
    "concat": {
      "vendor": [
        "jquery",
        "popper.js"
        "bootstrap",
        "jquery-validation",
        "jquery-validation-unobtrusive",
        "./client/lib/my-old-jquery-plugin"
      ]
    }
  }
}

However, if for some reason the developer only defines a single file as a string instead, the build breaks. For example:

{
  "instapack": {
    "concat": {
      "bootstrap": "bootstrap.native"
  }
}

There needs to be an error trap for this scenario (and outputs a warning if detected).

The devDependency @types/webpack was updated from 4.4.29 to 4.4.30.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

http://sass.logdown.com/posts/7807041-feature-watchcss-imports-and-css-compatibility

• Is the official implementation of Sass
• Supports CSS import
• Has npm package
• Faster install
• CONS: slower performance, but we'll work that out.

Grab developer's attention whenever build fails. Do not notify on build success to reduce annoyance.

Recommend using https://github.com/mikaelbr/node-notifier for this job.

Should probably use Windows 10 anime mascot Touko Madobe at notification image for giggles and lulz.

The devDependency @types/webpack was updated from 4.4.21 to 4.4.22.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

@types/webpack is a devDependency of this project. It might not break your production code or affect downstream projects, but probably breaks your build or test tools, which may prevent deploying or publishing.

Your Greenkeeper Bot 🌴

Hi there, I have an issue when using your hot reload feature on an application that running using HTTPS, I keep getting "[WDS] Disconnected!" error. However, this problem does not occur when my application does not running using HTTP.

This is what it looks like in Google Chrome's DevTools:

Hi @ryanelian, I'm a graphic designer and I like to collaborate with open source projects. Do you know that the graphic image of a project is very important? thinking about it I would like to design a logo for your Project Instapack.

I will be pleased to collaborate with you.

On Instapack 7.0, when we use -dw or -h flag, the JS .map files won't be created.
Debug flag alone or watch flag alone works though.

./node_modules/bootstrap-vue/dist/bootstrap-vue.css 1:0
Module parse failed: Unexpected character '@' (1:0)
You may need an appropriate loader to handle this file type.

@charset "UTF-8";
| /*!
| * BootstrapVue Custom CSS (https://bootstrap-vue.js.org)
@ ./client/js/vue-project.ts 13:0-46
@ ./client/js/index.ts
@ multi ./client/js/index.ts

./node_modules/bootstrap/dist/css/bootstrap.css 7:0
Module parse failed: Unexpected token (7:0)
You may need an appropriate loader to handle this file type.
| * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
| */

:root {
| --blue: #007bff;
| --indigo: #6610f2;
@ ./client/js/vue-project.ts 12:0-42
@ ./client/js/index.ts
@ multi ./client/js/index.ts

https://jaketrent.com/post/package-json-style-attribute/

Apparently nowadays there is a style field in package.json pointing to CSS file to be imported, just like main field for JS file:

https://github.com/twbs/bootstrap/blob/v4-dev/package.json

"style": "dist/css/bootstrap.css",
"sass": "scss/bootstrap.scss",

https://github.com/Semantic-Org/Semantic-UI/blob/master/package.json

"style": "dist/semantic.css",

https://github.com/uikit/uikit/blob/develop/package.json

"style": "dist/css/uikit.css",

https://github.com/FortAwesome/Font-Awesome/blob/fa-4/package.json

"style": "css/font-awesome.css",

We have the technology to redirect package imports using node-sass importer function: https://github.com/sass/node-sass

Specifications

For example, from /client/css/index.scss

@import '@ryan/something';

1. Disable the existing node_modules folder resolution first.

2. Default behavior: Check whether the file exists when imported relative to original file. If yes, use this file. For example: /client/css/@ryan/something.scss

3. Default behavior: Sass happened to have something called partial files: if you @import "something", it also resolves to _something.scss. Therefore we need to look up whether partial files exist during relative import... For example: /client/css/@ryan/_something.scss

4. Default behavior: Sass also import normal CSS file when import does NOT end with .scss extension. Look it up relatively. For example: /client/css/@ryan/something.css

5. Custom instapack behavior: Check whether the file exists when imported relative to original file, but as index.scss in a folder. Disable this behavior when the import ends with .scss extension. For example: /client/css/@ryan/something/index.scss

6. Custom instapack behavior: Check whether the file exists when imported relative to original file, but as index.css in a folder. Disable this behavior when the import ends with .scss extension. For example: /client/css/@ryan/something/index.css

7. Legacy instapack behavior: Check whether the file exists when imported relative to node_modules as SCSS file. If yes, use this file. For example: /node_modules/@ryan/something.scss

8. Legacy instapack behavior: Check whether the file exists when imported relative to node_modules as partial file. If yes, use this file. For example: /node_modules/@ryan/_something.scss

9. Legacy instapack behavior: Check whether the file exists when imported relative to node_modules as CSS file. If yes, use this file. For example: /node_modules/@ryan/something.css

10. Custom instapack behavior: Check whether package.json exists in the imported node_modules package folder. If yes, try to parse the sass and style fields. Disable this behavior when the import ends with .scss extension. For example: /node_modules/@ryan/something/package.json

    • If sass field exists and the file actually exists (when resolved relative to the package.json), use this file.

    • Else, if the style field exists and the file actually exists (when resolved relative to the package.json), use this file instead.

11. If no result so far, then the imported file is not found. Should probably throw an error.

EDIT: Partial import from node_modules (8) will be disabled to prevent questionable / janky AF resolution. Explicit is good in this one case...

EDIT 2: node_modules imports are evaluated after normal imports to prevent unwanted behaviors unlike the default Sass behaviors.

ERROR during CSS build:
TypeError: value.split is not a function
    at track (F:\VS\instapack\node_modules\clean-css\lib\writer\source-maps.js:32:21)
    at store (F:\VS\instapack\node_modules\clean-css\lib\writer\source-maps.js:20:3)
    at value (F:\VS\instapack\node_modules\clean-css\lib\writer\helpers.js:117:7)
    at property (F:\VS\instapack\node_modules\clean-css\lib\writer\helpers.js:102:7)
    at body (F:\VS\instapack\node_modules\clean-css\lib\writer\helpers.js:62:5)
    at all (F:\VS\instapack\node_modules\clean-css\lib\writer\helpers.js:212:9)
    at serializeStylesAndSourceMap (F:\VS\instapack\node_modules\clean-css\lib\writer\source-maps.js:94:3)
    at F:\VS\instapack\node_modules\clean-css\lib\clean.js:105:29
    at Object.callback (F:\VS\instapack\node_modules\clean-css\lib\reader\read-sources.js:26:64)
    at doLoadOriginalSources (F:\VS\instapack\node_modules\clean-css\lib\reader\load-original-sources.js:67:22)

Fix: pin version 2.10.1

https://www.npmjs.com/package/which

Instead of calling OS which command which may fail on non-standard UNIX OS...

According to https://www.typescriptlang.org/docs/handbook/modules.html, A file that has a single export class or export function is a bad design / red flag.

Therefore, consider making the top-level import into:

import instapack = require('instapack');

Instead of:

import { instapack } from 'instapack';

While this issue also affects a number of imports for internal classes, changing them may alter code structure and will not be done.