[CCC-50] No Build (#266)

This PR fixes some issues in the documentation and removes all references to SASS or SCSS. It is the last step to completely removing SCSS. It also updates the build step to work with the updated process.

Author: Jeremy-Walton

.github/workflows/linting.yml

@@ -30,8 +30,6 @@ jobs:
         run: yarn prettier-check
       - name: Build CSS
         run: yarn build:css
-      - name: Build SCSS
-        run: yarn build:scss
       - name: Build Tokens
         run: yarn build:tokens
       - name: Build Storybook

.storybook/manager-head.html

@@ -1,4 +1,4 @@
-<style lang="sass">
+<style lang="css">
   button[data-action='collapse-root'] {
     color: hsl(273, 22%, 18%);
     text-transform: capitalize;

.storybook/preview.scss .storybook/preview.css.storybook/preview.scss renamed to .storybook/preview.css

@@ -1,8 +1,8 @@
-@import './src/optics';
+@import '../src/optics';
 
-@import './src/recipes/domains-sidebar';
-@import './src/recipes/16six-sidebar';
-@import './src/recipes/aligned-header';
+@import '../src/recipes/domains-sidebar';
+@import '../src/recipes/16six-sidebar';
+@import '../src/recipes/aligned-header';
 
 @import 'https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap';
 
@@ -59,12 +59,12 @@
   height: 0;
 }
 
-// Allow the "Show Code" button to appear above the footer in examples.
+/* Allow the "Show Code" button to appear above the footer in examples. */
 .docs-story div:last-child {
   z-index: 1;
 }
 
-// Transition Demos
+/* Transition Demos */
 .transition-demo {
   display: inline-block;
   padding: var(--op-space-medium);
@@ -165,7 +165,11 @@
   }
 }
 
-// Prevent our tag component from interfering with the docs
+.text-alignment-demo {
+  width: 400px;
+}
+
+/* Prevent our tag component from interfering with the docs */
 .language-html {
   .tag {
     display: initial;
@@ -178,7 +182,7 @@
   }
 }
 
-// Company Card
+/* Company Card */
 .card.card--company {
   display: flex;
   align-items: center;
@@ -192,15 +196,15 @@
     gap: var(--op-space-x-large);
 
     .card__info-logo {
-      width: calc(var(--op-size-unit) * 24); // 96px
+      width: calc(var(--op-size-unit) * 24); /* 96px */
     }
 
     p {
       margin: 0;
     }
   }
 
-  // --op-breakpoint-small
+  /* --op-breakpoint-small */
   @media (width <= 768px) {
     flex-direction: column;
 

.storybook/preview.js

@@ -35,7 +35,7 @@ const preview = {
   },
 }
 
-import './preview.scss'
+import './preview.css'
 
 export default preview
 

.stylelintrc.json

@@ -1,15 +1,15 @@
 {
-  "extends": ["stylelint-config-standard-scss", "stylelint-config-idiomatic-order", "stylelint-config-prettier-scss"],
-  "plugins": ["stylelint-scss", "stylelint-prettier"],
-  "overrides": [
-    {
-      "files": ["**/*.scss"],
-      "customSyntax": "postcss-scss"
-    }
-  ],
+  "extends": ["stylelint-config-idiomatic-order"],
+  "plugins": ["stylelint-prettier"],
+  "overrides": [],
   "rules": {
     "prettier/prettier": true,
-    "custom-property-pattern": ["(?<=op-)", { "message": "CSS variables should be prefixed with op-" }],
+    "custom-property-pattern": [
+      "(?<=op-)",
+      {
+        "message": "CSS variables should be prefixed with op-"
+      }
+    ],
     "selector-class-pattern": null
   }
 }

NEW_COMPONENT.md

@@ -2,54 +2,44 @@
 
 To create a new CSS component, follow these steps:
 
