Support RTL variants of entries

[javiereguiluz]

This is the same as #967, which was closed without fixing it.

I'm using https://www.npmjs.com/package/@automattic/webpack-rtl-plugin and for each generated CSS file (foo.css) I have a another CSS file generated automatically with the RTL styles (foo.rtl.css).

I have two problems:

(1) In manifest.json, each entry links only to the RTL file:

  "bundles/easyadmin/app.css": "./app.rtl.css",

(2) In entrypoints.js, each entry links to the two files. Shouldn't be two different entries?

{
  "entrypoints": {
    "app": {
      "css": [
        "./app.css",
        "./app.rtl.css"
      ],
      "js": [
        "./app.js"
      ]
    },
  }
}

Thanks!

[weaverryan]

The current situation doesn't seem right... but is probably quite hard to fix: the manifest.json and entrypoints.json themselves are already generated via hooks into Webpack, which are oddly complex to get correct. And now another plugin is tweaking with the generating files.

(1) In manifest.json, each entry links only to the RTL file:

Probably there should be 2 separate items here.

(2) In entrypoints.js, each entry links to the two files. Shouldn't be two different entries?

I don't agree. You only have 1 Webpack entry (app). I'd say that the proper behavior would be... I don't know... for app.rtl.css to not appear at all in this file?

[stof]

I don't agree. You only have 1 Webpack entry (app). I'd say that the proper behavior would be... I don't know... for app.rtl.css to not appear at all in this file?

Well, if you expect to load the RTL stylesheet different than the non-RTL one (which is probably the only reason why it exists), you would need to have it separate, to configure the loading.

[javiereguiluz]

@stof is right ... the loading of the RTL asset is always conditional because it makes the page render the contents aligned to the right, which is only correct for a few specific locales (ar, fa or he).

[weaverryan]

So the question is: what would you expect the entrypoints.json and manifest.json to look like? I mentioned that there should only be 1 Webpack entry simply due to the technical reality that you are only actually configuring 1 entry inside of Webpack... so it seems weird that we would try to make multiple show up in entrypoints.json.

[javiereguiluz]

These are the contents that I expect on those files:

manifest.json:

"bundles/easyadmin/app.css": "./app.css",
"bundles/easyadmin/app.rtl.css": "./app.rtl.css",

entrypoints.js

{
  "entrypoints": {
    "app": {
      "css": [
        "./app.css",
      ],
      "js": [
        "./app.js"
      ]
    },
    "app.rtl": {
      "css": [
        "./app.rtl.css"
      ],
      "js": [
      ]
    },
  }
}

I understand that this would be a totally custom behavior based on exceptional use case of having entries whose names match the pattern <the-entry-name>.rtl.(css|js)

I'm not sure it's worth it ... but I don't know how to solve it otherwise. Can anyone think of an alternative solution? Thanks!

[javiereguiluz]

Let's close this because Webpack Encore is the past and we won't add big new features to it. Thanks!

[kevinpapst]

Too bad, that is exactly what I am looking for. So there is no real fix I assume...

[javiereguiluz]

There's a solution ... but it takes some effort. This is what I'm going to do in my own CSS: keep only 1 CSS and not generate RTL variants, but:

• Replace margin and padding by margin-inline/margin-block and padding-inline/padding-block (see https://developer.mozilla.org/en-US/docs/Web/CSS/margin-inline, https://developer.mozilla.org/en-US/docs/Web/CSS/padding-block, etc.)
• Replace text-align: left/right by text-align: start/end, etc.
• For edge cases, use [dir="rtl"] .some-selector { ... }

[kevinpapst]

Thanks for sharing @javiereguiluz 👍 I have checked your script linked above as well.

Being lazy, I was hoping to be able to use an existing Webpack RTL plugin, but all I tried are causing these duplicate entries.

I can't roll my own CSS, as I am using a bootstrap based theme But thanks for the links, I didn't know about the first ones. I'll pass the ideas upstream.