refactor(ui): switch css to scss

.prettierignore

@@ -36,3 +36,5 @@ generated/
 *.min.json
 *.min.js
 *.min.css
+*.scss
+*.sass

.stylelintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["stylelint-config-standard-scss", "stylelint-config-property-sort-order-smacss"]
+}

.vscode/extensions.json

@@ -5,6 +5,7 @@
     "dbaeumer.vscode-eslint",
     "yoavbls.pretty-ts-errors",
     "orta.vscode-jest",
-    "github.vscode-github-actions"
+    "github.vscode-github-actions",
+    "stylelint.vscode-stylelint"
   ]
 }

.vscode/settings.json

@@ -21,7 +21,8 @@
   "editor.codeActionsOnSave": {
     "source.addMissingImports": true,
     "source.organizeImports": true,
-    "source.fixAll.eslint": true
+    "source.fixAll.eslint": true,
+    "source.fixAll.stylelint": true
   },
   "[markdown]": {
     "editor.fontSize": 14,
@@ -35,5 +36,14 @@
       "other": "on"
     },
     "editor.minimap.enabled": true
+  },
+  "css.validate": false,
+  "less.validate": false,
+  "scss.validate": false,
+  "stylelint.enable": true,
+  "stylelint.stylelintPath": "./node_modules/stylelint",
+  "stylelint.validate": ["scss"],
+  "[scss]": {
+    "editor.defaultFormatter": "stylelint.vscode-stylelint"
   }
 }

package.json

@@ -12,7 +12,7 @@
     "build": "turbo build",
     "clear-cache": "rm -rf packages/*/.turbo && rm -rf packages/*/.next && jest --clearCache",
     "dev": "turbo run build && turbo run dev --no-deps --no-cache --parallel --concurrency 20",
-    "format": "pnpm lint-fix && pnpm prettier-fix",
+    "format": "pnpm lint-fix && pnpm prettier-fix && pnpm stylelint-fix",
     "hooks:pre-commit": "pnpm lint-staged",
     "hooks:pre-push": "pnpm run quality-checks",
     "postinstall": "pnpm lint-staged || echo 'postinstall failed'",
@@ -25,6 +25,8 @@
     "preview": "pnpm build && npx -y http-server ./packages/examples/react/dist",
     "publint": "turbo publint-check",
     "quality-checks": "pnpm prettier-check && pnpm type-check && pnpm lint && pnpm build && pnpm publint && pnpm test:ci",
+    "stylelint-check": "stylelint \"./packages/**/*.scss\" -f verbose --color",
+    "stylelint-fix": "stylelint \"./packages/**/*.scss\" --fix",
     "test": "jest",
     "test:ci": "jest --ci --coverage",
     "test:coverage": "jest --coverage",
@@ -42,8 +44,11 @@
     "*.{js,cjs,mjs,jsx,ts,cts,mts,tsx}": [
       "prettier --ignore-unknown --write"
     ],
-    "*.{json,yml,yaml,css,scss,sass,less,md,mdx}": [
+    "*.{json,yml,yaml,css,md,mdx}": [
       "prettier --ignore-unknown --write"
+    ],
+    "*.{scss,sass}": [
+      "stylelint --fix"
     ]
   },
   "prettier": "@r1stack/coding-style/prettier",
@@ -65,11 +70,19 @@
     "lint-staged": "^14.0.1",
     "prettier": "^3.0.3",
     "semver": "^7.5.4",
+    "stylelint": "^15.10.3",
+    "stylelint-config-property-sort-order-smacss": "^9.1.0",
+    "stylelint-config-standard-scss": "^11.0.0",
     "turbo": "^1.10.13",
     "typescript": "^5.2.2"
   },
   "packageManager": "[email protected]",
   "engines": {
     "node": ">=18.5.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "esbuild": "0.19.2"
+    }
   }
 }

packages/storylite/package.json

@@ -37,9 +37,11 @@
     "@types/node": "^20.6.0",
     "@types/react": "^18.2.21",
     "@types/react-dom": "^18.2.7",
+    "esbuild-sass-plugin": "^2.15.0",
     "publint": "^0.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass": "^1.67.0",
     "tsup": "^7.2.0",
     "typescript": "^5.2.2"
   },

packages/storylite/src/scss/config/_color.scss

@@ -0,0 +1,60 @@
+@use 'sass:map';
+
+$colors: () !default;
+$colors: map.merge(
+  (
+    'light': (
+      /* General */
+      'font-color': #333,
+      'bg-color': #fcfcfc,
+
+      'border-color': #d2d2d2,
+      'color-primary': #1fa7fd,
+
+      'font-color-title': inherit,
+      'bg-color-title': transparent,
+
+      /* Muted */
+      'font-color-muted': rgb(0 0 0 / 60%),
+      'border-color-muted': #e6e6e6,
+
+      /* Panels */
+      'font-color-panel': #444,
+      'bg-color-panel': #f7f9fc,
+
+      /* Toolbars */
+      'font-color-toolbar': #999,
+      'bg-color-toolbar': #fff,
+
+      'grid-line-color': rgb(130 130 130 / 50%),
+      'grid-line-color2': rgb(130 130 130 / 25%),
+    ),
+    'dark': (
+      /* General */
+      'font-color': #dfdfd7,
+      'bg-color': #252529,
+
+      'border-color': #29292c,
+      'color-primary': #1fa7fd,
+
+      'font-color-title': inherit,
+      'bg-color-title': transparent,
+
+      /* Muted */
+      'font-color-muted': #999,
+      'border-color-muted': #484848,
+
+      /* Panels */
+      'font-color-panel': #dfdfd7,
+      'bg-color-panel': #161618,
+
+      /* Toolbars */
+      'font-color-toolbar': #999,
+      'bg-color-toolbar': #1e1e20,
+
+      'grid-line-color': rgb(130 130 130 / 35%),
+      'grid-line-color2': rgb(130 130 130 / 17.5%),
+    ),
+  ),
+  $colors
+);

packages/storylite/src/scss/config/_index.scss

@@ -0,0 +1,2 @@
+@forward 'color';
+@forward 'setting';

packages/storylite/src/scss/config/_setting.scss

@@ -0,0 +1,14 @@
+@use 'sass:map';
+
+$settings: () !default;
+$settings: map.merge(
+  (
+    'themes': ['light', 'dark'],
+    'property-prefix': 'storylite',
+    'custom-properties': true,
+    'modules': (
+      'reset': true,
+    )
+  ),
+  $settings
+);

packages/storylite/src/scss/element/_index.scss

@@ -0,0 +1 @@
+@forward 'reset';

packages/storylite/src/scss/element/_reset.scss

@@ -0,0 +1,5 @@
+@mixin generate-reset {
+  :root {
+    --some-storylite-var: 1rem;
+  }
+}

packages/storylite/src/scss/function/_color.scss

@@ -0,0 +1,20 @@
+@use 'sass:string';
+@use '../config' as *;
+@use 'map-deep-get' as *;
+@use 'config' as *;
+
+@function color(
+  $key,
+  $theme: 'light',
+  $map: $colors,
+) {
+  @if not map-has-key($map, $theme, $key) {
+    @error 'The key `#{$key}` is not associated with map `#{$map}`.';
+  }
+
+  $themes: config($settings, 'themes');
+  $prefix: '#{config($settings, 'property-prefix')}-';
+  $color-var: string.unquote('var(--#{$prefix}color-#{$key})');
+
+  @return $color-var;
+}

packages/storylite/src/scss/function/_config.scss

@@ -0,0 +1,13 @@
+@use 'sass:map';
+
+@function config($map, $key, $property: null) {
+  @if not map-has-key($map, $key) {
+    @error 'The key `#{$key}` is not associated with map `#{$map}`.';
+  }
+
+  @if not $property {
+    @return map.get($map, $key);
+  }
+
+  @return var(--#{key});
+}

packages/storylite/src/scss/function/_index.scss

@@ -0,0 +1,3 @@
+@forward 'config';
+@forward 'color';
+@forward 'map-deep-get';

packages/storylite/src/scss/function/_map-deep-get.scss

@@ -0,0 +1,19 @@
+@use 'sass:map';
+
+/// Map deep get.
+/// https://www.sitepoint.com/warnings-and-errors-in-sass/
+/// @param {Map} $map - The map.
+/// @param {Arglist} $keys - The key chain.
+/// @return {*} - The desired value.
+@function map-deep-get($map, $keys...) {
+  @each $key in $keys {
+    $map: map.get($map, $key);
+
+    // If `$map` does not contain the next key, return `null`
+    @if type-of($map) == 'null' {
+      @return $map;
+    }
+  }
+
+  @return $map;
+}

packages/storylite/src/scss/mixin/_color.scss

@@ -0,0 +1,37 @@
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:string';
+@use '../function' as *;
+@use '../config' as *;
+
+/// Generate custom color properties.
+/// @param {map} $colors - The colors map.
+/// @param {string} $selector - The selector.
+/// @return {string} - The generated custom color properties.
+@mixin generate-color-properties(
+    $colors: $colors,
+    $selector: ':root'
+  ) {
+  $themes: config($settings, 'themes');
+  $prefix: '#{config($settings, 'property-prefix')}-';
+
+  @each $theme, $color in $colors {
+    @if type-of($color) == 'map' {
+      @if list.index($themes, $theme) {
+        @media (prefers-color-scheme: #{$theme}) {
+          #{$selector} {
+            color-scheme: #{$theme};
+
+            @each $key, $subcolor in $color {
+              @if $subcolor {
+                --#{$prefix}color-#{$key}: #{$subcolor};
+              }
+            }
+          }
+        }
+      }
+    } @else if type-of($color) == 'color' {
+      --#{$color-prefix}color-#{$name}: $color;
+    }
+  }
+}

packages/storylite/src/scss/mixin/_index.scss

@@ -0,0 +1 @@
+@forward 'color';

packages/storylite/src/scss/mixin/_module.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@use 'color' as *;
+@use '../config' as *;
+@use '../element' as *;
+@use '../function' as *;
+
+@mixin generate-modules {
+  @if map-deep-get($settings, 'modules', 'reset') {
+    @include generate-reset;
+  }
+
+  @if map.get($settings, 'custom-properties') {
+    @include generate-color-properties;
+  }
+}

packages/storylite/src/scss/storylite.scss

@@ -0,0 +1,12 @@
+@forward 'config';
+@forward 'function';
+@forward 'mixin';
+@forward 'mixin/module';
+@forward 'element';
+
+// Still keep old styles for development
+// @import '../styles/index.css';
+
+:root {
+  --storylite-test: red;
+}

packages/storylite/src/scss/styles.scss

@@ -0,0 +1,8 @@
+@use 'storylite' as * with (
+  $settings: (
+    'css-custom-properties': true,
+  ),
+);
+
+// Generate all modules
+@include generate-modules;

packages/storylite/src/styles/index.css

@@ -1,4 +1,4 @@
-@import './variables.css';
+/* @import './variables.css'; */
 @import './dark.css';
 @import './base.css';
 @import './layouts.css';

packages/storylite/tsup.config.ts

@@ -1,3 +1,4 @@
+import { sassPlugin } from 'esbuild-sass-plugin'
 import { defineConfig } from 'tsup'
 
 export default defineConfig([
@@ -41,7 +42,7 @@ export default defineConfig([
   },
   {
     entry: {
-      index: './src/styles/index.css',
+      index: './src/scss/styles.scss',
     },
     outDir: './dist',
     format: ['esm'],
@@ -51,5 +52,6 @@ export default defineConfig([
     minify: false,
     skipNodeModulesBundle: true,
     external: ['node_modules'],
+    esbuildPlugins: [sassPlugin()],
   },
 ])