vanilla-loader

vanilla-loader

Webpack loader for loading Vanilla Spec based packages.

What is Vanilla Spec?

Vanilla Spec is a dummy specification that I created for specifying a certain file struture of packages.

If a package contains optional files:

• js/index.js
• scss/index.scss

Then, we say the package is following Vanilla Spec.

For example:

dummy/
├── js
│   └── index.js
└── scss
    └── index.scss

Why Vanilla Spec?

Not everything is suitable for React, Vue, etc. In some situations, I would like to write web pages in old school way.

But old school way isn't convenient when importing packages. If a package contains stylesheets and javascripts, I have to import them separately like this:

import 'path/to/package1/dist/index.scss'
import 'path/to/package1/dist/index.js

import 'path/to/package2/dist/index.scss'
import 'path/to/package2/dist/index.js

And, there's another con of this way. The SCSS files of different packages can't share variables.

Solution

Given there's two packages following Vanilla Spec that I wanna import.

Create a file called vanilla.spec:

path/to/package1
path/to/package2

Vanilla-loader loads this file, checks the existence of sytlesheets and javascripts, tranforms it into contents in SCSS or ES2015:

// SCSS content
@import 'path/to/packages1/scss/index.scss';
@import 'path/to/packages2/scss/index.scss';

// ES2015 content
import 'path/to/packages1/js/index.js'
import 'path/to/packages2/js/index.js'

Then, use other Webpack loaders to load these contents.

Installation

npm install vanilla-loader

Usage

A possible Webpack configuration snippet:

module.exports = () => ({
  // ...
  module: {
    rules: [
      // ...
      {
        test: /vanilla\.spec$/,
        oneOf: [
          {
            resourceQuery: /scss/,
            use: [
              MiniCSSExtractPlugin.loader,
              'css-loader',
              {
                loader: 'postcss-loader',
                options: {
                  plugins: [autoprefixer()],
                },
              },
              {
                loader: 'sass-loader',
                options: {
                  implementation: sass,
                  sourceMap: true,
                  sourceMapContents: false,
                },
              },
              {
                loader: 'vanilla-loader',
                options: {
                  type: 'scss',
                },
              },
            ],
          },
          {
            resourceQuery: /js/,
            use: [
              {
                loader: 'babel-loader',
              },
              {
                loader: 'vanilla-loader',
                options: {
                  type: 'js',
                },
              },
            ],
          },
        ],
      },
    ],
  },
})

Import spec file in Webpack's entry:

import './vanilla.spec?scss'
import './vanilla.spec?js'

That's all.

Available Options

name	value type	values	description
type	string	'js' / 'scss'	specify the type of transformation
debug	boolean	true / false	toggle debug function

License

MIT © m31271n