Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Documentation notes and questions #7

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Documentation notes and questions #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9a5db93
Experiments with postcss processing
tekante Apr 19, 2024
0ed0377
NT: Show using outline.theme.css
tekante Apr 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 17 additions & 1 deletion packages/storybook/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,29 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Component Test Page</title>
<script src="/src/index.ts" type="module"></script>
<!--
the following file is public/global.css, it will not have postcss processing
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Determined this experimentally. Even if referenced in src/index.ts it did not appear to be getting processed during a yarn watch:vite. If referenced by src/index.ts yarn build results in the contents of public/global.css being processed by postcss and put in dist/style.css but dist/global.css was not processed and just copied as is.

run on it and will be copied as is into the dist directory upon a build.
-->
<link rel="stylesheet" href="/global.css" />
<!--
the following files have to be referenced individually for development but roll up into a single style.css
file in the built package, see comments in src/index.ts for more info and to control the files bundled.
These files are processed by postcss.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It may not be true that these need to be referenced here as long as they are imported in src/index.ts based on my latest testing. I think it would be good to mention in this file that style.css does need to be included by normal consumers (assuming that is true and dist/index.js isn't going to also import style.css).

-- need to validate this statement as chrome and safari seem like they may handle them the same. The files
-- through vite definitely look like javascript
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here is what src/another.css looks like when accessed through the browser while yarn watch:vite is running:

import { createHotContext as __vite__createHotContext } from "/@vite/client";import.meta.hot = __vite__createHotContext("/src/another.css");import { updateStyle as __vite__updateStyle, removeStyle as __vite__removeStyle } from "/@vite/client"
const __vite__id = "/Users/cjohnson/Projects/phase2/outline-templates/packages/storybook/src/another.css"
const __vite__css = "a.special-link{\n    font-size:24pt;\n  }"
__vite__updateStyle(__vite__id, __vite__css)
import.meta.hot.accept()
import.meta.hot.prune(() => __vite__removeStyle(__vite__id))

These also need to be referenced as javascript files instead of as css files because of vite's wrapping of them.
-->
<script src="/src/global.css" type="module" /></script>
<script src="/src/another.css" type="module" /></script>
</head>

<body>
<p><outline-core-link><a href="https://github.com/phase2/outline">outline-core-link</a></outline-core-link></p>
<p><outline-link><a href="https://github.com/phase2/outline">outline-link</a></outline-link></p>
<p><outline-link><a href="https://github.com/phase2/outline">outline-link must be implemented by the project</a></outline-link></p>
<p><a href="https://github.com/phase2/outline">Normal a tag link</a></p>
<p><a href="https://no.such.domain.to.demo.difference.in.visited.psuedo.class/" class="special-link">Link with class declaration</a></p>
</body>

</html>
1 change: 1 addition & 0 deletions packages/storybook/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"node": ">=20"
},
"dependencies": {
"@phase2/outline-core-link": "^0.0.16",
"lit": "^3.1.2"
},
"devDependencies": {
Expand Down
4 changes: 2 additions & 2 deletions packages/storybook/public/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand All @@ -14,4 +14,4 @@
body {
font-family: Roboto, sans-serif;
font-size: 16px;
}
}
6 changes: 6 additions & 0 deletions packages/storybook/src/another.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}
}
7 changes: 7 additions & 0 deletions packages/storybook/src/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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: var(--brand-secondary);
}
}
9 changes: 7 additions & 2 deletions packages/storybook/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,20 +12,25 @@
// 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
// import { AdoptedStylesheets } from '@phase2/outline-adopted-stylesheets-controller';
// 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
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the comment the comment above the references for these files in packages/storybook/index.html is pointing people at. Helps document how files are aggregated (or not if they aren't referenced).

// produced package
import '../outline.theme.css';
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added to show use of outline.theme.css vars which src/global.css references

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...
Expand Down
11 changes: 11 additions & 0 deletions packages/storybook/vite.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,17 @@ import ts from 'vite-plugin-ts';

// https://vitejs.dev/config/
export default defineConfig({
base: './',
plugins: [ts()],
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need this to avoid errors like the following on yarn build when using outline-core-link

error during build:
RollupError: Expression expected
    at getRollupEror (file:///Users/cjohnson/Projects/phase2/outline-templates/packages/storybook/node_modules/vite/node_modules/rollup/dist/es/shared/parseAst.js:375:41)
    at ParseError.initialise (file:///Users/cjohnson/Projects/phase2/outline-templates/packages/storybook/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:11155:28)
    at convertNode (file:///Users/cjohnson/Projects/phase2/outline-templates/packages/storybook/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:12895:10)
    at convertProgram (file:///Users/cjohnson/Projects/phase2/outline-templates/packages/storybook/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:12215:12)
    at Module.setSource (file:///Users/cjohnson/Projects/phase2/outline-templates/packages/storybook/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:14039:24)
    at async ModuleLoader.addModuleSource (file:///Users/cjohnson/Projects/phase2/outline-templates/packages/storybook/node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:18697:13)

optimizeDeps: {
esbuildOptions: {
tsconfigRaw: {
compilerOptions: {
experimentalDecorators: true,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need this to avoid errors like the following on yarn watch:vite when using outline-core-link.

✘ [ERROR] Transforming JavaScript decorators to the configured target environment ("chrome87", "edge88", "es2020", "firefox78", "safari14" + 2 overrides) is not supported yet

    node_modules/@phase2/outline-core-link/src/outline-core-link.ts:49:2:
      49 │   @property({ type: String, attribute: 'link-href' })
         ╵   ^

},
},
},
},
css: {
postcss: {
plugins: [
Expand Down
11 changes: 11 additions & 0 deletions packages/storybook/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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"
Expand Down