aanckar / react-pdf-tailwind Goto Github PK

View Code? Open in Web Editor NEW

292.0 292.0 10.0 287 KB

Use Tailwind CSS to style PDFs created with react-pdf

TypeScript 100.00%

pdf pdf-generation react tailwindcss

react-pdf-tailwind's People

Contributors

Stargazers

Watchers

Forkers

mats-larsen chrissantamaria gustaverw hwb15 marcelmalik fizipan asilbec tlennon140 davalv713

react-pdf-tailwind's Issues

vite.js sample project with packages updated to the latest verion raised error "Uncaught ReferenceError: process is not defined"

Greetings,

Firstly, I would like to commend you on the excellent library that you have created.
However, I have encountered an issue while updating my project and the Vite.js example to the latest version using the command pnpm update --latest.

The issue arises when running the Vite.js project, and the error message states that sharedState.js:30 Uncaught ReferenceError: process is not defined. The error seems to be originating from ../../node_modules/.pnpm/[email protected][email protected]/node_modules/tailwindcss/lib/lib/sharedState.js.

Build issue

Hi!

I'm trying to change up the way the createTw module is exported so I can use it within the react-pdf-repl although can't seem to get a build done?

Getting the following issue, any ideas would be much appreciated?

src/index.ts → dist/index.js, dist/index.mjs... [!] (plugin esbuild) Error: Transform failed with 1 error: /Users/user/Code/react-pdf-tailwind/node_modules/esbuild/lib/main.js:244:12: ERROR: Invalid option in transform() call: "bundle"

ERROR in ./node_modules/react-pdf-tailwind/dist/index.mjs

ERROR in ./node_modules/react-pdf-tailwind/dist/index.mjs 1:0-54 Module not found: Error: Can't resolve 'tailwindcss/resolveConfig' in 'C:\Users\Baghdad\Desktop\resume\node_modules\react-pdf-tailwind\dist' Did you mean 'resolveConfig.js'? BREAKING CHANGE: The request 'tailwindcss/resolveConfig' failed to resolve only because it was resolved as fully specified (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"'). The extension in the request is mandatory for it to be fully specified. Add the extension to the request.

Warn when invalid strings are passed

I find myself occasionally passing invalid strings to the main tw function, resulting in a functional noop of no styles being applied. My current debugging approach is generally to log the tw output and ensure I'm getting back the style object I'm expecting.

It might be nice if this library could somehow indicate to consumers (either via console.warn or a thrown error) that one/many of the classes provided are invalid. Normal web-based Tailwind contexts can't normally do this since non-Tailwind classes could be passed to class attributes, but given that input strings to tw should all be valid we could be a bit more strict.

Open to thoughts on how/when these sorts of warnings should be provided. If this feels out of scope of this library, no worries - happy to implement in my own fork :)

The flex property doesn't work as expected

The "flex" property in tailwind is supposed to give the row layout by default, with this package, we have to extra specify "flex-row" property to have the row layout.

Font size generates an invalid unit for react-pdf

Hi there,

Great library!

One issue I have noticed is when using, for example, text-9xl, this generates

<html><body><p style="font-family:IBMPlexSans;font-size:96px;line-height:1;font-weight:700">15855</p></body></html>

But this does not render in a 9xl size as px is not a supported unit for react-pdf.

Reference to file tailwindcss/resolveConfig

Hello, i got this error :

i'm using symfony ux-react, with webpack-encore.

