Update submodule & migrate from scss to css

Author: juzser

build/namespaced-classname.js

@@ -6,7 +6,7 @@ const SUBCOMPONENT_VARIATION_SELECTOR = /^\w+-\w+$/;
 const NESTED_COMPONENT_PATH_REGEX = /.*\/components\/(.*)\/components/;
 
 export function generateScopedName(name, filename) {
-  let componentName = basename(filename, '.module.scss').replace(/\.vue.*/, '');
+  let componentName = basename(filename, '.module.css').replace(/\.vue.*/, '');
   const nestedComponentMatch = NESTED_COMPONENT_PATH_REGEX.exec(filename);
 
   const polarisComponentName =

build/postcss-plugins.js

@@ -1,14 +1,31 @@
 import path from 'path';
 import postcssShopify from '@shopify/postcss-plugin';
+import postcssImport from 'postcss-import';
 import pxtorem from 'postcss-pxtorem';
 import postcssCustomMedia from 'postcss-custom-media';
 import postcssGlobalData from '@csstools/postcss-global-data';
+import postcssNesting from 'postcss-nesting';
+import postcssMixins from 'postcss-mixins';
+import postcssDiscardComments from 'postcss-discard-comments';
 
 const mediaQueriesCssPath = path.resolve(
   './node_modules/@shopify/polaris-tokens/dist/css/media-queries.css',
 );
 
 const postcssPlugins = [
+  postcssImport(),
+  postcssMixins({
+    mixinsDir: path.resolve('./polaris/polaris-react/postcss-mixins'),
+  }),
+  postcssNesting({
+    // The way native CSS nesting & SASS nesting behave with complex selectors
+    // differ; SASS expands out every selector into a comma separated list, but
+    // native CSS wraps the complex selectors in an `:is()` which can result in
+    // a different specificity. We favour the SASS convention here to ensure
+    // compatibility with our ported-in SASS styles.
+    // See: https://sass-lang.com/blog/sass-and-native-nesting/
+    noIsPseudoSelector: true,
+  }),
   postcssGlobalData({
     files: [mediaQueriesCssPath],
   }),
@@ -19,6 +36,7 @@ const postcssPlugins = [
     replace: true,
     propList: ['*'],
   }),
+  postcssDiscardComments(),
 ];
 
 export default postcssPlugins;

package.json

@@ -43,12 +43,12 @@
     "docs:assets": "cp -r docs/assets/** docs/dist/assets"
   },
   "dependencies": {
-    "@shopify/polaris-icons": "^8.7.0",
+    "@shopify/polaris-icons": "^8.9.0",
     "vite-svg-loader": "^5.1.0"
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "^2.1.1",
-    "@shopify/polaris-tokens": "^8.8.0",
+    "@shopify/polaris-tokens": "^8.9.0",
     "@shopify/postcss-plugin": "^5.0.2",
     "@types/node": "^20.10.4",
     "@vitejs/plugin-vue": "^5.0.2",
@@ -63,6 +63,10 @@
     "markdown-it": "^14.0.0",
     "path": "^0.12.7",
     "postcss-custom-media": "^10.0.2",
+    "postcss-discard-comments": "^6.0.2",
+    "postcss-import": "^16.1.0",
+    "postcss-mixins": "^10.0.0",
+    "postcss-nesting": "^12.1.0",
     "postcss-pxtorem": "^6.0.0",
     "pug": "^3.0.2",
     "sass": "^1.69.5",

polaris

@@ -146,7 +146,7 @@ import {
 } from '@/components';
 import TruncateText from '../TruncateText.vue';
 import type { ActionListItemDescriptor, VueNode } from '@/utilities/types';
-import styles from '@polaris/components/ActionList/ActionList.module.scss';
+import styles from '@polaris/components/ActionList/ActionList.module.css';
 
 type ItemProps = ActionListItemDescriptor;
 

src/components/ActionList/components/Item/Item.vue

@@ -27,7 +27,7 @@ import type {
   ActionListItemDescriptor,
 } from '@/utilities/types';
 import { Actions, RollupActions } from './components';
-import styles from '@polaris/components/ActionMenu/ActionMenu.module.scss';
+import styles from '@polaris/components/ActionMenu/ActionMenu.module.css';
 
 export interface ActionMenuProps {
   /** Collection of page-level secondary actions */

src/components/ActionMenu/ActionMenu.vue

@@ -40,7 +40,7 @@ import type {
 } from '@/utilities/types';
 import useI18n from '@/use/useI18n';
 import { classNames } from '@/utilities/css';
-import styles from '@polaris/components/ActionMenu/components/Actions/Actions.module.scss';
+import styles from '@polaris/components/ActionMenu/components/Actions/Actions.module.css';
 import { SecondaryAction, MenuGroup } from '../index';
 import { ActionsMeasurer } from './components/ActionMeasurer';
 import type { MenuGroupProps } from '../MenuGroup/MenuGroup.vue';

src/components/ActionMenu/components/Actions/Actions.vue

@@ -23,7 +23,7 @@ import { onMounted, ref } from 'vue';
 import useI18n from '@/use/useI18n';
 import type { MenuActionDescriptor, MenuGroupDescriptor } from '@/utilities/types';
 import { useEventListener } from '@/utilities/use-event-listener';
-import styles from '@polaris/components/ActionMenu/components/Actions/Actions.module.scss';
+import styles from '@polaris/components/ActionMenu/components/Actions/Actions.module.css';
 import type { SecondaryActionProps } from '../../../SecondaryAction/SecondaryAction.vue';
 import { SecondaryAction } from '../../../SecondaryAction';
 

src/components/ActionMenu/components/Actions/components/ActionMeasurer/ActionsMeasurer.vue

@@ -39,7 +39,7 @@ import type {
   ActionListItemDescriptor,
   ActionListSection,
 } from '@/utilities/types';
-import styles from '@polaris/components/ActionMenu/components/MenuGroup/MenuGroup.module.scss';
+import styles from '@polaris/components/ActionMenu/components/MenuGroup/MenuGroup.module.css';
 import { SecondaryAction } from '../SecondaryAction';
 
 export interface MenuGroupProps {

src/components/ActionMenu/components/MenuGroup/MenuGroup.vue

@@ -26,7 +26,7 @@ import { ref } from 'vue';
 import type { ActionListItemDescriptor, ActionListSection } from '@/utilities/types';
 import MenuHorizontalIcon from '@icons/MenuHorizontalIcon.svg';
 import useI18n from '@/use/useI18n';
-import styles from '@polaris/components/ActionMenu/components/RollupActions/RollupActions.module.scss';
+import styles from '@polaris/components/ActionMenu/components/RollupActions/RollupActions.module.css';
 
 interface RollupActionsProps {
   /** Accessibilty label */