- Fix overscroll util
- Align with Tailwind 3.4.6
- Align
base.css
with Tailwind 3.4.2 - Support named color (ie
text-[red]
generate a color utility) - Skip merging of utilities that contains vendor prefixes
- Actually fix plugin usage in build watch mode
- Align with Tailwind 3.4: https://tailwindcss.com/blog/tailwindcss-v3-4
- Support main dynamic variants (
min-*
,max-*
,has-*
,(group/peer-)data-*
,(group/peer-)aria-*
)
- Fix plugin usage in build watch mode
- Sort defaults to get a stable output
- Internally consider media & supports variant as
atRule
s so that the nesting output is closer to Tailwind - Group selectors with same content. Pre 0.7 this optimization was done by Lightning CSS and esbuild does not support this optimization when minifying
This was here mostly because I wanted to get CSS modules and Tailwind working with esbuild. Now that esbuild support CSS modules, I can remove this coupling and makes this repo easier to re-use in other bundlers. This also mean I'm dropping from this repo features related to build tools, like downwind.transform
, cssModuleToJS
& convertTargets
. The rest of the core downwind object API has also been updated to give more flexibility outside of built-in plugins.
For usage Vite, you can get back the same behaviour by using the builtin support for lightningCSS:
export default defineConfig({
plugins: [downwind()],
css: {
transformer: "lightningcss",
},
build: {
cssMinify: "lightningcss",
},
});
Using the bundler to discover file to scan is the main reason of this fork. But it poses a problem for builds: we need to be sure to have scan every UI files before generating the output.
Previously this was done line in unocss by injecting a placeholder, and inside the "onEnd" callback, replacing it with the generated output. But this mess up with sourcemap and content hashing, and the plugins where doing some hack around this.
To simplify the code, I now delayed the generation the virtual utils module until other files are scanned. But there is no API to be sure every other files is processed, so for now the build is checking at a fixed interval if some work was done in the previous Xms and if not, generate the utils. This interval is configurable and default to 50ms
for the esbuild plugin and 200ms
for the Vite plugin.
This is not perfect, but I think that the cost of waiting few hundred milliseconds in a build is better than having utils not processed and minified like the rest of the CSS files.
There was a involuntary mismatch with Tailwind when applying the important modifier (!
) with a variant, the implementation required to use !hover:font-medium
instead of hover:!font-medium
. This has been changed to match Tailwind syntax.
The read of https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-8/ make me realize the current regex approach was really inefficient: instead of search for "strings" and then for classes inside strings, we should directly grep all patterns that looks like a Tailwind classes, and by having a strict subset on the left border ('"`\s}
), the first character (a-z0-9![-
), the last char (a-z0-9%]
) and the right border ('"`\s:$
), we can get a good ratio of matches. This means that custom utils & shortcuts should be at least 2 chars.
This change uses a lookbehind assertion for the left border, which means that if a playground was made, it would not work with Safari before 16.4.
This new approach also allow for quotes inside custom values, which makes before:content-['hello_world']
& [&[data-selected="true"]]:bg-blue-100
now possible in downwind.
The parser has been modified to parse arbitrary values before modifiers (opacity, line height) so that /
can be used inside arbitrary values. text-[calc(3rem/5)]/[calc(4rem/5)]
is now supported.
And the nice part is that it's also quite fast. When running (mac M1) on 281 tsx files of my production codebase, time running regex went from 90ms
to 13ms
(and 125543 to 33992 candidates). For the total time (init, scan & CSS generation), the time went from 117ms
to 36ms
. The perf update is completely crushed by the 'Interval check' change, but this is nice to see that a new approach with less limitations is also faster!
Align with Tailwind 3.3.3:
- Updated preflight with reset of dialog padding
- Fix gradients implementation
Use exports map
Publish as ESM
Fix TS imports in bundle
Align with Tailwind 3.3:
- Extend default color palette with new 950 shades
- Add line-height modifier support to font-size utilities
- Add support for using variables as arbitrary values without
var(...)
- Added utilities:
hyphens
,from-{position}
,via-{position}
,to-{position}
,list-style-image
,caption-side
,delay-0
,duration-0
,justify-normal
,justify-stretch
,content-normal
,content-stretch
,whitespace-break-spaces
- Add blocklist option to prevent generating unwanted CSS
- Use inset instead of top, right, bottom, and left properties
- Reset all properties when using
line-clamp-none
The main potential breaking change is that gradient steps for arbitrary values can now become position if not detected as a color.
Logical properties & font-variation-settings are currently out of scope.
- Fix generate CLI when output doesn't exist
- Fix: Throw when using invalid rule in
@apply
that was previously scanned
Fix appearance-none
- Fix cssModuleToJS with kebab case classes
- Fix transition rule without DEFAULT
- Fix crash when using arbitrary values for
animate
rule - esbuild plugin: Skip postprocessing when build contains errors to avoid crash
- Fix: Allow
,
in selectors - Fix: Map
_
to spaces in arbitrary properties
- Support Design in devtools in the Vite plugin
- Always group tokens per media query and sort variants with a deterministic order
- Breaking: Change codegen API to include a
DEVTOOLS
mode - esbuild plugin throw instead of adding an error to ensure proper logging to the console (esbuild#2625)
Align with Tailwind 3.2:
- Add
supports-*
andmax-<screen>
dynamic variants - Add
collapse
,place-content-baseline
,place-items-baseline
,content-baseline
,break-keep
,fill-none
&stroke-none
utilities - Support negative values for
outline-offset
utility - Fix some cases for arbitrary variants and handle "arbitrary media" (ex:
[@media(min-width:900px)]:block
)
Other features are not supported, but container queries will probably be added later.
Add scanRegex
option for esbuild plugin
Stable order for arbitrary values of the same rule. It's now based on the string match instead of the scan order
- Use Lightning CSS to print utils in dev. This fixes usage of variants in shortcuts
- Add
configFiles
to Downwind object
Add DownwindError to types
Fix: Support arbitrary variants with >
, *
, +
and ~
esbuild plugin: Fix metafile output (remove map & update cssBundle prop)
Breaking:
- Use flat color palette in theme (i.e.
blue: { 300: "#93c5fd", 400: "#60a5fa" }
->"blue-300": "#93c5fd", "blue-400": "#60a5fa"
) - Theme function requires double quotes and always uses
key.value
syntax (theme(spacing[2.5])
->theme("spacing.2.5")
)
- Parcel CSS -> Lightning CSS
- Sort keys for CSSModuleExports
Bump config-loader
Fix issue with inset-x/y
Add %
to the scan regex
Initial release