Add RTLCSS to wp-scripts

[swissspidy]

What problem does this address?

@wordpress/scripts does not output RTL stylesheets.

What is your proposed solution?

@wordpress/scripts should build RTL stylesheets out of the box.

[gziolo]

Yes, it would be a great addition. I'm surprised it isn't already integreated with the webpack config 😄

In Gutenberg, it isn't integrated with webpack. There is a separate PostCSS task:

https://github.com/WordPress/gutenberg/blob/b7f341628facdc4b5c46aaf9c8745039dc6aa774/bin/packages/build-worker.js#L124-L136

[swissspidy]

In my feature plugin I successfully use this webpack config:

const RtlCssPlugin = require( 'rtlcss-webpack-plugin' );
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );

module.exports = {
    ...defaultConfig,
    plugins: [
        ...defaultConfig.plugins,
        new RtlCssPlugin( {
            filename: `[name]-rtl.css`,
        } ),
    ],
};

Avoids having to pass everything through PostCSS.

[shivapoudel]

@gziolo Is there any way we can utilize PostCSS in extended webpack config for RtlCSS just like how @swissspidy has implemented?

Additionally, Its been more than 15 days, can you please push the updates for the npm packages :)

[gziolo]

@gziolo Is there any way we can utilize PostCSS in extended webpack config for RtlCSS just like how @swissspidy has implemented?

I have no idea personally. We use MiniCSSExtractPlugin (recommended in webpack 5) that is the replacement for ExtractTextPlugin that RtlCSSPlugin seems to be based on.

Additionally, Its been more than 15 days, can you please push the updates for the npm packages :)

I have just published to npm a new version of updated WordPress packages, including a new major version of @wordpress/scripts that is now on webpack 5.

[swissspidy]

RtlCSSPlugin works just fine with MiniCSSExtractPlugin. RtlCSSPlugin is not based on ExtractTextPlugin or anything.

[gziolo]

@swissspidy, I misread their description which is:

Webpack plugin to use in addition to extract-text-webpack-plugin to create a second css bundle, processed to be rtl.

Anyway, it would be great to finally integrate RLT support 👍🏻

[shivapoudel]

@gziolo Yeah it will be great to introduce RTL support for third-party plugin developer's to utilize core webpack config :)

[gziolo]

The same topic was raised today in the #core-editor chat on WordPress Slack (link requires registration at https://make.wordpress.org/chat):

https://wordpress.slack.com/archives/C02QB2JS7/p1699351456117429

Mahrokh started the thread with the following comment:

Hi, I just wanted to load RTL version of the CSS through block.json but couldn't success is it a bug or something else? I couldn't find any document on how it loads RTL version of CSS automatically, I was created a support ticket for this too: https://wordpress.org/support/topic/loading-rtl-css-on-frontend-block-development/ I see core blocks load RTL files correctly, But I don't know how it is possible to load RTLs using block.json Appreciate for any help.