From fd104ad74f5ec6005cb07c7e7b9b5a61787db043 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Wed, 4 Aug 2021 18:03:24 -0400 Subject: [PATCH] expose styles for js --- docs/assets/plugins/code-block/code-block.css | 2 +- docs/resources/changelog.md | 1 + package-lock.json | 13 +++++++++ package.json | 1 + scripts/build.js | 27 +++++++++++++++++-- src/declaration.d.ts | 5 ++++ src/{styles => themes}/base.css | 24 ++++++++--------- src/themes/base.ts | 7 ++++- src/{styles => themes}/dark.css | 5 +--- src/themes/dark.ts | 7 ++++- 10 files changed, 71 insertions(+), 21 deletions(-) rename src/{styles => themes}/base.css (99%) rename src/{styles => themes}/dark.css (99%) diff --git a/docs/assets/plugins/code-block/code-block.css b/docs/assets/plugins/code-block/code-block.css index 42f3eb5d2..292e67890 100644 --- a/docs/assets/plugins/code-block/code-block.css +++ b/docs/assets/plugins/code-block/code-block.css @@ -6,7 +6,7 @@ } .sl-theme-dark .code-block { - background-color: var(--sl-color-gray-100); + background-color: var(--sl-color-gray-200); } .code-block__preview { diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md index 807a026ef..58748b1e7 100644 --- a/docs/resources/changelog.md +++ b/docs/resources/changelog.md @@ -11,6 +11,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis - Added a console error that appears when menu items have duplicate values in `sl-select` - Added new color primitives to the base set of design tokens - Added `--sl-color-*-1000` swatches to all color palettes +- Exposed base and dark stylesheets so they can be imported via JavaScript [#438](https://github.com/shoelace-style/shoelace/issues/438) - Fixed a bug in `sl-menu` where pressing Enter after using type to select would result in the wrong value - Refactored thumb position logic in `sl-switch` [#490](https://github.com/shoelace-style/shoelace/pull/490) - Reworked the dark theme to use an inverted token approach instead of light DOM selectors diff --git a/package-lock.json b/package-lock.json index f3f0d53d4..f6ba3bd44 100644 --- a/package-lock.json +++ b/package-lock.json @@ -34,6 +34,7 @@ "del": "^6.0.0", "download": "^8.0.0", "esbuild": "^0.12.4", + "esbuild-plugin-inline-import": "^1.0.1", "front-matter": "^4.0.2", "get-port": "^5.1.1", "husky": "^4.3.8", @@ -3673,6 +3674,12 @@ "esbuild": "bin/esbuild" } }, + "node_modules/esbuild-plugin-inline-import": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/esbuild-plugin-inline-import/-/esbuild-plugin-inline-import-1.0.1.tgz", + "integrity": "sha512-QcBbsf7nJnD1GW2SOxgE0lLJ2GgqhGZCoPujxFaWatooNXpYwDCYuOadThKPLWcB9Sx6a7i3GU7RNBEB1dcYOQ==", + "dev": true + }, "node_modules/escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", @@ -14185,6 +14192,12 @@ "integrity": "sha512-HObgzMHbba5HzsHzxj1ccDIPWncCCCQjoruuLyS5geidwndqgLsjZEMt0XeSYIIbqoJFENGCEFQt4m2PtAFK2Q==", "dev": true }, + "esbuild-plugin-inline-import": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/esbuild-plugin-inline-import/-/esbuild-plugin-inline-import-1.0.1.tgz", + "integrity": "sha512-QcBbsf7nJnD1GW2SOxgE0lLJ2GgqhGZCoPujxFaWatooNXpYwDCYuOadThKPLWcB9Sx6a7i3GU7RNBEB1dcYOQ==", + "dev": true + }, "escalade": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz", diff --git a/package.json b/package.json index 8c1d09eb1..dd80f4466 100644 --- a/package.json +++ b/package.json @@ -64,6 +64,7 @@ "del": "^6.0.0", "download": "^8.0.0", "esbuild": "^0.12.4", + "esbuild-plugin-inline-import": "^1.0.1", "front-matter": "^4.0.2", "get-port": "^5.1.1", "husky": "^4.3.8", diff --git a/scripts/build.js b/scripts/build.js index 7bb4f1a15..f82b02159 100644 --- a/scripts/build.js +++ b/scripts/build.js @@ -10,6 +10,7 @@ import esbuild from 'esbuild'; import fs from 'fs'; import getPort from 'get-port'; import glob from 'globby'; +import inlineImportPlugin from 'esbuild-plugin-inline-import'; import path from 'path'; import { execSync } from 'child_process'; @@ -25,6 +26,14 @@ execSync('node scripts/make-vscode-data.js', { stdio: 'inherit' }); execSync('node scripts/make-icons.js', { stdio: 'inherit' }); (async () => { + async function copyFiles() { + // Copy CSS files from src/themes to dist/themes + await copy('./src/themes', './dist/themes', { + overwrite: true, + filter: /\.css$/ + }); + } + const entryPoints = [ // The whole shebang dist './src/shoelace.ts', @@ -50,13 +59,15 @@ execSync('node scripts/make-icons.js', { stdio: 'inherit' }); }, bundle: true, splitting: true, - plugins: [] + plugins: [inlineImportPlugin()] }) .catch(err => { console.error(chalk.red(err)); process.exit(1); }); + await copyFiles(); + // Create the docs distribution by copying dist into the docs folder. This is what powers the website. It doesn't need // to exist in dev because Browser Sync routes it virtually. await del('./docs/dist'); @@ -95,7 +106,19 @@ execSync('node scripts/make-icons.js', { stdio: 'inherit' }); buildResult // Rebuild and reload .rebuild() - .then(() => execSync('node scripts/make-metadata.js', { stdio: 'inherit' })) + .then(async () => { + if (/\.css$/.test(filename)) { + await copyFiles(); + } + }) + .then(() => { + // Skip metadata when styles are changed + if (/(\.css|\.styles\.ts)$/.test(filename)) { + return; + } + + execSync('node scripts/make-metadata.js', { stdio: 'inherit' }); + }) .then(() => bs.reload()) .catch(err => console.error(chalk.red(err))); }); diff --git a/src/declaration.d.ts b/src/declaration.d.ts index d8838c54c..250907a11 100644 --- a/src/declaration.d.ts +++ b/src/declaration.d.ts @@ -1,3 +1,8 @@ declare module '@popperjs/core/dist/esm' { export * from '@popperjs/core/lib'; } + +declare module '*.css' { + const styles: string; + export default styles; +} diff --git a/src/styles/base.css b/src/themes/base.css similarity index 99% rename from src/styles/base.css rename to src/themes/base.css index b8b01b498..9d7dfd1d1 100644 --- a/src/styles/base.css +++ b/src/themes/base.css @@ -1,7 +1,7 @@ :root, :host, .sl-theme-light { - /** + /* * Color Primitives */ @@ -301,7 +301,7 @@ --sl-color-rose-900: #881337; --sl-color-rose-1000: #4a0d20; - /** + /* * Theme Tokens */ @@ -370,7 +370,7 @@ --sl-color-danger-900: var(--sl-color-red-900); --sl-color-danger-1000: var(--sl-color-red-1000); - /** + /* * Border radius tokens */ @@ -382,7 +382,7 @@ --sl-border-radius-circle: 50%; --sl-border-radius-pill: 9999px; - /** + /* * Elevation tokens */ @@ -392,7 +392,7 @@ --sl-shadow-large: 0 2px 8px #0d131e1a; --sl-shadow-x-large: 0 4px 16px #0d131e1a; - /** + /* * Spacing tokens */ @@ -407,7 +407,7 @@ --sl-spacing-xxx-large: 3rem; /* 48px */ --sl-spacing-xxxx-large: 4.5rem; /* 72px */ - /** + /* * Transition tokens */ @@ -417,7 +417,7 @@ --sl-transition-fast: 150ms; --sl-transition-x-fast: 50ms; - /** + /* * Typography tokens */ @@ -454,7 +454,7 @@ --sl-line-height-normal: 1.8; --sl-line-height-loose: 2.2; - /** + /* * Form tokens */ @@ -531,20 +531,20 @@ /* Toggles (checkboxes, radios, switches) */ --sl-toggle-size: 1rem; - /** + /* * Overlay tokens */ --sl-overlay-background-color: #37415180; - /** + /* * Panels */ --sl-panel-background-color: var(--sl-color-white); --sl-panel-border-color: var(--sl-color-gray-200); - /** + /* * Tooltip tokens */ @@ -559,7 +559,7 @@ --sl-tooltip-arrow-size: 5px; --sl-tooltip-arrow-start-end-offset: 8px; - /** + /* * Z-index tokens */ diff --git a/src/themes/base.ts b/src/themes/base.ts index c06285dbb..fa5f455f6 100644 --- a/src/themes/base.ts +++ b/src/themes/base.ts @@ -1 +1,6 @@ -import '../styles/base.css'; +import { css, unsafeCSS } from 'lit'; +import styles from 'inline:./base.css'; + +export default css` + ${unsafeCSS(styles)} +`; diff --git a/src/styles/dark.css b/src/themes/dark.css similarity index 99% rename from src/styles/dark.css rename to src/themes/dark.css index 183dbe667..9ff9578fd 100644 --- a/src/styles/dark.css +++ b/src/themes/dark.css @@ -1,10 +1,7 @@ -/** - * Dark theme - */ :host, .sl-theme-dark { --sl-color-black: #fff; - --sl-color-white: var(--sl-color-gray-50); + --sl-color-white: var(--sl-color-gray-100); /* Blue Gray */ --sl-color-blue-gray-1000: #f8fafc; diff --git a/src/themes/dark.ts b/src/themes/dark.ts index d73531475..b4247f869 100644 --- a/src/themes/dark.ts +++ b/src/themes/dark.ts @@ -1 +1,6 @@ -import '../styles/dark.css'; +import { css, unsafeCSS } from 'lit'; +import styles from 'inline:./dark.css'; + +export default css` + ${unsafeCSS(styles)} +`;