-1. Start by defining a Sass `%{component-name}-global` placeholder for the component. This placeholder will serve as the base style for the component and all its variants.
-2. Extend the default class and all variants of the component with the global placeholder you defined in the previous step. This ensures that the base style is applied consistently across all variations.
-3. When creating variants of the component, use the following syntax: `.{component-name}-{variant}`. Variants are top-level components that have distinct styles or functionalities.
-4. For stylistic tweaks that apply to all variants, use modifiers following the BEM (Block, Element, Modifier) syntax. The modifier class should be in the format: `.{component-name}--{modifier}`.
-
-<!-- TODO: This distintion should exist in the main docs as well, not just in the dev instructions. Understanding how to consume components in your app and know the distinctions here is a good idea. -->
-
-## Variant vs. Modifier
-
-A variant is a top-level component that has distinct styles or functionalities. For example, a button component can have a primary variant that has a different color and hover state than the default button. A modifier is a class that modifies the style of a component. For example, a button component can have a disabled modifier that changes the color and cursor of the button. Modifiers apply to all Variants.
+1. Start by defining a css `.{component-name}` selector for the component. This will serve as the base style for the component and all its variants.
+2. Create modifiers for any all variants of the component you defined in the previous step. This ensures that the base style is shared consistently across all variations.
+3. When creating variants of the component, use the following syntax: `.{component-name}--{variant}`. It can be helpful to nest these under the main class with a `&.{component-name}--{variant}` to ensure they only work with that component.
+4. For stylistic tweaks that apply to all variants, use modifiers following the BEM (Block, Element, Modifier) syntax. The modifier class should be in the format: `.{component-name}--{modifier}` just like the other variants.
 
 To illustrate these concepts, let's consider an example of a button. You can use the following template as a guide:
 
-```scss
-// Define the global placeholder for the button component
-%button-global {
-  // Base styles for the button
+```css
+/* Define the main component */
+.btn {
+  /* Base styles for the button */
 
-  // Hover state
+  /* Hover state */
   &:hover {
-    // Styles for the hovered button modifier
-    // ...
+    /*
+      Styles for the hovered button modifier
+      ...
+    */
   }
 
-  // Modifier: Large button
+  /* Modifier: Large button */
   &.btn--large {
-    // Styles for the large button modifier
+    /* Styles for the large button modifier */
   }
 
-  // Modifier: Disabled button
+  /* Modifier: Disabled button */
   &.btn--disabled,
   &:disabled {
-    // Styles for the disabled button modifier
+    /* Styles for the disabled button modifier */
   }
 }
 