I'm maybe missing some configuration somewhere :'(

Here are some files that may be interesting to help me:

tailwind.config.js

postcss.config.js

webpack.config.js

Invalid class `justify-stretch`

The class justify-stretch is not recognized, but as far as I can tell, justifyContent: stretch is supported in react-pdf.
Using it results in the following warning:

react-pdf-tailwind: Invalid class "justify-stretch"

Tailwind documentation: https://tailwindcss.com/docs/justify-content#stretch

Does not seem to support tailwindcss-radix-colors plugin

When I add tailwindcss-radix-colors plugin to my config and use the radix color classes e.g. bg-blue-1, I get an error:

react-pdf-tailwind: Invalid class "bg-blue-1"

Library supports generation of invalid `react-pdf` styles

It seems like strings such as block are supported and will generate styles like { display: 'block' } despite these not being supported by react-pdf. This might lead to confusion for consumers as well as accidental style incompatibilities like in #5.

One way to fix this would be to import the Style type directly from @react-pdf/types to replace the current StyleSheet type, enforcing that all styles in definition maps like exactUtilities or utilityPatterns are valid. This doesn't catch all possible errors (such as those from dynamically generated classes), but it should be a good starting point.

Full tsc output with basic approach implemented

src/index.ts(8,12): error TS2322: Type '"block"' is not assignable to type '"none" | "flex"'.
src/index.ts(9,21): error TS2322: Type '"inline-block"' is not assignable to type '"none" | "flex"'.
src/index.ts(10,13): error TS2322: Type '"inline"' is not assignable to type '"none" | "flex"'.
src/index.ts(12,20): error TS2322: Type '"inline-flex"' is not assignable to type '"none" | "flex"'.
src/index.ts(19,22): error TS2322: Type '"auto"' is not assignable to type '"hidden"'.
src/index.ts(21,22): error TS2322: Type '"clip"' is not assignable to type '"hidden"'.
src/index.ts(22,25): error TS2322: Type '"visible"' is not assignable to type '"hidden"'.
src/index.ts(23,24): error TS2322: Type '"scroll"' is not assignable to type '"hidden"'.
src/index.ts(24,24): error TS2322: Type '{ overflowX: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'overflowX' does not exist in type 'Style'. Did you mean to write 'overflow'?
src/index.ts(25,24): error TS2322: Type '{ overflowY: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'overflowY' does not exist in type 'Style'. Did you mean to write 'overflow'?
src/index.ts(26,26): error TS2322: Type '{ overflowX: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'overflowX' does not exist in type 'Style'. Did you mean to write 'overflow'?
src/index.ts(27,26): error TS2322: Type '{ overflowY: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'overflowY' does not exist in type 'Style'. Did you mean to write 'overflow'?
src/index.ts(28,24): error TS2322: Type '{ overflowX: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'overflowX' does not exist in type 'Style'. Did you mean to write 'overflow'?
src/index.ts(29,24): error TS2322: Type '{ overflowY: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'overflowY' does not exist in type 'Style'. Did you mean to write 'overflow'?
src/index.ts(30,27): error TS2322: Type '{ overflowX: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'overflowX' does not exist in type 'Style'. Did you mean to write 'overflow'?
src/index.ts(31,27): error TS2322: Type '{ overflowY: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'overflowY' does not exist in type 'Style'. Did you mean to write 'overflow'?
src/index.ts(32,26): error TS2322: Type '{ overflowX: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'overflowX' does not exist in type 'Style'. Did you mean to write 'overflow'?
src/index.ts(33,26): error TS2322: Type '{ overflowY: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'overflowY' does not exist in type 'Style'. Did you mean to write 'overflow'?
src/index.ts(34,13): error TS2322: Type '"static"' is not assignable to type '"absolute" | "relative"'.
src/index.ts(35,12): error TS2322: Type '"fixed"' is not assignable to type '"absolute" | "relative"'.
src/index.ts(65,23): error TS2322: Type '"space-evenly"' is not assignable to type '"flex-start" | "flex-end" | "center" | "stretch" | "space-between" | "space-around"'.
src/index.ts(84,16): error TS2322: Type '{ textDecorationLine: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'textDecorationLine' does not exist in type 'Style'. Did you mean to write 'textDecorationStyle'?
src/index.ts(85,15): error TS2322: Type '{ textDecorationLine: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'textDecorationLine' does not exist in type 'Style'. Did you mean to write 'textDecorationStyle'?
src/index.ts(91,21): error TS2322: Type '{ textDecorationLine: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'textDecorationLine' does not exist in type 'Style'. Did you mean to write 'textDecorationStyle'?
src/index.ts(92,21): error TS2322: Type '{ textDecorationLine: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, but 'textDecorationLine' does not exist in type 'Style'. Did you mean to write 'textDecorationStyle'?
src/index.ts(96,20): error TS2322: Type '"none"' is not assignable to type '"capitalize" | "lowercase" | "uppercase"'.
src/index.ts(100,5): error TS2322: Type '{ overflow: "hidden"; textOverflow: "ellipsis"; whiteSpace: string; }' is not assignable to type 'Style'.
  Object literal may only specify known properties, and 'whiteSpace' does not exist in type 'Style'.
src/index.ts(103,18): error TS2322: Type '"clip"' is not assignable to type '"ellipsis"'.
src/index.ts(112,22): error TS2322: Type '"double"' is not assignable to type '"dashed" | "dotted" | "solid"'.
src/index.ts(113,22): error TS2322: Type '"hidden"' is not assignable to type '"dashed" | "dotted" | "solid"'.
src/index.ts(114,20): error TS2322: Type '"none"' is not assignable to type '"dashed" | "dotted" | "solid"'.
src/index.ts(132,3): error TS2820: Type '"order"' is not assignable to type 'keyof Style | [keyof Style, keyof Style | (keyof Style)[]]'. Did you mean '"border"'?

If this seems like a reasonable approach I'm happy to open a PR with my local changes.

`tsc` fails due to missing Node/DOM library

When trying to build the library locally or explicitly run tsc, a type error is reported:

pnpm tsc
src/index.ts:367:11 - error TS2584: Cannot find name 'console'. Do you need to change your target library? Try changing the 'lib' compiler option to include 'dom'.

367           console.warn(`Property ${property} does not support negative values`);
              ~~~~~~~


Found 1 error in src/index.ts:367

This makes sense, as the type definitions for console would have to come from a platform-specific library. Some options I see are:

use Node bindings by adding @types/node (as I've done on my fork)
use DOM bindings by adding DOM to compilerOptions.lib in tsconfig.json
manually // @ts-expect-error (not ideal)

imo option 1 seems the easiest, though it does implicitly suggest that this library should be used primarily in a Node context rather than web (which afaik it technically should)

Happy to open a PR with whatever approach makes the most sense :)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.

Jobs

Jooble