feat(vars,expressvars)!: deprecate packages

BREAKING CHANGE: as no additional changes have been or are planned to be made to
these legacy token packages, these assets no longer need to exist in the monorepo
structure for Spectrum CSS.

.gitignore

@@ -6,6 +6,7 @@ dist-site
 
 temp
 .npmrc*
+.nx
 .env
 .tmp
 npm-debug.log*

.prettierignore

@@ -4,15 +4,11 @@
 **/node_modules
 
 components/*/dist
-components/expressvars/custom.css
-components/expressvars/css/**/*.css
-components/vars/css/**/*.css
-components/vars/custom.css
 tokens/custom-*/*.css
 .storybook/storybook-static/**
 generator
 dist
-template.hbs
+*.hbs
 
 site/includes/*.js
 

.storybook/main.js

@@ -94,9 +94,7 @@ module.exports = {
 							{
 								loader: "file-loader",
 								options: {
-									outputPath: (url, resourcePath, context) => {
-										return `assets/images/${url.replace(/_\//g, "")}`;
-									},
+									outputPath: (url) => `assets/images/${url.replace(/_\//g, "")}`,
 								},
 							},
 						],
@@ -118,7 +116,11 @@ module.exports = {
 								loader: "file-loader",
 								options: {
 									name: "[path][name].[ext][query]",
-									outputPath: (url, resourcePath, context) => {
+									outputPath: (url) => {
+										if (/node_modules\/@spectrum-css/.test(url)) {
+											return `assets/css/${url.replace(/^_\/_\/node_modules\/@spectrum-css\//g, "")}`;
+										}
+
 										return `assets/css/${url.replace(/_\//g, "")}`;
 									},
 									esModule: false,

.storybook/manager.js

@@ -7,14 +7,14 @@ import logo from "./assets/logo.svg";
 import pkg from "./package.json";
 
 // Load global styles
-import "@spectrum-css/vars/css/globals/index.css";
-import "@spectrum-css/vars/css/components/index.css";
-
-import "@spectrum-css/vars/css/scales/spectrum-medium.css";
-import "@spectrum-css/vars/css/themes/spectrum-light.css";
+import "@spectrum-css/vars/dist/spectrum-global.css";
+import "@spectrum-css/vars/dist/spectrum-light.css";
+import "@spectrum-css/vars/dist/spectrum-medium.css";
 
 import "./global.js";
 
+import "@spectrum-css/tokens";
+
 addons.setConfig({
 	theme: create({
 		base: "light",

.storybook/package.json

@@ -85,6 +85,21 @@
           "{workspaceRoot}/storybook-static"
         ]
       },
+      "storybook": {
+        "dependsOn": [
+          "^build"
+        ],
+        "inputs": [
+          "{workspaceRoot}/assets",
+          "{workspaceRoot}/decorators",
+          "{workspaceRoot}/*.js",
+          "{workspaceRoot}/*.html",
+          "{projectRoot}/components/*/dist"
+        ],
+        "outputs": [
+          "{workspaceRoot}/storybook-static"
+        ]
+      },
       "clean": {
         "inputs": [
           "{workspaceRoot}/storybook-static"

.storybook/postcss.config.js

@@ -1,4 +1,4 @@
-const { resolve, relative, basename } = require("path");
+const { resolve, relative, basename, sep } = require("path");
 const { existsSync } = require("fs");
 const warnCleaner = require("postcss-warn-cleaner");
 
@@ -8,7 +8,7 @@ const legacyBuilder = require("@spectrum-css/component-builder/css/processors.js
 module.exports = (ctx) => {
 	let plugins = [];
 	const componentPath = resolve(__dirname, "../components");
-	const folderName = relative(componentPath, ctx.file).split("/")[0];
+	const folderName = ctx.file.includes('node_modules') ? relative(resolve(__dirname, "../../node_modules/@spectrum-css"), ctx.file)?.split(sep)?.shift() : relative(componentPath, ctx.file).split("/")[0];
 	const pkgPath = resolve(componentPath, folderName, "package.json");
 
 	if (["expressvars", "vars", "tokens"].includes(folderName)) {

.storybook/preview.js

@@ -25,6 +25,7 @@ import "@spectrum-css/vars/dist/spectrum-dark.css";
 import "@spectrum-css/vars/dist/spectrum-darkest.css";
 import "@spectrum-css/vars/dist/spectrum-light.css";
 
+import "@spectrum-css/vars/dist/components/index.css";
 import "@spectrum-css/vars/dist/spectrum-global.css";
 
 import "@spectrum-css/expressvars/dist/spectrum-large.css";
@@ -34,6 +35,7 @@ import "@spectrum-css/expressvars/dist/spectrum-dark.css";
 import "@spectrum-css/expressvars/dist/spectrum-darkest.css";
 import "@spectrum-css/expressvars/dist/spectrum-light.css";
 
+import "@spectrum-css/expressvars/dist/components/index.css";
 import "@spectrum-css/expressvars/dist/spectrum-global.css";
 
 import "@spectrum-css/tokens";

.stylelintignore

@@ -1,6 +1,3 @@
 components/**/*-generated.css
 tokens/*
-components/vars/*
-components/express/*
-components/expressvars/*
 components/site/*

components/actionbar/package.json

@@ -20,7 +20,7 @@
   "peerDependencies": {
     "@spectrum-css/actionbutton": ">=5",
     "@spectrum-css/actiongroup": ">=3",
-    "@spectrum-css/closebutton": ">=3",
+    "@spectrum-css/closebutton": ">=4",
     "@spectrum-css/fieldlabel": ">=7",
     "@spectrum-css/icon": ">=4",
     "@spectrum-css/popover": ">=5 <=6",

components/alertbanner/package.json

@@ -18,7 +18,7 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/closebutton": ">=3",
+    "@spectrum-css/closebutton": ">=4",
     "@spectrum-css/divider": ">=2.0.25",
     "@spectrum-css/icon": ">=4",
     "@spectrum-css/tokens": ">=13"

components/buttongroup/package.json

@@ -18,7 +18,7 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/button": ">=10",
+    "@spectrum-css/button": ">=11",
     "@spectrum-css/tokens": ">=13"
   },
   "devDependencies": {

components/coachmark/package.json

@@ -18,7 +18,7 @@
     "build": "gulp"
   },
   "peerDependencies": {
-    "@spectrum-css/button": ">=10",
+    "@spectrum-css/button": ">=11",
     "@spectrum-css/vars": ">=9"
   },
   "devDependencies": {

components/colorhandle/package.json

@@ -19,7 +19,7 @@
   },
   "peerDependencies": {
     "@spectrum-css/colorloupe": ">=3",
-    "@spectrum-css/opacitycheckerboard": ">=1.0.0-alpha.0",
+    "@spectrum-css/opacitycheckerboard": ">=1",
     "@spectrum-css/tokens": ">=13"
   },
   "devDependencies": {