STCOM-1283 remove postcss-plugins as per STRWEB 111 (#2270)

* remove nesting, css-custom-properties, calc, media minmax from webpack configuration * remove unnecessary postcss dependencies form package.json * remove css-variable imports from component css files. * include css variables in test harness
folio-org · Apr 22, 2024 · 4b25bb9 · 4b25bb9
1 parent b80d102
commit 4b25bb9
Show file tree

Hide file tree

Showing 79 changed files with 81 additions and 85 deletions.
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,9 +1,9 @@
 import React, { Component, Fragment } from 'react';
-import { IntlProvider } from 'react-intl';
 import pkg from '../package.json';
 import { themes } from '@storybook/theming';
 import IntlWrap from './IntlWrap';
 import '../lib/global.css';
+import '../lib/variables.css';
 
 /**
  * React intl support

diff --git a/.storybook/stcom-webpack.config.js b/.storybook/stcom-webpack.config.js
@@ -38,12 +38,15 @@ module.exports = async (config) => {
         options: {
           postcssOptions: {
             plugins: [
+              // postcssGlobalData to import custom media queries so that those can be successfully resolve
+              require('@csstools/postcss-global-data')({
+                files: [
+                  path.resolve(__dirname , '../lib/variables.css')
+                ]
+              }),
               require('postcss-import'),
               require('autoprefixer'),
-              require('postcss-custom-properties')({ preserve: false, importFrom: './lib/variables.css', disableDeprecationNotice: true }),
-              require('postcss-nesting'),
               require('postcss-custom-media'),
-              require('postcss-media-minmax'),
               require('@csstools/postcss-relative-color-syntax'),
             ],
           },

diff --git a/lib/Accordion/Accordion.css b/lib/Accordion/Accordion.css
@@ -1,4 +1,3 @@
-@import '../variables.css';
 
 .accordion {
   width: 100%;

diff --git a/lib/AdvancedSearch/components/AdvancedSearchRow/AdvancedSearchRow.css b/lib/AdvancedSearch/components/AdvancedSearchRow/AdvancedSearchRow.css
@@ -1,4 +1,3 @@
-@import '../../../variables.css';
 
 .AdvancedSearchRow {
   display: block;

diff --git a/lib/AutoSuggest/AutoSuggest.css b/lib/AutoSuggest/AutoSuggest.css
@@ -1,4 +1,3 @@
-@import '../variables.css';
 
 .autoSuggest {
   position: relative;

diff --git a/lib/Avatar/Avatar.css b/lib/Avatar/Avatar.css
@@ -2,7 +2,7 @@
  * Avatar
  */
 
-@import "../variables";
+
 
 .avatar {
   background-color: var(--color-fill);

diff --git a/lib/Badge/Badge.css b/lib/Badge/Badge.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .badge {
   border-radius: 999px;

diff --git a/lib/Button/Button.css b/lib/Button/Button.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 /**
 * Default styling

diff --git a/lib/ButtonGroup/ButtonGroup.css b/lib/ButtonGroup/ButtonGroup.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .buttonGroup {
   display: inline-flex;

diff --git a/lib/Callout/Callout.css b/lib/Callout/Callout.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .callout {
   position: fixed;

diff --git a/lib/Card/Card.css b/lib/Card/Card.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .card {
   width: 100%;

diff --git a/lib/Card/headers/DefaultCardHeader.css b/lib/Card/headers/DefaultCardHeader.css
@@ -1,4 +1,4 @@
-@import '../../variables.css';
+
 
 .header {
   background-color: var(--bg-hover);

diff --git a/lib/Checkbox/Checkbox.css b/lib/Checkbox/Checkbox.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 /* stylelint-disable no-descending-specificity */
 
 :root {

diff --git a/lib/ConflictDetectionBanner/ConflictDetectionBanner.css b/lib/ConflictDetectionBanner/ConflictDetectionBanner.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .container {
   margin-bottom: 10px;

diff --git a/lib/Datepicker/Calendar.css b/lib/Datepicker/Calendar.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .container {
   position: relative;

diff --git a/lib/Dropdown/Dropdown.css b/lib/Dropdown/Dropdown.css
@@ -1,4 +1,4 @@
-@import "../variables.css";
+
 
 .show {
   display: block;

diff --git a/lib/DropdownMenu/DropdownLayout.css b/lib/DropdownMenu/DropdownLayout.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .dropdownHeader {
   padding: 0 1rem;

diff --git a/lib/DropdownMenu/DropdownMenu.css b/lib/DropdownMenu/DropdownMenu.css
@@ -1,4 +1,4 @@
-@import "../variables.css";
+
 
 .DropdownMenu {
   top: 100%;

diff --git a/lib/Editor/Editor.css b/lib/Editor/Editor.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .editor {
   position: relative;

diff --git a/lib/EmptyMessage/EmptyMessage.css b/lib/EmptyMessage/EmptyMessage.css
@@ -2,7 +2,7 @@
  * <EmptyMessage />
  */
 
-@import "../variables";
+
 
 .emptyMessage {
   font-size: var(--font-size-medium);

diff --git a/lib/FilterControlGroup/FilterControlGroup.css b/lib/FilterControlGroup/FilterControlGroup.css
@@ -1,4 +1,4 @@
-@import "../variables";
+
 
 .filterList {
   margin: 0;

diff --git a/lib/FilterPaneSearch/FilterPaneSearch.css b/lib/FilterPaneSearch/FilterPaneSearch.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .headerSearchContainer {
   width: 100%;

diff --git a/lib/FocusLink/FocusLink.css b/lib/FocusLink/FocusLink.css
@@ -1,7 +1,7 @@
 /**
  * FocusLink
  */
-@import "../variables.css";
+
 
 .focusLink {
   outline: 0;

diff --git a/lib/FocusLink/stories/FocusLinkExample.css b/lib/FocusLink/stories/FocusLinkExample.css
@@ -2,7 +2,7 @@
  * FocusLink example css
  */
 
-@import "../../variables.css";
+
 
 .skippableArea {
   border: 1px solid var(--color-border-p2);

diff --git a/lib/Headline/Headline.css b/lib/Headline/Headline.css
@@ -2,7 +2,7 @@
  * Component: Headline
  */
 
-@import '../variables';
+
 
 /**
  * Root styling

diff --git a/lib/Highlighter/Highlighter.css b/lib/Highlighter/Highlighter.css
@@ -2,7 +2,7 @@
  * Highlighter
  */
 
-@import '../variables.css';
+
 
 .mark {
   background-color: var(--highlighter-fill);

diff --git a/lib/Icon/DotSpinner.css b/lib/Icon/DotSpinner.css
@@ -1,4 +1,4 @@
-@import "../variables";
+
 
 .spinner {
   display: flex;

diff --git a/lib/Icon/Icon.css b/lib/Icon/Icon.css
@@ -1,4 +1,4 @@
-@import "../variables";
+
 
 .icon {
   display: inline-flex;

diff --git a/lib/Icon/stories/style.css b/lib/Icon/stories/style.css
@@ -1,4 +1,4 @@
-@import '../../variables';
+
 
 .iconGrid {
   padding: 0;

diff --git a/lib/IconButton/IconButton.css b/lib/IconButton/IconButton.css
@@ -2,7 +2,7 @@
  * Pane Menu Icon
  */
 
-@import '../variables';
+
 
 .iconButton {
   composes: interactionStylesControl from "../sharedStyles/interactionStyles.css";

diff --git a/lib/InfoPopover/InfoPopover.css b/lib/InfoPopover/InfoPopover.css
@@ -2,7 +2,7 @@
  * InfoPopover
  */
 
-@import "../variables";
+
 
 .root {
   max-width: 300px;

diff --git a/lib/KeyValue/KeyValue.css b/lib/KeyValue/KeyValue.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .kvLabel {
   display: block;

diff --git a/lib/Label/Label.css b/lib/Label/Label.css
@@ -2,7 +2,7 @@
  * Label
  */
 
-@import "../variables";
+
 
 .label {
   display: flex;

diff --git a/lib/Label/components/Asterisk/Asterisk.css b/lib/Label/components/Asterisk/Asterisk.css
@@ -2,7 +2,7 @@
  * Asterisk
  */
 
-@import "../../../variables";
+
 
 .asterisk {
   color: var(--error);

diff --git a/lib/Layout/Layout.css b/lib/Layout/Layout.css
@@ -1,4 +1,4 @@
-@import "../variables";
+
 @import "./styles/padding";
 @import "./styles/margin";
 @import "./styles/flexbox";

diff --git a/lib/Layout/styles/width.css b/lib/Layout/styles/width.css
@@ -2,7 +2,7 @@
  * Sizing
  */
 
-@import "../../variables";
+
 
 .full {
   width: 100%;

diff --git a/lib/LayoutBox/LayoutBox.css b/lib/LayoutBox/LayoutBox.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .sectionBox {
   width: 100%;

diff --git a/lib/LayoutGrid/stories/LayoutGridExample.css b/lib/LayoutGrid/stories/LayoutGridExample.css
@@ -2,7 +2,7 @@
  * LayoutGrid example CSS
  */
 
-@import "../../variables";
+
 
 .headline:not(:first-child) {
   margin-top: 30px;

diff --git a/lib/LayoutHeader/LayoutHeader.css b/lib/LayoutHeader/LayoutHeader.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .sectionHeader {
   background-color: var(--bg-hover);

diff --git a/lib/List/List.css b/lib/List/List.css
@@ -1,4 +1,4 @@
-@import "../variables";
+
 
 .list {
   margin-bottom: 1rem;

diff --git a/lib/MenuSection/MenuSection.css b/lib/MenuSection/MenuSection.css
@@ -2,7 +2,7 @@
  * MenuSection Section
  */
 
-@import '../variables.css';
+
 
 /**
  * Apply margin on stacked menu sections

diff --git a/lib/MessageBanner/MessageBanner.module.css b/lib/MessageBanner/MessageBanner.module.css
@@ -2,7 +2,7 @@
  * MessageBanner
  */
 
-@import '../variables.css';
+
 
 :root {
   --message-banner-font-size: var(--font-size-medium);

diff --git a/lib/MetaSection/MetaSection.css b/lib/MetaSection/MetaSection.css
@@ -1,4 +1,4 @@
-@import '../variables';
+
 
 .metaSectionRoot {
   border-radius: var(--radius);

diff --git a/lib/Modal/Modal.css b/lib/Modal/Modal.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .modalRoot {
   position: absolute;

diff --git a/lib/ModalFooter/ModalFooter.css b/lib/ModalFooter/ModalFooter.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .modalFooterButtons {
   align-items: center;

diff --git a/lib/MultiColumnList/MCLRenderer.css b/lib/MultiColumnList/MCLRenderer.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 /* stylelint-disable no-descending-specificity */
 

diff --git a/lib/MultiSelection/MultiSelect.css b/lib/MultiSelection/MultiSelect.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .multiSelectContainer {
   width: 100%;

diff --git a/lib/NavListItem/NavListItem.css b/lib/NavListItem/NavListItem.css
@@ -2,7 +2,7 @@
  * NavListItem
  */
 
-@import '../variables.css';
+
 
 .NavListItem {
   composes: interactionStyles hasDot focusDotPositionStart from "../sharedStyles/interactionStyles.css";

diff --git a/lib/NavListSection/NavListSection.css b/lib/NavListSection/NavListSection.css
@@ -1,4 +1,4 @@
-@import "../variables";
+
 
 .header {
   padding: 0 var(--gutter-static-two-thirds);

diff --git a/lib/Pane/Pane.css b/lib/Pane/Pane.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .pane {
   background: var(--bg);

diff --git a/lib/PaneBackLink/PaneBackLink.css b/lib/PaneBackLink/PaneBackLink.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .paneBackLink {
   @media (--medium-up) {

diff --git a/lib/PaneCloseLink/PaneCloseLink.css b/lib/PaneCloseLink/PaneCloseLink.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .paneCloseLinkArrow,
 .paneCloseLinkX {

diff --git a/lib/PaneFooter/DefaultPaneFooter.css b/lib/PaneFooter/DefaultPaneFooter.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .paneFooterContent {
   max-width: var(--container-max-width);

diff --git a/lib/PaneFooter/PaneFooter.css b/lib/PaneFooter/PaneFooter.css
@@ -1,4 +1,4 @@
-@import '../variables.css';
+
 
 .paneFooter {
   display: flex;

diff --git a/lib/PaneHeader/PaneHeader.css b/lib/PaneHeader/PaneHeader.css
@@ -1,4 +1,4 @@
-@import "../variables";
+
 
 .paneHeader {
   width: 100%;

diff --git a/lib/PaneHeaderIconButton/PaneHeaderIconButton.css b/lib/PaneHeaderIconButton/PaneHeaderIconButton.css
@@ -2,7 +2,7 @@
  * PaneHeaderIconButton
  */
 
-@import "../variables";
+
 
 .PaneHeaderIconButton {
   /* min-width: var(--control-min-size-touch); */