feat(tokens): resolve imports for bundled token assets

adobe · Jul 8, 2024 · 3736249 · 3736249
1 parent c89b18d
commit 3736249
Show file tree

Hide file tree

Showing 11 changed files with 6,685 additions and 3,229 deletions.
diff --git a/.changeset/sharp-pianos-reply.md b/.changeset/sharp-pianos-reply.md
@@ -0,0 +1,5 @@
+---
+"@spectrum-css/tokens": minor
+---
+
+This update pre-resolves the bundler assets to make them easier to serve as a single entry point.
diff --git a/components/accordion/index.css b/components/accordion/index.css
@@ -28,58 +28,66 @@
  min-block-size: var(--mod-accordion-item-height, var(--spectrum-accordion-item-height));
 
  margin: 0;
- border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
+
+ border-color: transparent;
+ border-style: solid;
  border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
 
- border-block-end: 1px solid transparent;
+ border-block-end-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
 
- &:first-child {
- border-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
- border-width: var(--mod-accordion-divider-thickness, var(--spectrum-divider-thickness-small));
- border-block-start: 1px solid transparent;
+ &:first-of-type {
+ border-block-start-color: var(--mod-accordion-divider-color, var(--spectrum-accordion-divider-color));
  }
-}
 
-.spectrum-Accordion-itemHeading {
- position: relative;
- box-sizing: border-box;
- margin: 0;
-}
+ &.is-open {
+ .spectrum-Accordion-itemHeader:hover {
+ background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
+ }
 
-.spectrum-Accordion-itemIconContainer {
- position: absolute;
- inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2));
- display: flex;
- align-items: center;
- justify-content: center;
- inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
- block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
- padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space));
- color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
+ > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator,
+ > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator {
+ transform: var(--spectrum-logical-rotation,) rotate(90deg);
+ }
 
- &:dir(rtl) {
- transform: scaleX(-1);
+ > .spectrum-Accordion-itemContent {
+ display: block;
+ }
  }
-}
 
-.spectrum-Accordion-itemContent {
- display: none;
- padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content));
- padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text));
- font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font));
- font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size));
- font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight));
- font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style));
- line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height));
- color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color));
+ &.is-disabled {
+ .spectrum-Accordion-itemHeader {
+ cursor: default;
+
+ &,
+ &:hover,
+ &:focus-visible {
+ color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
+ background-color: transparent;
+ }
+
+ + .spectrum-Accordion-itemIconContainer {
+ color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
+ }
+ }
+
+ .spectrum-Accordion-itemContent {
+ color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
+ }
+ }
 }
 
-.spectrum-Accordion-itemHeader {
- cursor: pointer;
+.spectrum-Accordion-itemHeading {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
+ box-sizing: border-box;
+ margin: 0;
+}
+
+.spectrum-Accordion-itemHeader {
+ cursor: pointer;
+ order: 2;
 
  box-sizing: border-box;
  inline-size: 100%;
@@ -89,6 +97,7 @@
 
  padding-inline-start: calc(var(--mod-accordion-disclosure-indicator-to-text-space, var(--spectrum-accordion-disclosure-indicator-to-text-space)) + var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height)));
  padding-inline-end: var(--mod-accordion-edge-to-text-space, var(--spectrum-accordion-edge-to-text-space));
+
  font-family: var(--mod-accordion-item-header-font, var(--spectrum-accordion-item-header-font));
  font-size: var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size));
  font-weight: var(--mod-accordion-item-header-font-weight, var(--spectrum-accordion-item-header-font-weight));
@@ -100,13 +109,9 @@
  text-overflow: ellipsis;
 
  /* reset styling if button element is used */
- /* stylelint-disable-next-line property-no-vendor-prefix -- todo may no longer be needed */
- -webkit-appearance: none;
- /* stylelint-disable-next-line property-no-vendor-prefix -- todo may no longer be needed */
- -moz-appearance: none;
  appearance: none;
  background-color: var(--mod-accordion-background-color-default, var(--spectrum-accordion-background-color-default));
- border: 0;
+ border: none;
 
  &:focus {
  outline: none;
@@ -142,31 +147,35 @@
  }
 }
 
-.spectrum-Accordion-item {
- &.is-open {
- .spectrum-Accordion-itemHeader:hover {
- background-color: var(--mod-accordion-background-color-hover, var(--spectrum-accordion-background-color-hover));
- }
+.spectrum-Accordion-itemIconContainer {
+ position: absolute;
+ inset-block-start: max(0px, calc((var(--mod-accordion-min-block-size, var(--spectrum-accordion-min-block-size)) - var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height))) / 2));
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ order: 1;
+ inline-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
+ block-size: var(--mod-accordion-disclosure-indicator-height, var(--spectrum-accordion-disclosure-indicator-height));
+ padding-inline-start: var(--mod-accordion-edge-to-disclosure-indicator-space, var(--spectrum-accordion-edge-to-disclosure-indicator-space));
+ color: var(--mod-accordion-item-header-color-default, var(--spectrum-accordion-item-header-color-default));
+
+ &:dir(rtl) {
+ transform: scaleX(-1);
  }
 }
 
