From 9a5db93745f4d88b7190bc5bf835d2637773d8c7 Mon Sep 17 00:00:00 2001 From: Chris Johnson Date: Fri, 19 Apr 2024 10:31:20 -0400 Subject: [PATCH 1/2] Experiments with postcss processing --- packages/storybook/index.html | 18 +++++++++++++++++- packages/storybook/package.json | 1 + packages/storybook/public/global.css | 4 ++-- packages/storybook/src/another.css | 6 ++++++ packages/storybook/src/global.css | 7 +++++++ packages/storybook/src/index.ts | 8 ++++++-- packages/storybook/vite.config.js | 11 +++++++++++ packages/storybook/yarn.lock | 11 +++++++++++ 8 files changed, 61 insertions(+), 5 deletions(-) create mode 100644 packages/storybook/src/another.css create mode 100644 packages/storybook/src/global.css diff --git a/packages/storybook/index.html b/packages/storybook/index.html index fb877bd..b55f8b1 100644 --- a/packages/storybook/index.html +++ b/packages/storybook/index.html @@ -7,13 +7,29 @@ Component Test Page + + + +

outline-core-link

-

outline-link

+

outline-link must be implemented by the project

Normal a tag link

+

Link with class declaration

diff --git a/packages/storybook/package.json b/packages/storybook/package.json index 183b59a..9ebcdf8 100644 --- a/packages/storybook/package.json +++ b/packages/storybook/package.json @@ -44,6 +44,7 @@ "node": ">=20" }, "dependencies": { + "@phase2/outline-core-link": "^0.0.16", "lit": "^3.1.2" }, "devDependencies": { diff --git a/packages/storybook/public/global.css b/packages/storybook/public/global.css index 2a51a08..7057278 100644 --- a/packages/storybook/public/global.css +++ b/packages/storybook/public/global.css @@ -1,5 +1,5 @@ :root { - --outline-core-link--color: #0000ff; + --outline-core-link--color: #eeff00; --outline-core-link--text-decoration: none; --outline-core-link--color-hover: #808080; --outline-core-link--text-decoration-hover: underline; @@ -14,4 +14,4 @@ body { font-family: Roboto, sans-serif; font-size: 16px; -} +} \ No newline at end of file diff --git a/packages/storybook/src/another.css b/packages/storybook/src/another.css new file mode 100644 index 0000000..4502728 --- /dev/null +++ b/packages/storybook/src/another.css @@ -0,0 +1,6 @@ +/* Second CSS file to demo the need to individually reference them and show they combine on build */ +a { + &.special-link { + font-size: 24pt; + } +} \ No newline at end of file diff --git a/packages/storybook/src/global.css b/packages/storybook/src/global.css new file mode 100644 index 0000000..3501007 --- /dev/null +++ b/packages/storybook/src/global.css @@ -0,0 +1,7 @@ +/* CSS file to demo how one might approach global css that postcss processing is desired on */ +a { + color: purple; + &:visited { + color: green; + } + } \ No newline at end of file diff --git a/packages/storybook/src/index.ts b/packages/storybook/src/index.ts index 6214df1..486d19e 100644 --- a/packages/storybook/src/index.ts +++ b/packages/storybook/src/index.ts @@ -12,7 +12,7 @@ // import { Component2 } from './components/component2'; // import { OutlineAlert } from './components/shared/outline-alert/outline-alert'; import { OutlineExample } from './components/shared/outline-example/outline-example'; -// import { OutlineCoreLink } from '@phase2/outline-core-link'; +import { OutlineCoreLink } from '@phase2/outline-core-link'; // Add more component imports as needed... // Importing specific controllers from the `src/controllers` directory @@ -20,12 +20,16 @@ import { OutlineExample } from './components/shared/outline-example/outline-exam // import { Controller1 } from './controllers/controller1'; // import { Controller2 } from './controllers/controller2'; // Add more controller imports as needed... +// CSS Imports - reference css files here so that they aggregate in style.css in the +// produced package +import './global.css'; +import './another.css'; // Exporting all imported components and controllers for external use export { // OutlineAlert, OutlineExample, - // OutlineCoreLink, + OutlineCoreLink, // Component1, // Component2, // Add more component exports as needed... diff --git a/packages/storybook/vite.config.js b/packages/storybook/vite.config.js index 219b0f9..cf9faad 100644 --- a/packages/storybook/vite.config.js +++ b/packages/storybook/vite.config.js @@ -11,6 +11,17 @@ import ts from 'vite-plugin-ts'; // https://vitejs.dev/config/ export default defineConfig({ + base: './', + plugins: [ts()], + optimizeDeps: { + esbuildOptions: { + tsconfigRaw: { + compilerOptions: { + experimentalDecorators: true, + }, + }, + }, + }, css: { postcss: { plugins: [ diff --git a/packages/storybook/yarn.lock b/packages/storybook/yarn.lock index 1e0a75d..94f399e 100644 --- a/packages/storybook/yarn.lock +++ b/packages/storybook/yarn.lock @@ -2559,6 +2559,16 @@ __metadata: languageName: node linkType: hard +"@phase2/outline-core-link@npm:^0.0.16": + version: 0.0.16 + resolution: "@phase2/outline-core-link@npm:0.0.16" + dependencies: + "@phase2/outline-adopted-stylesheets-controller": "npm:^1.0.4" + lit: "npm:^3.1.2" + checksum: 10c0/ec614c2e53b83caba268789b66797183638a3ee687b0a42386fbdbceff1b0fe4ec6ca6be77afc3ae3b5053c246dedcea97568f152c5c68884c371688ff22e391 + languageName: node + linkType: hard + "@phase2/outline-core@npm:^0.2.7": version: 0.2.7 resolution: "@phase2/outline-core@npm:0.2.7" @@ -2585,6 +2595,7 @@ __metadata: "@phase2/outline-adopted-stylesheets-controller": "npm:^1.0.4" "@phase2/outline-config": "npm:^0.0.14" "@phase2/outline-core-alert": "npm:^0.0.4" + "@phase2/outline-core-link": "npm:^0.0.16" "@phase2/outline-docs": "npm:^0.0.21" "@storybook/addon-essentials": "npm:^7.6.17" "@storybook/addon-links": "npm:^7.6.17" From 0ed03772c9823c9c143274d749b3e5580d95b0e7 Mon Sep 17 00:00:00 2001 From: Chris Johnson Date: Mon, 22 Apr 2024 16:32:46 -0400 Subject: [PATCH 2/2] NT: Show using outline.theme.css --- packages/storybook/src/global.css | 2 +- packages/storybook/src/index.ts | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/storybook/src/global.css b/packages/storybook/src/global.css index 3501007..7593665 100644 --- a/packages/storybook/src/global.css +++ b/packages/storybook/src/global.css @@ -2,6 +2,6 @@ a { color: purple; &:visited { - color: green; + color: var(--brand-secondary); } } \ No newline at end of file diff --git a/packages/storybook/src/index.ts b/packages/storybook/src/index.ts index 486d19e..462dee2 100644 --- a/packages/storybook/src/index.ts +++ b/packages/storybook/src/index.ts @@ -22,6 +22,7 @@ import { OutlineCoreLink } from '@phase2/outline-core-link'; // Add more controller imports as needed... // CSS Imports - reference css files here so that they aggregate in style.css in the // produced package +import '../outline.theme.css'; import './global.css'; import './another.css';