stormwarning / tailwindcss-capsize Goto Github PK

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• Update actions/cache action to v3.3.3
• Update actions/setup-node action to v3.8.2
• Update eslint to v8.57.0
• Update vitest to v1.6.0
• Update @capsizecss/core to v4
• Update actions/cache action to v4
• Update actions/checkout action to v4
• Update actions/setup-node action to v4
• Update eslint to v9
• Update husky to v9
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

When font-size is set in fractions of pixels, precision loss happens in normaliseValue function, which enforces integers on px values via usage of parseInt. Therefore value of actualPixels is always with loss of precision.

Trying to pass a custom option into the plugin gives a require(...) is not a function error. It works in the test though... 😓

I love the idea for this plugin but unfortunately it throws errors during build in JIT mode.

ERROR in ./resources/styles/app.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
TypeError: plugin is not a function
    at registerPlugins (/Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js:540:7)
    at createContext (/Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js:583:3)
    at getContext (/Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js:644:17)
    at /Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/tailwindcss/lib/jit/lib/setupTrackingContext.js:177:57
    at /Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/tailwindcss/lib/jit/processTailwindFeatures.js:54:7
    at /Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/tailwindcss/lib/jit/index.js:25:56
    at LazyResult.runOnRoot (/Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/postcss/lib/lazy-result.js:333:16)
    at LazyResult.runAsync (/Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/postcss/lib/lazy-result.js:385:26)
    at LazyResult.async (/Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/postcss/lib/lazy-result.js:215:30)
    at LazyResult.then (/Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/postcss/lib/lazy-result.js:200:17)
    at processResult (/Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/webpack/lib/NormalModule.js:700:19)
    at /Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/webpack/lib/NormalModule.js:806:5
    at /Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/loader-runner/lib/LoaderRunner.js:399:11
    at /Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/loader-runner/lib/LoaderRunner.js:251:18
    at context.callback (/Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at Object.loader (/Users/christianmagill/Code/Sites/site/wp-content/themes/site/node_modules/postcss-loader/dist/index.js:96:7)

Here's my config... If I remove Capsize compilation works.

module.exports = {
  // mode: 'jit',
  purge: {
    content: [
      './app/**/*.php',
      './resources/**/*.{php,vue,js}',
    ],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    fontFamily: {
      sans: ['Inter', 'sans-serif'],
    },
    fontMetrics: {
      sans: {
        capHeight: 2048,
        ascent: 2728,
        descent: -680,
        lineGap: 0,
        unitsPerEm: 2816,
      },
    },
    aspectRatio: {
      none: 0,
      square: [1, 1],
      "16/9": [16, 9],
      "4/3": [4, 3],
      "21/9": [21, 9],
    },
    extend: {
      colors: {},
    },
  },
  variants: {
    aspectRatio: ['responsive'],
    extend: {},
  },
  plugins: [
    // require('@tailwindcss/typography'),
    // require('@tailwindcss/aspect-ratio'), // https://github.com/tailwindlabs/tailwindcss-aspect-ratio
    // require('tailwindcss-skip-link')(), // https://github.com/opdavies/tailwindcss-plugin-skip-link
    // require('tailwindcss-debug-screens'), // https://github.com/jorenvanhee/tailwindcss-debug-screens
    // require('tailwindcss-elevation')(['responsive']), // https://github.com/jonaskay/tailwindcss-elevation
    // require('@tailwindcss/line-clamp'), // https://github.com/tailwindlabs/tailwindcss-line-clamp
    require('tailwindcss-capsize'), // https://github.com/stormwarning/tailwindcss-capsize
  ],
};

Need to account for fontSize values like [ '0.75rem', { lineHeight: '1rem' } ] when normalising values.

I have been using this awesome library in a few projects, but there's always been one minor 'imperfection' I started to accept as a trade-off and for which there might be a solution.

For the default font weight, the metrics are pixel perfect. However, when the font becomes thinner or thicker, the capsize measurements for the normal font weight remain applied, instead of being able to adjust to this change. When font is bold, it's usually a bit taller, and vice versa.

Is this feasible to achieve? Could we potentially pass different font metrics for every font weight or be able to compute these based on a specific parameter and keep the changes in the config minimal? Not sure whether there's any sort of relativeness between font weights, or whether we would need unique measurements for each.

The whole idea appears to be very similar (at least I hope it is!) to how the capsize class already adjusts the spacing based on the font size.

Thank you for your work, it made transforming the designs into UIs using TailwindCSS much more predictable 💙

I am exploring some approaches to responisve typography, and I am trying to use tricks like

.rescale-from-rem {
  font-size: calc(100% / 1.428);
}

.autoscaled-base {
  font-size: calc(1rem / 4 * 8);
}

Which results in

--font-size-px: NaN

I am not sure, what is going on here. Is implementation somehow reliant on pixel values?

Use something besides .capsize if preferred.

Or even better would be to figure out a way to translate those values to px.

The --font-size-px CSS custom property gets returned after being run through TailwindCSS's internals as a pixel value.

This creates an issue with the various CSS calcs that use the --font-size-px CSS custom property since certain units cannot be mixed (addition + and subtraction - in this use case).

This happens because the fontSizeActual variable in the plugin.ts file is passed as a number and postcss-js (which TailwindCSS uses under the hood to parse plugins) converts this to a pixel value as is common behaviour with most CSS-in-JS solutions.

I've created a pull request (#128) that solves this issue by wrapping fontSizeActual with String() and edited the tests to check that the values for --font-size-px are truly flat values (i.e. --font-size-px: 16;, not --font-size-px: 16px;).

Separately I want to thank @stormwarning for releasing v3.0.0 - this update has vastly improved the size of my CSS files when working with themes that utilize many font sizes and line heights.

I'm considering removing the classic mode that allows this plugin to work with older versions of Tailwind.

Since the latest (and likely any future) version of Tailwind uses JIT and doesn't allow the older method of building all the styles at once, I can remove a bunch of code and ensure tests can run against the latest version. Officially, the latest version will be supported, but Tailwind v2 in JIT mode should continue to work as well.

I recently switch to having a tailwind.config.ts (because you can) and i noticed that this plugin throws an error because types are not correctly generated:

The index.d.ts generated as the main type location specified by the package.json lacks any type definitions.

First of all, I want to thank you for the great extension.

https://stackblitz.com/edit/vitejs-vite-rp4tjk?file=tailwind.config.js - if you comment out line 18, the font-weight of the text becomes 700, as it should be. If left as is, font-weight will be lost even if the capsize class is not applied to the element.

As per this issue: seek-oss/capsize#26 (comment)