From ccc5f757a143dc8d9bfffa737437c80011956e59 Mon Sep 17 00:00:00 2001 From: basher Date: Mon, 11 Nov 2024 15:43:13 +0000 Subject: [PATCH] implement workaround for sass-export npm --- ui/package.json | 2 +- ui/src/css/base/_colors.scss | 28 ++++++++-------- ui/src/css/base/colors-to-json.scss | 33 +++++++++++++++++++ .../2. Design System/Colours/Colours.mdx | 3 +- .../Colours/Colours.stories.js | 2 +- 5 files changed, 51 insertions(+), 17 deletions(-) create mode 100644 ui/src/css/base/colors-to-json.scss diff --git a/ui/package.json b/ui/package.json index 80f820c..ad087ed 100644 --- a/ui/package.json +++ b/ui/package.json @@ -13,7 +13,7 @@ "reset": "rm -rf node_modules/ && npm install", "static-assets-rename": "node ./scripts/static-assets-rename", "static-assets-move": "node ./scripts/static-assets-move", - "sass-export-colors": "sass-export src/css/base/_colors.scss -o public/exported-colors.json", + "sass-export-colors": "sass-export src/css/base/colors-to-json.scss -o public/exported-colors.json", "prestart": "rm -rf .parcel-cache", "start:parcel": "parcel watch src/javascript/index.ts --dist-dir public --hmr-port 1234 --target app", "start": "npm install && npm run sass-export-colors && npm run start:parcel", diff --git a/ui/src/css/base/_colors.scss b/ui/src/css/base/_colors.scss index fdc1ec6..7600e58 100644 --- a/ui/src/css/base/_colors.scss +++ b/ui/src/css/base/_colors.scss @@ -2,31 +2,31 @@ ---------------------------------------------------------------------------- Color settings. -1. Use JSDoc comments to identify all the color 'sections'. -2. The 'sass-export' Node package can then correctly sub-divide all the colors into appropriate groups for Storybook. +1. Copy the CSS Custom properties below, along with their JSDoc comments, into 'base/colors-to-json.scss'. +2. The 'sass-export' Node package then correctly exports all the colors as JSON for consumption by Storybook. + +TODO: +- Write custom Node script to convert these values into JSON without the manual copy/paste step into a Sass file. ---------------------------------------------------------------------------- */ /** * @sass-export-section="main theme colours" */ - -$color-brand: hsl(var(--color-brand)) !default; -$color-text: hsl(var(--color-text)) !default; -$color-background: hsl(var(--color-background)) !default; +$color-brand: hsl(var(--color-brand)); +$color-text: hsl(var(--color-text)); +$color-background: hsl(var(--color-background)); /** * @sass-export-section="neutral colours" */ - -$color-neutral-900: hsl(var(--color-neutral-900)) !default; -$color-neutral-100: hsl(var(--color-neutral-100)) !default; +$color-neutral-900: hsl(var(--color-neutral-900)); +$color-neutral-100: hsl(var(--color-neutral-100)); /** * @sass-export-section="other accent colours" */ - -$color-success: hsl(var(--color-accent-positive)) !default; -$color-error: hsl(var(--color-accent-negative)) !default; -$color-notify: hsl(var(--color-accent-neutral)) !default; -$color-focus: hsl(var(--color-focus)) !default; +$color-success: hsl(var(--color-accent-positive)); +$color-error: hsl(var(--color-accent-negative)); +$color-notify: hsl(var(--color-accent-neutral)); +$color-focus: hsl(var(--color-focus)); diff --git a/ui/src/css/base/colors-to-json.scss b/ui/src/css/base/colors-to-json.scss new file mode 100644 index 0000000..6c740b7 --- /dev/null +++ b/ui/src/css/base/colors-to-json.scss @@ -0,0 +1,33 @@ +/* +---------------------------------------------------------------------------- +Color settings. + +1. Copied from the CSS Custom properties in 'base/colors.css', ans converted to Sass variables. +2. The 'sass-export' Node package then correctly exports all the colors as JSON for consumption by Storybook. +3. This file is NOT imported so is NOT part of the Parcel build. + +TODO: +- Write custom Node script to convert CSS into JSON without the manual copy/paste step into this Sass file. +---------------------------------------------------------------------------- +*/ + +/** + * @sass-export-section="main theme colours" + */ +$color-brand: hsl(var(--color-brand)); +$color-text: hsl(var(--color-text)); +$color-background: hsl(var(--color-background)); + +/** + * @sass-export-section="neutral colours" + */ +$color-neutral-900: hsl(var(--color-neutral-900)); +$color-neutral-100: hsl(var(--color-neutral-100)); + +/** + * @sass-export-section="other accent colours" + */ +$color-success: hsl(var(--color-accent-positive)); +$color-error: hsl(var(--color-accent-negative)); +$color-notify: hsl(var(--color-accent-neutral)); +$color-focus: hsl(var(--color-focus)); diff --git a/ui/stories/2. Design System/Colours/Colours.mdx b/ui/stories/2. Design System/Colours/Colours.mdx index cb0b047..2399534 100644 --- a/ui/stories/2. Design System/Colours/Colours.mdx +++ b/ui/stories/2. Design System/Colours/Colours.mdx @@ -5,7 +5,7 @@ import * as Colours from './Colours.stories'; # Colour palette / swatch -The default Sass colour variables get automatically exported to a JSON file when Parcel server is started with `npm start`. +The default colour CSS custom properties get automatically exported to a JSON file when Parcel server is started with `npm start`. @@ -42,4 +42,5 @@ export const Colours = (args, {loaded}) => `...` ``` ## TODO +- Remove dependency on `sass-export` NPM script to generate JSON colours. - Migrate to CSS Color 4 `oklch()`? diff --git a/ui/stories/2. Design System/Colours/Colours.stories.js b/ui/stories/2. Design System/Colours/Colours.stories.js index 823010f..9f0c688 100644 --- a/ui/stories/2. Design System/Colours/Colours.stories.js +++ b/ui/stories/2. Design System/Colours/Colours.stories.js @@ -65,7 +65,7 @@ ${ style="background: ${color.compiledValue}"> - ${color.name} + ${color.value.replace(/hsl\(/g, '').slice(0, -1)}