example with USWDS

greenwood.config.js

@@ -1,4 +1,5 @@
 import fs from 'fs';
+import { greenwoodPluginSass } from './plugin-sass.js';
 
 const pkg = JSON.parse(fs.readFileSync('./package.json', 'utf-8'));
 
@@ -7,5 +8,8 @@ export default {
   meta: [
     { rel: 'icon', href: '/assets/favicon.ico' },
     { name: 'description', content: pkg.description } // replace the pkg.description with a custom string if you prefer
+  ],
+  plugins: [
+    ...greenwoodPluginSass()
   ]
 };

package.json

@@ -30,10 +30,15 @@
     "url": "https://github.com/ProjectEvergreen/greenwood-getting-started/issues"
   },
   "homepage": "https://github.com/ProjectEvergreen/greenwood-getting-started#readme",
+  "dependencies": {
+    "uswds": "^3.0.0-beta.1"
+  },
   "devDependencies": {
     "@greenwood/cli": "~0.20.0",
     "@ls-lint/ls-lint": "^1.10.0",
     "eslint": "^8.4.0",
+    "rollup-plugin-sass": "^1.2.2",
+    "sass": "^1.36.0",
     "stylelint": "^13.8.0",
     "stylelint-a11y": "^1.2.3",
     "stylelint-config-standard": "^20.0.0"

plugin-sass.js

@@ -0,0 +1,56 @@
+/*
+ *
+ * Enables using JavaScript to @import SASS files in your CSS or use import / ESM syntax.
+ *
+ */
+import rollupPluginSass from 'rollup-plugin-sass';
+import { ResourceInterface } from '@greenwood/cli/src/lib/resource-interface.js';
+import sass from 'sass';
+
+class SassResource extends ResourceInterface {
+  constructor(compilation, options) {
+    super(compilation, options);
+    this.extensions = ['.scss'];
+    this.contentType = 'text/css';
+  }
+
+  async serve(url) {
+    return Promise.resolve(this.extensions.indexOf(path.extname(url)) >= 0);
+  }
+
+  async serve(url) {
+    return new Promise(async (resolve, reject) => {
+      try {
+        // https://sass-lang.com/documentation/js-api
+        const result = sass.renderSync({ file: url });
+
+        resolve({
+          body: result.css.toString(),
+          contentType: this.contentType
+        });
+      } catch (e) {
+        reject(e);
+      }
+    });
+  }
+}
+
+const greenwoodPluginSass = (options = {}) => {
+  return [{
+    type: 'resource',
+    name: 'plugin-import-sass:resource',
+    provider: (compilation) => new SassResource(compilation, options)
+  }, {
+    type: 'rollup',
+    name: 'plugin-import-sass:rollup',
+    provider: () => {
+      return [
+        rollupPluginSass()
+      ];
+    }
+  }];
+};
+
+export {
+  greenwoodPluginSass
+};

src/styles/theme.scss

@@ -0,0 +1,30 @@
+@import url('//fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap');
+
+// Include a USWDS settings file (required)
+@import "./uswds-settings.scss";
+
+// Point to the USWDS source code (required)
+@import "../../node_modules/uswds/dist/scss/stylesheets/uswds.scss";
+
+// Include your project's custom Sass (optional)
+// @include "project-custom.scss";
+
+$red: red!important;
+
+* {
+  margin: 0;
+  padding: 0;
+  text-decoration: none;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Source Sans Pro', sans-serif;
+  line-height: 1.4;
+}
+
+body {
+  h3 {
+    color: $red;
+  }
+}

src/styles/uswds-settings.scss

@@ -0,0 +1,15 @@
+$theme-image-path:              "../../node_modules/uswds/dist/img";
+$theme-font-path:              "../../node_modules/uswds/dist/fonts";
+$theme-show-compile-warnings:   false;
+$theme-show-notifications:      false;
+$theme-color-primary-lightest:  "green-warm-10";
+$theme-color-primary-lighter:   "green-warm-20";
+$theme-color-primary-light:     "green-warm-30";
+$theme-color-primary:           "green-warm-50";
+$theme-color-primary-vivid:     "green-warm-50v";
+$theme-color-primary-dark:      "green-warm-60v";
+$theme-color-primary-darker:    "green-warm-70v";
+$theme-color-primary-darkest:   "green-warm-80";
+$theme-banner-background-color: "ink";
+$theme-banner-link-color:       "primary-light";
+$theme-banner-max-width:        "none";

src/templates/blog.html

@@ -9,7 +9,7 @@
     <script type="module" src="../components/footer/footer.js"></script>
     <script type="module" src="../components/header/header.js"></script>
 
-    <link rel="stylesheet" href="../styles/theme.css"></link>
+    <link rel="stylesheet" href="../styles/theme.scss"></link>
     <link rel="stylesheet" href="../styles/blog.css"></link>
   </head>
 

src/templates/page.html

@@ -9,7 +9,7 @@
     <script type="module" src="../components/footer/footer.js"></script>
     <script type="module" src="../components/header/header.js"></script>
 
-    <link rel="stylesheet" href="../styles/theme.css"></link>
+    <link rel="stylesheet" href="../styles/theme.scss"></link>
     <link rel="stylesheet" href="../styles/home.css"></link>
   </head>
 
@@ -19,12 +19,120 @@
       <app-header></app-header>
 
       <div class='content'>
-        <content-outlet></content-outlet>
+        <!-- <content-outlet></content-outlet> -->
+
+        <!-- https://designsystem.digital.gov/components/accordion/ -->
+        <h3 class="site-preview-heading">Borderless</h3>
+        <div class="usa-accordion">
+          <!-- Use the accurate heading level to maintain the document outline -->
+          <h4 class="usa-accordion__heading">
+            <button
+              class="usa-accordion__button"
+              aria-expanded="true"
+              aria-controls="a1"
+            >
+              First Amendment
+            </button>
+          </h4>
+          <div id="a1" class="usa-accordion__content usa-prose">
+            <p>
+              Congress shall make no law respecting an establishment of religion, or
+              prohibiting the free exercise thereof; or abridging the freedom of speech,
+              or of the press; or the right of the people peaceably to assemble, and to
+              petition the Government for a redress of grievances.
+            </p>
+          </div>
+
+          <!-- Use the accurate heading level to maintain the document outline -->
+          <h4 class="usa-accordion__heading">
+            <button
+              class="usa-accordion__button"
+              aria-expanded="false"
+              aria-controls="a2"
+            >
+              Second Amendment
+            </button>
+          </h4>
+          <div id="a2" class="usa-accordion__content usa-prose">
+            <p>
+              A well regulated Militia, being necessary to the security of a free State,
+              the right of the people to keep and bear Arms, shall not be infringed.
+            </p>
+            <ul>
+              <li>This is a list item</li>
+              <li>Another list item</li>
+            </ul>
+          </div>
+
+          <!-- Use the accurate heading level to maintain the document outline -->
+          <h4 class="usa-accordion__heading">
+            <button
+              class="usa-accordion__button"
+              aria-expanded="false"
+              aria-controls="a3"
+            >
+              Third Amendment
+            </button>
+          </h4>
+          <div id="a3" class="usa-accordion__content usa-prose">
+            <p>
+              No Soldier shall, in time of peace be quartered in any house, without the
+              consent of the Owner, nor in time of war, but in a manner to be prescribed
+              by law.
+            </p>
+          </div>
+
+          <!-- Use the accurate heading level to maintain the document outline -->
+          <h4 class="usa-accordion__heading">
+            <button
+              class="usa-accordion__button"
+              aria-expanded="false"
+              aria-controls="a4"
+            >
+              Fourth Amendment
+            </button>
+          </h4>
+          <div id="a4" class="usa-accordion__content usa-prose">
+            <p>
+              The right of the people to be secure in their persons, houses, papers, and
+              effects, against unreasonable searches and seizures, shall not be
+              violated, and no Warrants shall issue, but upon probable cause, supported
+              by Oath or affirmation, and particularly describing the place to be
+              searched, and the persons or things to be seized.
+            </p>
+          </div>
+
+          <!-- Use the accurate heading level to maintain the document outline -->
+          <h4 class="usa-accordion__heading">
+            <button
+              class="usa-accordion__button"
+              aria-expanded="false"
+              aria-controls="a5"
+            >
+              Fifth Amendment
+            </button>
+          </h4>
+          <div id="a5" class="usa-accordion__content usa-prose">
+            <p>
+              No person shall be held to answer for a capital, or otherwise infamous
+              crime, unless on a presentment or indictment of a Grand Jury, except in
+              cases arising in the land or naval forces, or in the Militia, when in
+              actual service in time of War or public danger; nor shall any person be
+              subject for the same offence to be twice put in jeopardy of life or limb;
+              nor shall be compelled in any criminal case to be a witness against
+              himself, nor be deprived of life, liberty, or property, without due
+              process of law; nor shall private property be taken for public use,
+              without just compensation.
+            </p>
+          </div>
+        </div>
       </div>
 
       <app-footer></app-footer>
     </div>
 
+    <script src="/node_modules/uswds/dist/js/uswds-init.js"></script>
+    <script src="/node_modules/uswds/dist/js/uswds.js"></script>
   </body>
 
 </html>