add SASS/SCSS support

package.json

@@ -44,6 +44,7 @@
     "lodash": "^4.17.21"
   },
   "devDependencies": {
+    "@csstools/postcss-sass": "5.0.1",
     "@rollup/plugin-typescript": "11.1.5",
     "@storybook/addon-essentials": "7.6.1",
     "@storybook/addon-interactions": "7.5.3",
@@ -79,6 +80,7 @@
     "lint-staged": "15.1.0",
     "npm-run-all": "4.1.5",
     "postcss-preset-env": "9.3.0",
+    "postcss-scss": "4.0.9",
     "prettier": "2.8.7",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -89,6 +91,7 @@
     "rollup-plugin-dts": "^6.1.0",
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-postcss": "4.0.2",
+    "sass": "1.69.5",
     "storybook": "7.5.3",
     "stylelint": "15.11.0",
     "stylelint-config-standard": "34.0.0",
@@ -132,5 +135,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "pnpm": {
+    "overrides": {
+      "source-map@^0.7.0": "0.7.4"
+    }
   }
 }

rollup.config.cjs

@@ -4,6 +4,8 @@ const postcssPresetEnv = require("postcss-preset-env");
 const typescript = require("@rollup/plugin-typescript");
 const external = require("@yelo/rollup-node-external");
 const { dts } = require("rollup-plugin-dts");
+const postcssSass = require('@csstools/postcss-sass');
+const postcssSassSyntax = require('postcss-scss');
 
 module.exports = [
   {
@@ -29,7 +31,9 @@ module.exports = [
         extract: "style.css",
         inline: false,
         modules: true,
+        syntax: postcssSassSyntax,
         plugins: [
+          postcssSass(),
           postcssPresetEnv({
             browsers: [">0.2%", "not dead", "not op_mini all"],
             stage: 3,

src/lib/Counter/Counter.tsx

@@ -3,7 +3,7 @@ import React, {useEffect} from 'react';
 import {throttle} from 'lodash';
 
 import useLogic from './useLogic';
-import classes from './Counter.module.css';
+import classes from './Counter.module.scss';
 
 export type Props = {
   /** Set initial value */

src/types.d.ts

@@ -1 +1,6 @@
 declare module '*.module.css';
+
+declare module '*.scss' {
+  const content: Record<string, string>;
+  export default content;
+}