-// Default button class extending the global styles
-.btn {
-  @extend %button-global;
-  // Specific styles for the default button variant
-  // ...
-}
-
-// Variant: Primary button
-.btn-primary {
-  @extend %button-global;
-  // Specific styles for the primary button variant
-  // ...
+/* Variant: Primary button */
+.btn.btn--primary {
+  /*
+    Specific styles for the primary button variant
+    ...
+  */
 }
 ```
 

README.md

@@ -12,7 +12,7 @@
 
 </div>
 
-Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.
+Optics is an css package that provides base styles and components that can be integrated and customized in a variety of projects.
 
 ## Installation
 
@@ -30,16 +30,14 @@ yarn add @rolemodel/optics
 
 ### Import
 
-If you are using webpack to compile, you can add this import to the top of your root level `scss` file.
+You can add this import to the top of your root level `css` file.
 
-```scss
-@import '@rolemodel/optics';
-```
-
-If you are using a different compiler such as Dart Sass, you may need to reference the scss file directly.
-
-```scss
-@import '@rolemodel/optics/dist/scss/optics';
+```css
+@import '@rolemodel/optics'; /* Using webpack to compile */
+/* Or */
+@import '@rolemodel/optics/dist/css/optics'; /* Using a different compiler or no compiler */
+/* Or */
+@import '@rolemodel/optics/dist/css/optics.min.css'; /* If you want a single file with all the styles in it. */
 ```
 
 ## Documentation
@@ -65,7 +63,7 @@ Add the following above a group to categorize the tokens.
 
 ### Component Documentation
 
-For instructions on how to create a new component, see [Process for Creating New Components](./NEW_COMPONENT.MD)
+For instructions on how to create a new component, see [Process for Creating New Components](./NEW_COMPONENT.md)
 
 Additional stories can be added using the following command, or copying an existing story.
 

build_token_json.js

@@ -128,12 +128,7 @@ try {
   fs.readdir(source, { withFileTypes: true }, (_errors, files) => {
     let variables = {}
     files
-      .filter(
-        (directoryEntry) =>
-          directoryEntry.isFile() &&
-          directoryEntry.name !== 'dark_mode_tokens.scss' &&
-          directoryEntry.name !== 'index.scss'
-      )
+      .filter((directoryEntry) => directoryEntry.isFile() && directoryEntry.name !== 'index.css')
       .forEach((directoryEntry) => {
         const fileContents = fs.readFileSync(`${source}/${directoryEntry.name}`)
         const matches = fileContents.toString().match(/^\s*--.*?(?=;)/gm)

optics-design-system.code-workspace

@@ -7,7 +7,7 @@
   "settings": {
     "prettier.configPath": ".prettierrc.json",
     "stylelint.configFile": ".stylelintrc.json",
-    "stylelint.validate": ["css", "scss"],
+    "stylelint.validate": ["css"],
     "editor.codeActionsOnSave": {
       "source.fixAll.stylelint": "always",
     },

package.json

@@ -1,21 +1,21 @@
 {
   "name": "@rolemodel/optics",
-  "version": "1.12.0",
+  "version": "2.0.0",
   "packageManager": "yarn@4.2.2",
-  "description": "Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.",
-  "main": "dist/scss/optics.scss",
+  "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.",
+  "main": "dist/css/optics.css",
   "scripts": {
     "test": "exit 0",
-    "build": "yarn build:css && yarn build:scss && yarn build:tokens",
-    "build:css": "sass src/optics.scss dist/css/optics.css --load-path=node_modules/",
-    "build:scss": "rsync -a src/ dist/scss --exclude stories",
+    "build": "yarn build:css && yarn build:css-min && yarn build:tokens",
+    "build:css": "mkdir -p dist/css; rsync -a src/ dist/css --exclude stories",
+    "build:css-min": "postcss src/optics.css -o dist/css/optics.min.css",
     "build:tokens": "node build_token_json --source=src/core/tokens --output=dist/tokens/tokens.json",
     "storybook": "storybook dev -p 6006 --docs",
     "build-storybook": "storybook build --docs",
     "lint": "yarn lint:js && yarn lint:css",
     "lint-fix": "yarn lint:js --fix && yarn lint:css --fix",
     "lint:js": "eslint 'src/stories/**/*.js'",
-    "lint:css": "stylelint 'src/**/*.(scss|css)'",
+    "lint:css": "stylelint 'src/**/*.css'",
     "prettier": "prettier -w .",
     "prettier-check": "prettier -c .",
     "sanity-check": "yarn lint && yarn prettier && yarn build && yarn build-storybook && rm -rf ./dist && rm -rf ./storybook-static",
@@ -30,7 +30,6 @@
     "CSS",
     "System",
     "RoleModel",
-    "SCSS",
     "Optics"
   ],
   "author": "RoleModel Software",
@@ -64,19 +63,15 @@
     "eslint-plugin-storybook": "^0.6.13",
     "generate-template-files": "^3.2.1",
     "postcss": "^8.4.38",
-    "postcss-scss": "^4.0.9",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.1.0",
     "prettier": "^3.0.0",
-    "sass": "^1.77.2",
-    "sass-loader": "^14.1.0",
     "storybook": "^8.1.3",
     "storybook-design-token": "^3.1.0",
     "style-loader": "^3.3.3",
     "stylelint": "^16.2.1",
     "stylelint-config-idiomatic-order": "^10.0.0",
-    "stylelint-config-prettier-scss": "^1.0.0",
-    "stylelint-config-standard-scss": "^13.0.0",
     "stylelint-prettier": "^5.0.0",
-    "stylelint-scss": "^6.1.0",
     "vite": "^5.2.11"
   },
   "peerDependencies": {