romainberger / webpack-rtl-plugin

Webpack plugin to produce a rtl css bundle
MIT License
47 stars 33 forks source link

Request: Support for [name], [id] in options.filename #6

Open MohammadYounes opened 8 years ago

MohammadYounes commented 8 years ago

Hi,

When having multiple entry points, and you are required to export multiple bundles such as:

  entry: {
    'bundle1' : '../css/one.scss',
    'bundle2' : '../css/two.scss',
    'bundle3' : '../css/three.scss'
  }

The following will do:

  plugins: [
      new webpackRTLPlugin('[name].rtl.css')
  ]

But this won't work in case I wanted to disable or change minification options, for example:

  plugins: [
      new webpackRTLPlugin({
        filename:'[name].rtl.css',
        minify: false 
      })
  ]

Will produce [name].rtl.css instead of bundle1.rtl.css, bundle2.rtl.css and bundle3.rtl.css.

Thanks!

MohammadYounes commented 7 years ago

@romainberger Till this gets added, can you at least set minify option to be false by default ?

RemRyahirev commented 7 years ago

I have a PR #12 that can helps

MohammadYounes commented 7 years ago

Thanks @RemRyahirev, I ended up using a simpler approach with more control under webpack 2.

Adding the following to plugins list will process all .css to .rtl.css.

const path = require('path')
let options
function RTLCSSPlugin(opts) {
    options = opts || {}
}

RTLCSSPlugin.prototype.apply = function (compiler) {
    compiler.plugin('emit', function (compilation, callback) {
        // Explore each chunk (build output):
        compilation.chunks.forEach(function (chunk) {
            // Explore each asset filename generated by the chunk:
            chunk.files.forEach(function (filename) {
                // Get the asset source for each file generated by the chunk:
                if (path.extname(filename) === '.css') {
                    let source = compilation.assets[filename].source();
                    const rtlcss = require('rtlcss')
                    const rtl = rtlcss.process(compilation.assets[filename].source());
                    compilation.assets[`${path.basename(filename, '.css')}.rtl.css`] = {
                        source: function () {
                            return rtl
                        },
                        size: function () {
                            return rtl.length;
                        }
                    }
                }
            });
        });
        callback();
    });
};
module.exports = RTLCSSPlugin
sandrina-p commented 7 years ago

@MohammadYounes When do u call RTLCSSPlugin ?

MohammadYounes commented 7 years ago

@sandrina-p It's called with each build once it's added to the plugins list in webpack.config.js:

plugins: [
  new RTLCSSPlugin()
]

see webpack docs.