-.spectrum-Accordion-item.is-disabled {
- .spectrum-Accordion-itemHeader {
- &,
- &:hover,
- &:focus-visible {
- color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
- background-color: transparent;
- }
+.spectrum-Accordion-itemContent {
+ display: none;
 
- + .spectrum-Accordion-itemIconContainer {
- color: var(--mod-accordion-item-header-disabled-color, var(--spectrum-accordion-item-header-disabled-color));
- }
- }
+ padding-block: var(--mod-accordion-item-content-area-top-to-content, var(--spectrum-accordion-item-content-area-top-to-content)) var(--mod-accordion-item-content-area-bottom-to-content, var(--spectrum-accordion-item-content-area-bottom-to-content));
+ padding-inline: var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text)) var(--mod-accordion-component-edge-to-text, var(--spectrum-accordion-component-edge-to-text));
 
- .spectrum-Accordion-itemContent {
- color: var(--mod-accordion-item-content-disabled-color, var(--spectrum-accordion-item-content-disabled-color));
- }
+ font-family: var(--mod-accordion-item-content-font, var(--spectrum-accordion-item-content-font));
+ font-size: var(--mod-accordion-item-content-font-size, var(--spectrum-accordion-item-content-font-size));
+ font-weight: var(--mod-accordion-item-content-font-weight, var(--spectrum-accordion-item-content-font-weight));
+ font-style: var(--mod-accordion-item-content-font-style, var(--spectrum-accordion-item-content-font-style));
+ line-height: var(--mod-accordion-item-content-line-height, var(--spectrum-accordion-item-content-line-height));
+ color: var(--mod-accordion-item-content-color, var(--spectrum-accordion-item-content-color));
 }
 
 @media (forced-colors: active) {
@@ -181,22 +190,3 @@
  }
  }
 }
-
-.spectrum-Accordion-item {
- &.is-open {
- > .spectrum-Accordion-itemHeading > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator,
- > .spectrum-Accordion-itemIconContainer > .spectrum-Accordion-itemIndicator {
- transform: var(--spectrum-logical-rotation,) rotate(90deg);
- }
-
- > .spectrum-Accordion-itemContent {
- display: block;
- }
- }
-
- &.is-disabled {
- .spectrum-Accordion-itemHeader {
- cursor: default;
- }
- }
-}
diff --git a/components/accordion/stories/template.js b/components/accordion/stories/template.js
@@ -32,7 +32,6 @@ export const AccordionItem = ({
  id=${ifDefined(id)}
  style=${ifDefined(styleMap(customStyles))}
  role="presentation"
- @click=${onclick}
  >
  <!-- WAI-ARIA 1.1: Item header is a <button> wrapped within a <h3> element, rather than a <div> element with role="tab" -->
  <h3 class="${rootClass}Heading">
@@ -44,6 +43,7 @@ export const AccordionItem = ({
  id="spectrum-accordion-item-${idx}-header"
  aria-controls="spectrum-accordion-item-${idx}-content"
  aria-expanded="${open ? "true" : "false"}"
+ @click=${onclick}
  >
  ${heading}
  </button>

diff --git a/components/icon/stories/template.js b/components/icon/stories/template.js
@@ -221,8 +221,6 @@ export const Template = ({
  break;
  }
 
- console.log(iconName, idKey, sizeVal);
-
  idKey += sizeVal;
  iconName += sizeVal;
  }

diff --git a/postcss.config.js b/postcss.config.js
@@ -19,14 +19,16 @@ module.exports = ({
  referencesOnly = false,
  preserveVariables = true,
  stripLocalSelectors = false,
+ resolveImports = true,
  lint = true,
  verbose = true,
  minify = false,
  additionalPlugins = {},
  env = process.env.NODE_ENV ?? "development",
  ...options
 } = {}) => {
- if (env === "development" && !options.map) {
+ const isProduction = env.toLowerCase() === "production";
+ if (!isProduction && !options.map) {
  options.map = { inline: false };
  }
  else options.map = false;
@@ -47,7 +49,7 @@ module.exports = ({
  /* --------------------------------------------------- */
  /* ------------------- IMPORTS ---------------- */
  /** @link https://github.com/postcss/postcss-import#postcss-import */
- "postcss-import": {},
+ "postcss-import": resolveImports ? {} : false,
  /* --------------------------------------------------- */
  /* ------------------- SASS-LIKE UTILITIES ----------- */
  "postcss-extend": {},
@@ -122,7 +124,8 @@ module.exports = ({
  reportInvalidScopeDisables: lint,
  },
  "postcss-licensing": {
- filename: "COPYRIGHT",
+ filename: "./COPYRIGHT",
+ cwd: __dirname,
  skipIfEmpty: true,
  },
  "postcss-reporter": verbose

diff --git a/stylelint.config.js b/stylelint.config.js
@@ -90,6 +90,7 @@ module.exports = {
  },
  },
  ],
+ "declaration-block-no-shorthand-property-overrides": true,
  "value-keyword-case": [
  "lower",
  {

diff --git a/tasks/component-builder.js b/tasks/component-builder.js
@@ -134,16 +134,18 @@ async function processCSS(
  new Error("This function requires content be provided"),
  );
 
+ const ctx = {
+ cwd,
+ env: process.env.NODE_ENV ?? "development",
+ file: output,
+ from: input,
+ to: output,
+ verbose: false,
+ ...postCSSOptions,
+ };
+
  const { plugins, options } = await postcssrc(
- {
- cwd,
- env: process.env.NODE_ENV ?? "development",
- file: output,
- from: input,
- to: output,
- verbose: false,
- ...postCSSOptions,
- },
+ ctx,
  configPath, // This is the path to the directory where the postcss.config.js lives
  );