Remove SCSS preprocessor

README.md

@@ -8,19 +8,19 @@
 
 ## Features
 
--   [Sass] for a feature rich superset of CSS.
--   [Tailwind CSS] for a sane and scalable CSS architecture.
--   [Locomotive Scroll] for smooth scrolling with parallax effects.
--   [Swup] for versatile and extensible page transition.
--   [Prettier] for a formatted and easy to maintain codebase.
--   [Nanostores] as state manager.
+- [PostCSS] for a feature rich superset of CSS.
+- [Tailwind CSS] for a sane and scalable CSS architecture.
+- [Locomotive Scroll] for smooth scrolling with parallax effects.
+- [Swup] for versatile and extensible page transition.
+- [Prettier] for a formatted and easy to maintain codebase.
+- [Nanostores] as state manager.
 
 ## Getting started
 
 Make sure you have the following installed:
 
--   [Node] — at least 20.14, the latest LTS is recommended.
--   [NPM] — at least 8.0, the latest LTS is recommended.
+- [Node] — at least 20.14, the latest LTS is recommended.
+- [NPM] — at least 8.0, the latest LTS is recommended.
 
 > 💡 You can use [NVM] to install and use different versions of Node via the command-line.
 
@@ -54,13 +54,13 @@ Inside of your project, you'll see the following folders and files:
 │   ├── components/
 │   │   └── Card/
 │   │       ├── Card.astro
-│   │       └── Card.scss
+│   │       └── Card.css
 │   ├── layouts/
 │   │   └── Layout.astro
 │   ├── pages/
 │   │   └── index.astro
 │   ├── styles/
-│   │   └── main.scss
+│   │   └── main.css
 │   └── scripts/
 │       ├── components/
 │       ├── utils/
@@ -95,17 +95,16 @@ All commands are run from the root of the project, from a terminal:
 
 ## Documentation
 
--   [Astro]
--   [Locomotive Scroll]
--   [Tailwind CSS]
--   [Swup]
--   [Prettier]
--   [Nanostores]
+- [Astro]
+- [Locomotive Scroll]
+- [Tailwind CSS]
+- [Swup]
+- [Prettier]
+- [Nanostores]
 
 [Astro]: https://docs.astro.build/en/getting-started/
 [Tailwind CSS]: https://tailwindcss.com/docs/installation
 [Locomotive Scroll]: https://scroll.locomotive.ca/docs
-[Sass]: https://sass-lang.com/
 [Swup]: https://swup.js.org/getting-started/
 [Node]: https://nodejs.org/
 [NPM]: https://npmjs.com/

astro.config.ts

@@ -3,7 +3,7 @@ import tailwind from '@astrojs/tailwind';
 import svgSprite from 'astro-svg-sprite';
 import tailwindConfig from './tailwind.config';
 import postcssTailwindShortcuts from '@locomotivemtl/postcss-tailwind-shortcuts';
-import removeDoubleParentheses from '@locomotivemtl/postcss-remove-double-parentheses';
+import postcssHelpersFunctions from '@locomotivemtl/postcss-helpers-functions';
 
 const isProd = import.meta.env.PROD;
 
@@ -12,21 +12,10 @@ export default defineConfig({
     site: 'https://locomotive-astro-boilerplate.vercel.app',
     vite: {
         css: {
-            preprocessorOptions: {
-                scss: {
-                    api: 'modern-compiler',
-                    additionalData: `
-                        @use "sass:math";
-                        @use "sass:list";
-                        @use "@styles/tools/maths" as *;
-                        @use "@styles/tools/functions" as *;
-                    `
-                }
-            },
             postcss: {
                 plugins: [
                     postcssTailwindShortcuts(tailwindConfig.theme, { prefix: 'theme' }),
-                    removeDoubleParentheses()
+                    postcssHelpersFunctions()
                 ]
             }
         },
@@ -36,7 +25,8 @@ export default defineConfig({
     },
     integrations: [
         tailwind({
-            applyBaseStyles: false
+            applyBaseStyles: false,
+            nesting: true
         }),
         svgSprite({
             include: './src/assets/svgs'