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

Jump to bottom

Stylings of Patterns Not Applied in Landing Page #1376

Closed
1 task
janivo opened this issue Apr 11, 2024 · 0 comments · Fixed by #1377
Closed
1 task

Stylings of Patterns Not Applied in Landing Page #1376

janivo opened this issue Apr 11, 2024 · 0 comments · Fixed by #1377
Assignees
@janivo

Comments

@janivo
Copy link
Collaborator

janivo commented Apr 11, 2024 •
edited
Loading

Context

It seems that there is an issue where the stylings of patterns displayed on our landing page are not being applied correctly. Upon investigation, it seems that this issue has persisted since the introduction of the Vite executors in the ui-patterns package.

It seems also to be related to tailwind. See this warning:

> nx run ui-patterns:build

vite v5.0.13 building for production...
transforming (8) src/patterns/my-pattern-a/MyPatternA.tsx
warn - The `content` option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - https://tailwindcss.com/docs/content-configuration
✓ 27 modules transformed.

[vite:dts] Start generate declaration files...
computing gzip size (2)...[vite:dts] Declaration files built in 367ms.

dist/style.css      4.50 kB │ gzip:   1.35 kB
dist/html.js       16.80 kB │ gzip:   3.44 kB
dist/index.js   1,080.88 kB │ gzip: 786.68 kB
✓ built in 772ms

Acceptance Criteria

  • A solution is implemented to resolve the styling issue and ensure that patterns are displayed correctly on the landing page.

Additional Notes

Image
@github-actions github-actions bot added the new This issue has been recently added and has no estimation label Apr 11, 2024
@janivo janivo removed the new This issue has been recently added and has no estimation label Apr 11, 2024
@janivo janivo self-assigned this Apr 11, 2024
@janivo janivo mentioned this issue Apr 11, 2024
Merged
janivo added a commit that referenced this issue Apr 11, 2024
@janivo
fix(ui-patterns): tailwind styles not being integrated (#1377)
755bad0 
Closes #1376 

## Proposed Changes

- Move all dependencies to prevent version mismatches
- Activate caching for `vite build`
- Point `postcss.config.js` to the proper `tailwind.config.js`

## Context

The issue arose from the inability of postcss.config.js to locate any
tailwind.config.js file for processing. This was due to its expectation
for tailwind.config.js to be located directly adjacent to it. Although
the tailwind configuration file was correctly positioned, the
introduction of Vite executors caused a change in the execution context,
resulting in it being executed from our root directory where
tailwind.config.js was not present.

```
// before introduction of vite executors
$ packages/ui-patterns > vite build // context -> packages/ui-patterns

// after introduction of vite executors
$ / > nx vite:build ui-patterns // context -> /
```

To resolve this issue, we need to utilize appropriate file paths within
postcss.config.js to correctly reference the location of
tailwind.config.js.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@janivo janivo

Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(ui-patterns): tailwind styles not being integrated inovex/elements
1 participant
@janivo