chore(css): remove rtl artifact builds (#11486)

### Description

Now that CSS logical properties are used throughout the project, there is no need for `rtl` artifacts to be built. This PR removes those builds. 

### Changelog

**New**

- {{new thing}}

**Changed**

- {{changed thing}}

**Removed**

- remove `rtl` builds and artifacts
- remove Storybook `rtl` documentation

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "test: e2e": Codesandbox examples and e2e integration tests -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/carbon-web-components/.storybook/preview.js

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -153,6 +153,10 @@ export const decorators = [
     const { hasMainTag } = result;
     const { theme } = context.globals;
 
+    if (process.env.STORYBOOK_USE_RTL === 'true') {
+      document.documentElement.setAttribute('dir', 'rtl');
+    }
+
     document.documentElement.setAttribute('storybook-carbon-theme', theme);
 
     return container({ hasMainTag, children: result });

packages/carbon-web-components/gulp-tasks/build/dist.js

@@ -31,9 +31,8 @@ function _getFolders(dir) {
  *
  * @param {object} [options] The build options.
  * @param {string} [options.mode=development] The build mode.
- * @param {string} [options.dir=ltr] The UI direction.
  */
-async function _buildComponents({ mode = 'development', dir = 'ltr' } = {}) {
+async function _buildComponents({ mode = 'development' } = {}) {
   if (!fs.existsSync(config.distDestDir)) {
     fs.mkdirSync(config.distDestDir);
   }
@@ -46,7 +45,7 @@ async function _buildComponents({ mode = 'development', dir = 'ltr' } = {}) {
     }
   }
 
-  return rollup(getRollupConfig({ mode, dir, folders }))
+  return rollup(getRollupConfig({ mode, folders }))
     .then((bundle) => {
       bundle.write({
         format: 'es',
@@ -63,7 +62,7 @@ async function _buildComponents({ mode = 'development', dir = 'ltr' } = {}) {
 /**
  * Defined scripts to return as gulp tasks
  *
- * @type {{ltr: object, rtl: object}}
+ * @type {{ltr: object}}
  * @private
  */
 const _scripts = {
@@ -75,26 +74,13 @@ const _scripts = {
       return _buildComponents({ mode: 'production' });
     },
   },
-  rtl: {
-    dev() {
-      return _buildComponents({ dir: 'rtl' });
-    },
-    prod() {
-      return _buildComponents({ mode: 'production', dir: 'rtl' });
-    },
-  },
 };
 
-// Gulp tasks (LTR)
+// Gulp tasks
 gulp.task('build:dist:ltr:dev', _scripts.ltr.dev);
 gulp.task('build:dist:ltr:prod', _scripts.ltr.prod);
 gulp.task('build:dist:ltr', gulp.series(gulp.task('build:dist:ltr:dev'), gulp.task('build:dist:ltr:prod')));
 
-// Gulp tasks (RTL)
-gulp.task('build:dist:rtl:dev', _scripts.rtl.dev);
-gulp.task('build:dist:rtl:prod', _scripts.rtl.prod);
-gulp.task('build:dist:rtl', gulp.series(gulp.task('build:dist:rtl:dev'), gulp.task('build:dist:rtl:prod')));
-
 // Build all components
-gulp.task('build:dist', gulp.series(gulp.series(gulp.task('build:dist:ltr:prod'), gulp.task('build:dist:rtl:prod'))));
-gulp.task('build:dist:dev', gulp.series(gulp.series(gulp.task('build:dist:ltr:dev'), gulp.task('build:dist:rtl:dev'))));
+gulp.task('build:dist', gulp.series(gulp.series(gulp.task('build:dist:ltr:prod'))));
+gulp.task('build:dist:dev', gulp.series(gulp.series(gulp.task('build:dist:ltr:dev'))));

packages/carbon-web-components/gulp-tasks/build/modules/css.js

@@ -16,7 +16,6 @@ const path = require('path');
 const postcss = require('gulp-postcss');
 const prettier = require('gulp-prettier');
 const replaceExtension = require('replace-ext');
-const rtlcss = require('rtlcss');
 const sass = require('gulp-sass')(require('sass'));
 const through2 = require('through2');
 const { promisify } = require('util');
@@ -33,11 +32,10 @@ const promisifyStream = promisify(asyncDone);
  *
  * @param {object} [options] The build options.
  * @param {string} [options.banner] License banner
- * @param {string} [options.dir] Reading direction
  * @returns {*} Gulp stream
  * @private
  */
-const buildModulesCSS = ({ banner, dir }) =>
+const buildModulesCSS = ({ banner }) =>
   gulp
     .src([`${config.srcDir}/**/*.scss`, `!${config.srcDir}/**/*-story.scss`])
     .pipe(
@@ -56,7 +54,6 @@ const buildModulesCSS = ({ banner, dir }) =>
       postcss([
         fixHostPseudo(),
         autoprefixer(),
-        ...(dir === 'rtl' ? [rtlcss] : []),
       ])
     )
     .pipe(cleanCSS())
@@ -67,8 +64,7 @@ const buildModulesCSS = ({ banner, dir }) =>
           export default css([${JSON.stringify(String(file.contents))}]);
         `);
         file.path = replaceExtension(
-          file.path,
-          dir === 'rtl' ? '.rtl.css.js' : '.css.js'
+          file.path, '.css.js'
         );
         done(null, file);
       })
@@ -89,7 +85,6 @@ async function css() {
   );
   await Promise.all([
     promisifyStream(() => buildModulesCSS({ banner })),
-    promisifyStream(() => buildModulesCSS({ banner, dir: 'rtl' })),
   ]);
 }
 

packages/carbon-web-components/gulp-tasks/build/modules/icons.js

@@ -13,13 +13,10 @@ const header = require('gulp-header');
 const path = require('path');
 const prettier = require('gulp-prettier');
 const through2 = require('through2');
-
 const { promisify } = require('util');
 const { readFile } = require('fs');
-
 const config = require('../../config');
 const createSVGResultFromCarbonIcon = require('../../../tools/svg-result-carbon-icon');
-
 const readFileAsync = promisify(readFile);
 const promisifyStream = promisify(asyncDone);
 

packages/carbon-web-components/package.json

@@ -190,7 +190,6 @@
     "resize-observer-polyfill": "^1.5.0",
     "rollup": "^2.55.1",
     "rollup-plugin-multi-input": "^1.3.1",
-    "rtlcss": "^3.0.0",
     "sass": "~1.70.0",
     "sass-loader": "^10.0.0",
     "strip-comments": "^1.0.0",

packages/styles/scss/components/in-page-banner/_in-page-banner.scss

@@ -54,12 +54,6 @@
         border-inline-start: 1px solid $layer-accent-01;
         grid-column: 9 / span 12;
         padding-inline: $spacing-05;
-
-        // Adjust the direction of the border line on RTL.
-        [dir='rtl'] & {
-          border-inline-end: 1px solid $layer-accent-01;
-          border-inline-start: inherit;
-        }
       }
     }
   }

packages/styles/scss/components/masthead/_masthead-search.scss

@@ -118,11 +118,6 @@
     inset-block-start: 0;
     inset-inline-end: 0;
 
-    /* stylelint-disable-next-line comment-whitespace-inside */
-    /* !rtl:raw:
-    left: 0;
-    */
-
     .#{$prefix}--header__search--search,
     .#{$prefix}--header__search--close {
       padding: 0;

packages/styles/scss/components/masthead/_masthead.scss

@@ -779,9 +779,6 @@
     z-index: 99999;
 
     background-color: $background;
-    /* !rtl:raw:
-    left: 0 !important;
-    */
 
     &:focus {
       outline: none;

packages/web-components/.storybook/main.js

@@ -13,12 +13,10 @@ const path = require('path');
 const sass = require('sass');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
-const rtlcss = require('rtlcss');
 const deepReplace = require('../../../tasks/deep-replace');
 const { getPaths } = deepReplace;
 
 const useStyleSourceMap = process.env.STORYBOOK_USE_STYLE_SOURCEMAP === 'true';
-const useRtl = process.env.STORYBOOK_USE_RTL === 'true';
 
 module.exports = {
   stories: ['../docs/*.mdx', '../src/**/*.stories.ts'],
@@ -222,9 +220,7 @@ module.exports = {
                 const autoPrefixer = require('autoprefixer')({
                   overrideBrowserslist: ['last 1 version', 'ie >= 11'],
                 });
-                return !useRtl
-                  ? [hostPseudo, autoPrefixer]
-                  : [rtlcss, hostPseudo, autoPrefixer];
+                return [hostPseudo, autoPrefixer];
               },
               sourceMap: useStyleSourceMap,
             },

packages/web-components/.storybook/preview.ts

@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2023
+ * Copyright IBM Corp. 2020, 2024
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -39,7 +39,6 @@ export const parameters = {
           'Building for IBM(dotcom)',
           'Carbon CDN style helpers',
           'Stable selectors',
-          'Enable right-to-left (RTL)',
           'Feature flags',
           'Contributing to the Web Components package',
           'Breaking Changes',

packages/web-components/.storybook/react/preview.tsx

@@ -17,10 +17,6 @@ import CDSSkipToContent from '../../src/internal/vendor/@carbon/web-components/c
 import { CURRENT_THEME } from '@carbon/storybook-addon-theme/es/shared';
 import containerStyles from './container.scss'; // eslint-disable-line import/first
 
-if (process.env.STORYBOOK_CARBON_CUSTOM_ELEMENTS_USE_RTL === 'true') {
-  document.documentElement.setAttribute('dir', 'rtl');
-}
-
 export const parameters = {
   layout: 'fullscreen',
   options: {
@@ -32,7 +28,6 @@ export const parameters = {
           'Building for IBM(dotcom)',
           'Carbon CDN style helpers',
           'Stable selectors',
-          'Enable right-to-left (RTL)',
           'Feature flags',
           'Contributing to the Web Components package',
           'Breaking Changes',

packages/web-components/gulp-tasks/build/components.js

@@ -35,23 +35,22 @@ function _getFolders(dir) {
  *
  * @param {object} [options] The build options.
  * @param {string} [options.mode=development] The build mode.
- * @param {string} [options.dir=ltr] The UI direction.
  */
-async function _buildComponents({ mode = 'development', dir = 'ltr' } = {}) {
+async function _buildComponents({ mode = 'development' } = {}) {
   let folders = _getFolders(`${config.srcDir}/components`);
 
   folders = folders.filter(item => {
     return item !== 'layout';
   });
 
-  return rollup(getRollupConfig({ mode, dir, folders }))
+  return rollup(getRollupConfig({ mode, folders }))
     .then(bundle => {
       bundle.write({
         format: 'es',
         dir: config.bundleDestDir,
         // FIXME: Figure out how to handle `process.env` without build toolstack
         banner: 'let process = { env: {} };',
-        chunkFileNames: `${dir === 'rtl' ? 'rtl/' : ''}[name].js`,
+        chunkFileNames: '[name].js',
       });
     })
     .catch(err => {
@@ -63,7 +62,7 @@ async function _buildComponents({ mode = 'development', dir = 'ltr' } = {}) {
 /**
  * Defined scripts to return as gulp tasks
  *
- * @type {{ltr: object, rtl: object}}
+ * @type {{ltr: object}}
  * @private
  */
 const _scripts = {
@@ -75,28 +74,15 @@ const _scripts = {
       return _buildComponents({ mode: 'production' });
     },
   },
-  rtl: {
-    dev() {
-      return _buildComponents({ dir: 'rtl' });
-    },
-    prod() {
-      return _buildComponents({ mode: 'production', dir: 'rtl' });
-    },
-  },
 };
 
-// Gulp tasks (LTR)
+// Gulp tasks
 gulp.task('build:components:ltr:dev', _scripts.ltr.dev);
 gulp.task('build:components:ltr:prod', _scripts.ltr.prod);
 gulp.task('build:components:ltr', gulp.series(gulp.task('build:components:ltr:dev'), gulp.task('build:components:ltr:prod')));
 
-// Gulp tasks (RTL)
-gulp.task('build:components:rtl:dev', _scripts.rtl.dev);
-gulp.task('build:components:rtl:prod', _scripts.rtl.prod);
-gulp.task('build:components:rtl', gulp.series(gulp.task('build:components:rtl:dev'), gulp.task('build:components:rtl:prod')));
-
 // Build all components
 gulp.task(
   'build:components',
-  gulp.series(gulp.task('vendor'), gulp.series(gulp.task('build:components:ltr:prod'), gulp.task('build:components:rtl:prod')))
+  gulp.series(gulp.task('vendor'), gulp.series(gulp.task('build:components:ltr:prod')))
 );