Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
MohammadYounes opened this issue Sep 28, 2016 · 5 comments
Open

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

MohammadYounes opened this issue Sep 28, 2016 · 5 comments

Comments

@MohammadYounes
Copy link

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 MohammadYounes changed the title Add support for [name], [id] in options.filename Request: Support for [name], [id] in options.filename Sep 29, 2016
@MohammadYounes
Copy link
Author

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

@RemRyahirev
Copy link

I have a PR #12 that can helps

@MohammadYounes
Copy link
Author

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
Copy link

@MohammadYounes When do u call RTLCSSPlugin ?

@MohammadYounes
Copy link
Author

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants