Replace postcss to sass

.stylelintrc

@@ -1,10 +1,17 @@
 {
-  "extends": "stylelint-config-standard",
+  "extends": "stylelint-config-standard-scss",
   "rules": {
+    "selector-class-pattern": null,
     "selector-pseudo-element-colon-notation": "single",
     "custom-property-empty-line-before": null,
     "at-rule-empty-line-before": null,
-    "at-rule-no-unknown": [true, { "ignoreAtRules": ["mixin", "define-mixin"] }],
-    "value-keyword-case": ["lower", { "ignoreKeywords": ["BlinkMacSystemFont"] }]
+    "value-keyword-case": ["lower", { "ignoreKeywords": ["BlinkMacSystemFont"] }],
+    "keyframes-name-pattern": null,
+    "property-no-vendor-prefix": null,
+    "color-function-notation": "legacy",
+    "alpha-value-notation": "number",
+    "max-line-length": null,
+    "value-no-vendor-prefix": null,
+    "scss/dollar-variable-empty-line-before": null
   }
 }

Gemfile

@@ -13,8 +13,8 @@ gem "turbo-rails", "~> 1.0.0"
 # Install Stimulus on Rails
 gem "stimulus-rails", "~> 1.0.2"
 
-# Bundle and process CSS in Rails
-gem "cssbundling-rails", "~> 1.0.0"
+# Integrate Dart Sass with the asset pipeline in Rails
+gem "dartsass-rails", "~> 0.4.0"
 
 # Bundle and transpile JavaScript in Rails
 gem "jsbundling-rails", "~> 1.0.0"

Gemfile.lock

@@ -118,7 +118,7 @@ GEM
     crack (0.4.5)
       rexml
     crass (1.0.6)
-    cssbundling-rails (1.0.0)
+    dartsass-rails (0.4.0)
       railties (>= 6.0.0)
     debug (1.4.0)
       irb (>= 1.3.6)
@@ -326,8 +326,8 @@ DEPENDENCIES
   bullet (~> 7.0.0)
   capybara (~> 3.36.0)
   carrierwave (~> 2.2.0)
-  cssbundling-rails (~> 1.0.0)
   cuprite!
+  dartsass-rails (~> 0.4.0)
   debug
   httparty (~> 0.17.0)
   jbuilder (~> 2.11.5)

Procfile.dev

@@ -2,6 +2,6 @@ postgres: postgres
 redis: redis-server --dir .redis_data
 web: rails s -p 3000
 sidekiq: sidekiq
-css: yarn build:css --watch
+css: rails dartsass:watch
 js: yarn build --watch
 listen: rails listen_media_changes

app/assets/stylesheets/application.scss

@@ -0,0 +1,46 @@
+@use "settings/theme";
+
+@use "generic/normalize";
+@use "generic/reset";
+@use "generic/box_sizing";
+
+@use "elements/page";
+@use "elements/content";
+
+@use "objects/animations";
+@use "objects/grid";
+@use "objects/flex";
+@use "objects/container";
+
+@use "components/form";
+@use "components/logo";
+@use "components/button";
+@use "components/icon";
+@use "components/tab";
+@use "components/card";
+@use "components/loader";
+@use "components/input";
+@use "components/dropdown";
+@use "components/dialog";
+@use "components/overlay";
+@use "components/list";
+@use "components/avatar";
+@use "components/flash";
+@use "components/player";
+@use "components/sidebar";
+@use "components/nav";
+@use "components/action_bar";
+@use "components/table";
+@use "components/search";
+
+@use "utilities/display";
+@use "utilities/spacing";
+@use "utilities/sizing";
+@use "utilities/overflow";
+@use "utilities/position";
+@use "utilities/text";
+@use "utilities/border";
+@use "utilities/background";
+@use "utilities/image";
+@use "utilities/cursor";
+@use "utilities/visibility";

app/assets/stylesheets/components/_action_bar.scss

@@ -0,0 +1,7 @@
+@use "tools/functions" as *;
+
+.c-action-bar {
+  padding: spacing("narrow");
+  border-radius: border-radius("medium");
+  background: var(--action-bar-bg-color);
+}

app/assets/stylesheets/components/_button.scss

@@ -0,0 +1,40 @@
+@use "tools/functions" as *;
+
+.c-button {
+  text-align: center;
+  display: inline-block;
+  border-radius: border-radius("medium");
+  border: none;
+  padding: spacing("tiny") spacing("narrow");
+  color: var(--btn-color);
+  cursor: pointer;
+}
+
+.c-button:hover {
+  filter: brightness(0.9);
+}
+
+a.c-button:hover {
+  color: var(--btn-color);
+}
+
+.c-button--primary {
+  background: var(--btn-primary-bg-color);
+}
+
+.c-button--secondary {
+  background: var(--btn-secondary-bg-color);
+  color: var(--btn-secondary-color);
+}
+
+.c-button--small {
+  padding: spacing("tiny");
+}
+
+.c-button--full-width {
+  width: 100%;
+}
+
+.c-button[disabled] {
+  opacity: 0.6;
+}

app/assets/stylesheets/components/card.css → app/assets/stylesheets/components/_card.scss

@@ -1,3 +1,5 @@
+@use "tools/functions" as *;
+
 .c-card {
   width: 100%;
 }
@@ -8,27 +10,27 @@
 
 .c-card__image,
 .c-card__image img {
-  border-radius: var(--card-image-border-radius);
+  border-radius: border-radius("medium");
 }
 
 .c-card__body {
-  margin-top: var(--spacing-narrow);
+  margin-top: spacing("narrow");
 }
 
 .c-card--horizontal .c-card__body {
   margin-top: 0;
-  margin-left: var(--spacing-medium);
+  margin-left: spacing("medium");
   flex-grow: 1;
   width: 0;
 }
 
 .c-card__body__title {
-  margin-bottom: var(--spacing-narrow);
-  font-size: var(--font-size-large);
+  margin-bottom: spacing("narrow");
+  font-size: font-size("large");
 }
 
 .c-card__body__text {
-  margin-bottom: var(--spacing-tiny);
+  margin-bottom: spacing("tiny");
 }
 
 .c-card__body__text:last-child {

app/assets/stylesheets/components/_dialog.scss

@@ -0,0 +1,26 @@
+@use "tools/functions" as *;
+
+.c-dialog {
+  position: fixed;
+  top: 100px;
+  left: 0;
+  right: 0;
+  z-index: 1000;
+  background: var(--dialog-bg-color);
+  border-radius: border-radius("medium");
+}
+
+.c-dialog__header {
+  padding: spacing("narrow") spacing("small");
+  background: var(--dialog-header-bg-color);
+  color: var(--dialog-header-color);
+  border-top-left-radius: border-radius("medium");
+  border-top-right-radius: border-radius("medium");
+}
+
+.c-dialog__content {
+  padding: spacing("narrow") spacing("small");
+  overflow-y: auto;
+  min-height: 50px;
+  max-height: calc(100vh - 300px);
+}

app/assets/stylesheets/components/_dropdown.scss

@@ -0,0 +1,63 @@
+@use "tools/functions" as *;
+
+.c-dropdown {
+  cursor: pointer;
+  position: relative;
+}
+
+.c-dropdown__list {
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 1;
+  min-width: 100px;
+  background: var(--dropdown-bg-color);
+  border-radius: border-radius("medium");
+  color: var(--dropdown-color);
+  box-shadow: 0 1px 6px var(--dropdown-shadow-color);
+}
+
+.c-dropdown__item {
+  display: block;
+  padding: spacing("narrow");
+  white-space: nowrap;
+}
+
+a.c-dropdown__item {
+  text-decoration: none;
+  color: var(--dropdown-color);
+}
+
+form.c-dropdown__item {
+  padding: 0;
+}
+
+form.c-dropdown__item input[type="submit"],
+form.c-dropdown__item button[type="submit"] {
+  padding: spacing("narrow");
+  width: 100%;
+  background: var(--dropdown-bg-color);
+  border: none;
+}
+
+.c-dropdown__item:first-child,
+form.c-dropdown__item:first-child input[type="submit"],
+form.c-dropdown__item:first-child button[type="submit"] {
+  border-top-left-radius: border-radius("medium");
+  border-top-right-radius: border-radius("medium");
+}
+
+.c-dropdown__item:last-child,
+form.c-dropdown__item:last-child input[type="submit"],
+form.c-dropdown__item:last-child button[type="submit"] {
+  border-bottom-left-radius: border-radius("medium");
+  border-bottom-right-radius: border-radius("medium");
+}
+
+a.c-dropdown__item:hover,
+form.c-dropdown__item:hover input[type="submit"],
+form.c-dropdown__item:hover button[type="submit"],
+.c-dropdown__item:hover {
+  background: var(--dropdown-active-color);
+  color: var(--dropdown-color);
+}

app/assets/stylesheets/components/flash.css → app/assets/stylesheets/components/_flash.scss

@@ -1,3 +1,5 @@
+@use "tools/functions" as *;
+
 .c-flash {
   position: absolute;
   margin: 0;
@@ -13,17 +15,17 @@
 }
 
 .c-flash__body {
-  padding: var(--spacing-tiny);
+  padding: spacing("tiny");
   text-align: center;
-  border-radius: var(--flash-border-radius);
+  border-radius: border-radius("medium");
 }
 
 .c-flash__body--error {
-  background-color: rgb(var(--flash-error-bg-color));
-  color: rgb(var(--white));
+  background-color: var(--flash-error-bg-color);
+  color: var(--flash-color);
 }
 
 .c-flash__body--success {
-  background-color: rgb(var(--flash-success-bg-color));
-  color: rgb(var(--white));
+  background-color: var(--flash-success-bg-color);
+  color: var(--flash-color);
 }