68 Commits

Author SHA1 Message Date
Philipp Spiess
b01ff53f2a
Vite: Support Tailwind in Vue <style> blocks (#14158)
This PR adds support to transforming `<style>` blocks emitted by Vue
components with tailwindcss when the `@tailwindcss/vite` is used.

Example:

```vue
<style>
  @import 'tailwindcss/utilities';
  @import 'tailwindcss/theme' theme(reference);
  .foo {
    @apply text-red-500;
  }
</style>
<template>
 <div class="underline foo">Hello Vue!</div>
</template>
```

Additionally, this PR also adds an integration test.

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2024-08-09 12:41:58 +02:00
Philipp Spiess
921b4b673b
Use import to load plugins (#14132)
Alternative to #14110

This PR changes the way how we load plugins to be compatible with ES6
async `import`s. This allows us to load plugins even inside the browser
but it comes at a downside: We now have to change the `compile` API to
return a `Promise`...

So most of this PR is rewriting all of the call sites of `compile` to
expect a promise instead of the object.

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2024-08-08 11:49:06 -04:00
Philipp Spiess
af2e69959d
Add test.debug to integration tests (#14133)
While working on #14078, there were a couple of debugging techniques
that we were using quite frequently:

- Being able to `cd` into the test setup
- Seeing the stdio and stdout data in real-time (this currently requires
us to mark a test as failing)
- Checking the exact commands that are being run

Since we naturally worked around this quite often, I decided to make
this a first-level API with the introduction of a new `test.debug` flag.
When set, it will:

- Create the test setup in the project dir within a new `.debug` folder
and won't delete it after the run. Having it in an explicit folder
allows us to easily delete it manually when we need to.
- Logs all run commands to the console (`>` for a sync call, `>&` for a
spawned process)
- Logs stdio and stderr to the console in real time.
- Run the test as `.only`

<img width="2267" alt="Screenshot 2024-08-06 at 13 19 49"
src="https://github.com/user-attachments/assets/1b204ac2-feee-489e-9cd8-edf73c0f2abd">

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2024-08-08 12:02:19 +02:00
Robin Malfait
541d84a3bb
Add @source support (#14078)
This PR is an umbrella PR where we will add support for the new
`@source` directive. This will allow you to add explicit content glob
patterns if you want to look for Tailwind classes in other files that
are not automatically detected yet.

Right now this is an addition to the existing auto content detection
that is automatically enabled in the `@tailwindcss/postcss` and
`@tailwindcss/cli` packages. The `@tailwindcss/vite` package doesn't use
the auto content detection, but uses the module graph instead.

From an API perspective there is not a lot going on. There are only a
few things that you have to know when using the `@source` directive, and
you probably already know the rules:

1. You can use multiple `@source` directives if you want.
2. The `@source` accepts a glob pattern so that you can match multiple
files at once
3. The pattern is relative to the current file you are in
4. The pattern includes all files it is matching, even git ignored files
1. The motivation for this is so that you can explicitly point to a
`node_modules` folder if you want to look at `node_modules` for whatever
reason.
6. Right now we don't support negative globs (starting with a `!`) yet,
that will be available in the near future.

Usage example:

```css
/* ./src/input.css */
@import "tailwindcss";
@source "../laravel/resources/views/**/*.blade.php";
@source "../../packages/monorepo-package/**/*.js";
```

It looks like the PR introduced a lot of changes, but this is a side
effect of all the other plumbing work we had to do to make this work.
For example:

1. We added dedicated integration tests that run on Linux and Windows in
CI (just to make sure that all the `path` logic is correct)
2. We Have to make sure that the glob patterns are always correct even
if you are using `@import` in your CSS and use `@source` in an imported
file. This is because we receive the flattened CSS contents where all
`@import`s are inlined.
3. We have to make sure that we also listen for changes in the files
that match any of these patterns and trigger a rebuild.

PRs:

- [x] https://github.com/tailwindlabs/tailwindcss/pull/14063
- [x] https://github.com/tailwindlabs/tailwindcss/pull/14085
- [x] https://github.com/tailwindlabs/tailwindcss/pull/14079
- [x] https://github.com/tailwindlabs/tailwindcss/pull/14067
- [x] https://github.com/tailwindlabs/tailwindcss/pull/14076
- [x] https://github.com/tailwindlabs/tailwindcss/pull/14080
- [x] https://github.com/tailwindlabs/tailwindcss/pull/14127
- [x] https://github.com/tailwindlabs/tailwindcss/pull/14135

Once all the PRs are merged, then this umbrella PR can be merged. 

> [!IMPORTANT]  
> Make sure to merge this without rebasing such that each individual PR
ends up on the main branch.

---------

Co-authored-by: Philipp Spiess <hello@philippspiess.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Adam Wathan <adam.wathan@gmail.com>
2024-08-07 16:38:44 +02:00
Philipp Spiess
27912f9bb5
Add integration test setup and tests for the Vite integration (#14089)
This PR adds a new root `/integrations` folder that will be the home of
integration tests. The idea of these tests is to use Tailwind in various
setups just like our users would (by only using the publishable npm
builds).

To avoid issues with concurrent tests making changes to the file system,
to make it very easy to test through a range of versions, and to avoid
changing configuration objects over and over in test runs, we decided to
inline the scaffolding completely into the test file and have no
examples checked into the repo.

Here's an example of how this can look like for a simple Vite test:

```ts
test('works with production builds', {
    fs: {
      'package.json': json`
        {
          "type": "module",
          "dependencies": {
            "@tailwindcss/vite": "workspace:^",
            "tailwindcss": "workspace:^"
          },
          "devDependencies": {
            "vite": "^5.3.5"
          }
        }
      `,
      'vite.config.ts': ts`
        import tailwindcss from '@tailwindcss/vite'
        import { defineConfig } from 'vite'

        export default defineConfig({
          build: { cssMinify: false },
          plugins: [tailwindcss()],
        })
      `,
      'index.html': html`
        <head>
          <link rel="stylesheet" href="./src/index.css">
        </head>
        <body>
          <div class="underline m-2">Hello, world!</div>
        </body>
      `,
      'src/index.css': css`
        @import 'tailwindcss/theme' reference;
        @import 'tailwindcss/utilities';
      `,
    },
  },
  async ({ fs, exec }) => {
    await exec('pnpm vite build')

    expect.assertions(2)
    for (let [path, content] of await fs.glob('dist/**/*.css')) {
      expect(path).toMatch(/\.css$/)
      expect(stripTailwindComment(content)).toMatchInlineSnapshot(
        `
        ".m-2 {
          margin: var(--spacing-2, .5rem);
        }

        .underline {
          text-decoration-line: underline;
        }"
      `,
      )
    }
  },
)
```

By defining all dependencies this way, we never have to worry about
which fixtures are checked in and can more easily describe changes to
the setup.

For ergonomics, we've also added the [`embed` prettier
plugin](https://github.com/Sec-ant/prettier-plugin-embed). This will
mean that files inlined in the `fs` setup are properly indented. No
extra work needed!

If you're using VS Code, I can also recommend the [Language
Literals](https://marketplace.visualstudio.com/items?itemName=sissel.language-literals)
extension so that syntax highlighting also _just works_.

A neat feature of inlining the scaffolding like this is to make it very
simple to test through a variety of versions. For example, here's how we
can set up a test against Vite 5 and Vite 4:

```js
;['^4.5.3', '^5.3.5'].forEach(viteVersion => {
    test(`works with production builds for Vite ${viteVersion}`, {
      fs: {
        'package.json': json`
          {
            "type": "module",
            "devDependencies": {
              "vite": "${viteVersion}"
            }
          }
        `,
    async () => {
      // Do something
    },
  )
})
```

## Philosophy

Before we dive into the specifics, I want to clearly state the design
considerations we have chosen for this new test suite:

- All file mutations should be done in temp folders, nothing should ever
mess with your working directory
- Windows as a first-class citizen
- Have a clean and simple API that describes the test setup only using
public APIs
- Focus on reliability (make sure cleanup scripts work and are tolerant
to various error scenarios)
- If a user reports an issue with a specific configuration, we want to
be able to reproduce them with integration tests, no matter how obscure
the setup (this means the test need to be in control of most of the
variables)
- Tests should be reasonably fast (obviously this depends on the
integration. If we use a slow build tool, we can't magically speed it
up, but our overhead should be minimal).

## How it works

The current implementation provides a custom `test` helper function
that, when used, sets up the environment according to the configuration.
It'll create a new temporary directory and create all files, ensuring
things like proper `\r\n` line endings on Windows.

We do have to patch the `package.json` specifically, since we can not
use public versions of the tailwindcss packages as we want to be able to
test against a development build. To make this happen, every `pnpm
build` run now creates tarballs of the npm modules (that contain only
the files that would also in the published build). We then patch the
`package.json` to rewrite `workspace:^` versions to link to those
tarballs. We found this to work reliably on Windows and macOS as well as
being fast enough to not cause any issues. Furthermore we also decided
to use `pnpm` as the version manager for integration tests because of
it's global module cache (so installing `vite` is fast as soon as you
installed it once).

The test function will receive a few utilities that it can use to more
easily interact with the temp dir. One example is a `fs.glob` function
that you can use to easily find files in eventual `dist/` directories or
helpers around `spawn` and `exec` that make sure that processes are
cleaned up correctly.

Because we use tarballs from our build dependencies, working on changes
requires a workflow where you run `pnpm build` before running `pnpm
test:integrations`. However it also means we can run clients like our
CLI client with no additional overhead—just install the dependency like
any user would and set up your test cases this way.

## Test plan

This PR also includes two Vite specific integration tests: One testing a
static build (`pnpm vite build`) and one a dev mode build (`pnpm vite
dev`) that also makes changes to the file system and asserts that the
resources properly update.

---------

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2024-08-02 11:50:49 +02:00
Robin Malfait
32cf8aa0fb
remove v3 codebase 2024-03-05 13:29:12 +01:00
Jordan Pittman
8e4ed70585 Fix crash when watching renamed files on FreeBSD (#12193)
* Fix file watching bug when renaming files on FreeBSD

* Update changelog

* Add delay to test

* Bump delay

* Update test
2023-10-23 15:48:54 -04:00
Robin Malfait
bd0497fc5d
Drop support for Node.js v12 (#11089)
* bump `postcss-load-config` in the oxide engine

* bump `postcss-load-config` in the stable engine

* update changelog

* Switch to stable

* Update Node to v14

* Update to latest dependency versions

* Update test helper for new version of `rimraf`

Co-Authored-By: Jordan Pittman <jordan@cryptica.me>

* Downgrade `lightningcss` to `v1.18.0`

Co-Authored-By: Jordan Pittman <jordan@cryptica.me>

* Switch back to oxide

* Update Github actions from Node 12 to Node 14

* Update oxide dependencies

* Update stable dependencies

* Update `content-resolution` integration test dependencies

* Update `postcss-cli` integration test dependencies

* Update `rollup` integration test dependencies

* Update `rollup-sass` integration test dependencies

* Update `vite` integration test dependencies

* Update `webpack-5` integration test dependencies

* Update changelog

* Remove `color-name` dependency

* Replace `quick-lru` dependency with `@alloc/quick-lru`

* Replace `quick-lru` dependency with `@alloc/quick-lru` in stable

* Fix standalone CLI test

---------

Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2023-04-25 16:28:20 -04:00
Robin Malfait
72bc31867b
Replace __OXIDE__ at build time to prevent @tailwindcss/oxide leaks in the stable engine (#10988)
* replace `env.OXIDE` with global `__OXIDE__`

This will allow us to replace the `__OXIDE__` at build time, and fully
remove the branches from the final code so that there is not even any
reference to `@tailwindcss/oxide` on the stable engine.

* update changelog

* use `env.ENGINE` in integration tests

* drop oxide branching for the PostCSS plugin for now

This is currently a redirect to the same file, so doesn't hurt.

* Enable better dead-code elimination

* Update CLI tests

Fix indentation

* Fix indentation

---------

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2023-04-18 12:19:20 +02:00
Robin Malfait
a785c93b54
Try resolving config.default before config to ensure the config file is resolved correctly (#10898)
* try to use `config.default` before using `config`

* update changelog

* add quick `SHOW_OUTPUT` toggle for integration tests

Setting this to `true` shows the output of the executed commands.

* add integration tests for `tailwind.config.ts` and `tailwind.config.js` with ESM syntax
2023-03-29 16:52:22 +02:00
depfu[bot]
71035b7bbe Update vite to version 4.2.1 2023-03-27 14:59:41 +00:00
depfu[bot]
eadd6e5de9 Update sass to version 1.59.3 2023-03-21 22:45:06 +00:00
depfu[bot]
4d2d870add Update rollup to version 3.20.0 2023-03-21 09:49:20 +00:00
Robin Malfait
acf9403826
transform files using @swc/jest (#10815) 2023-03-17 16:22:16 +01:00
Robin Malfait
7e9a53f6cb
Enable ESM and TS based config files (#10785)
* add `jiti` and `detective-typescript` dependencies

* use `jiti` and `detective-typescript`

Instead of `detective`, this way we will be able to support
`tailwind.config.ts` files and `ESM` files.

* use `@swc/core` instead of the built-in `babel` form `jiti`

* update changelog

* add `jiti` and `detective-typescript` dependencies to `stable`

* use `sucrase` to transform the configs

* add `sucrase` dependency to `stable` engine

* make loading the config easier

* use abstracted loading config utils

* WIP: make `load` related files public API

* use new config loader in PostCSS plugin

* add list of default config files to look for

* cleanup unused arguments

* find default config path when using CLI

* improve `init` command

* make eslint happy

* keep all files in `stubs` folder

* add `tailwind.config.js` stub file

* Initialize PostCSS config using the same format as Tailwind config

* Rename config content stubs to config.*.js

* Improve option descriptions for init options

* Remove unused code, remove `constants` file

* Fix TS warning

* apply CLI changes to the Oxide version

* update `--help` output in CLI tests

* WIP: make tests work on CI

TODO: Test all combinations of `--full`, `--ts`, `--postcss`, and `--esm`.

* wip

* remove unused `fs`

* Fix init tests

Did you know you could pass an empty args to a command? No? Me neither. ¯\_(ツ)_/¯

* bump `napi-derive`

* list extensions we are interested in

* no-op the `removeFile` if file doesn't exist

* ensure all `init` flags work

* ensure we cleanup the new files

* test ESM/CJS generation based on package.json

* remove unnecessary test

We are not displaying output in the `--help` anymore based on whether
`type: module` is present or not.
Therefore this test is unneeded.

* only look for `TypeScript` files when the entryFile is `TypeScript` as well

* refactor `load` to be `loadConfig`

This will allow you to use:

```js
import loadConfig from 'tailwindcss/loadConfig'

let config = loadConfig("/Users/xyz/projects/my-app/tailwind.config.ts")
```

The `loadConfig` function will return the configuration object based on
the given absolute path of a tailwind configuration file.

The given path can be a CJS, an ESM or a TS file.

* use the `config.full.js` stub instead of the `defaultConfig.stub.js` file

The root `defaultConfig` is still there for backwards compatibilty
reasons. But the `module.exports = requrie('./config.full.js')` was
causing some problems when actually using tailwindcss.

So dropped it instead.

* apply `load` -> `loadConfig` changes to `Oxide` engine CLI

* ensure we write the config file in the Oxide engine

* improve type in Oxide engine CLI

* catch errors instead of checking if the file exists

A little smaller but just for tests so doesn't matter too much here 👍

* ensure we publish the correct stub files

---------

Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Nate Moore <nate@natemoo.re>
Co-authored-by: Enzo Innocenzi <enzo@innocenzi.dev>
2023-03-15 17:04:18 -04:00
depfu[bot]
994b541779 Update vite to version 4.1.4 2023-03-03 02:44:15 +00:00
depfu[bot]
52ca21bcea Update sass to version 1.58.3 2023-03-01 02:16:15 +00:00
Robin Malfait
c8bf2d49b6
Disable color opacity plugins by default in the oxide engine (#10618)
* disable color opacity plugins by default for the `oxide` engine

* update tests to reflect this change in the `oxide` engine

* update changelog

* reflect changes in integration tests
2023-02-17 20:21:22 +01:00
depfu[bot]
77f2f5d3d1 Update rollup to version 3.15.0 2023-02-17 05:58:21 +00:00
depfu[bot]
bcf983a34e Update vite to version 4.1.1 2023-02-10 02:45:05 +00:00
depfu[bot]
43e78a6f07 Update sass to version 1.58.0 2023-02-08 10:59:31 +00:00
depfu[bot]
c5eef095e2 Update parcel to version 2.8.3 2023-01-25 18:45:42 +00:00
Robin Malfait
8e60a3c7e8
Use Lightning CSS in the PostCSS Plugin (#10399)
* bump lightningcss

* use `lightningcss` in the main PostCss Plugin

* use lightningcss in our custom matchers

Now that we are using `lightningcss` and nesting in the new `oxide`
engine, the generated output _will_ be different in the majority of test
cases.

Using a combination of `prettier` and `lightningcss` will make the
output consistent.

The moment we are fully using the `oxide` engine, we can drop
`lightningcss` or `prettier` again to improve the performance of the
tests.

* update tests to apply `lightningcss` related changes

* update changelog

* add `lightningcss` and `browserslist` as dev dependencies to stable package.json

* only use `lightningcss` in tests (without prettier)

We will only fallback to prettier if lightningcss fails somehow.

* apply side effect chagnes due to only using lightningcss for tests

* make CI happy (integration tests)

Apply changes to integration tests now that we are using lightningcss

* transform `lightningcss` for Node 12 when running tests

* run prettier on failing tests for `toMatchFormattedCss`

This will result in better diffs because diffs are typically per block
and/or per line. But lightningcss will simplify certain selectors and
the diff won't be as clear.

We will only apply the prettier formatting for failing tests in the diff
view so that diffs are cleaner and we don't pay for the additional
prettier calls when tests pass.
2023-01-23 20:44:31 +01:00
Adam Wathan
c8e484c68b Add script for running integration tests 2023-01-21 11:28:24 -05:00
Robin Malfait
b1f4da70d1
Separate stable and oxide engines (#10359)
* separate `stable` and `oxide` mode (package.json in this case)

* drop `install` script (we use a workspace now)

* change required engine to 16

* enable OXIDE by default

* ignore generated `oxide` files

* splitup package.json scripts into "public" and "private" scripts

Not ideal of course, but this should make it a tiny bit easier to know
which scripts _you_ as a developer / contributor have to run.

* drop `workspaces` from the `stable` engine

* drop `oxide` related build files from the `stable` engine

* drop `oxide` engine specific dependencies from the `stable` engine

* use the `oxide-node-api-shim` for the `stable` engine

* add little script to swap the engines

* drop `oxide:build` from `turbo` config

* configure `ci` for `stable` and `oxide` engines

- rename `nodejs.yml` -> `ci.yml`
- add `ci-stable.yml` (for stable mode and Node 12)
- ensure to use the `stable` engine in the `ci-stable.yml` workflow
- drop `oxide:___` specific scripts

* rename `release-insiders` to `release-insiders-stable`

This way we will be able to remove all files that contain `stable` once
we are ready.

* rename `release-insiders-oxide` to just `release-insiders`

* cleanup insider related workflows

* rename `release` -> `release-stable`

* rename `release-oxide` -> `release`

* change names of release workflows

* drop `oxide-` prefix from jobs

* inline node versions

* do not use `turbo` for the stable build

Can't use it because we don't have a workspace in the stable build.

* re-rename CI workflow

* encode default engine in relevant `package.json` files

* make Node 12 work

* increase `node-version` matrix

* make release workflows explicit (per engine)

* add `Oxide` to workflow name

* add integration tests for the `oxide` engine

* add integration tests for the `stable` engine

* run `oxide` integrations against node `18`

* run `stable` integration tests against node 18

We should test node 12 for tailwindcss, but integrations itself can run
against a newer version. In fact, we always ran them against node 16.

* use `localhost` instead of `0.0.0.0`

* ensure `webpack-4` works on Node 18

* run relese scripst directly

Instead of going via `npm`. It's a bit nicer and quicker!

* drop unused scripts

* sync package-lock.json

* ensure to generate the plugin list before running `jest`

We _could_ use an `npm run pretest`, but then you can't run `jest`
directly anymore (which is required for some tools like vscode
extensions).

* cleanup npm scripts

* drop pretend comments

* fix typo

* add `build:rust` as a pre-jest run script
2023-01-19 11:58:25 -05:00
depfu[bot]
07fe8bfe2b
Upgrade rollup: 2.79.1 → 3.10.0 (major) (#10360)
* Update rollup to version 3.10.0

* Update Rollup integrations for Rollup 3

Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
Co-authored-by: Jonathan Reinink <jonathan@reinink.ca>
2023-01-19 08:23:02 -05:00
depfu[bot]
0149027cf8
Update vite to version 4.0.4 (#10356)
Co-authored-by: depfu[bot] <23717796+depfu[bot]@users.noreply.github.com>
2023-01-19 08:03:33 -05:00
depfu[bot]
6e40a8ea80 Update postcss to version 8.4.21 2023-01-13 21:19:46 +00:00
Robin Malfait
2a403267d8
Oxide (#10252)
* temporarily disable workflows

* add oxide

Our Rust related parts

* use oxide

- Setup the codebase to be able to use the Rust parts based on an
  environment variable: `OXIDE=1`.
- Setup some tests that run both the non-Rust and Rust version in the
  same test.
- Sort the candidates in a consistent way, to guarantee the order for
  now (especially in tests).
- Reflect sorting related changes in tests.
- Ensure tests run in both the Rust and non-Rust version. (Some tests
  are explicitly skipped when using the Rust version since we haven't
  implemented those features yet. These include: custom prefix,
  transformers and extractors).
  - `jest`
  -`OXIDE=1 jest`

* remove into_par_iter where it doesn't make sense

* cargo fmt

* wip

* enable tracing based on `DEBUG` env

* improve CI for the Oxide build

* sort test output

This happened because the sorting happens in this branch, but changes
happened on the `master` branch.

* add failing tests

I noticed that some of the tests were failing, and while looking at
them, it happened because the tests were structured like this:

```html
    <div
      class="
        backdrop-filter
        backdrop-filter-none
        backdrop-blur-lg
        backdrop-brightness-50
        backdrop-contrast-0
        backdrop-grayscale
        backdrop-hue-rotate-90
        backdrop-invert
        backdrop-opacity-75
        backdrop-saturate-150
        backdrop-sepia
      "
    ></div>
```

This means that the class names themselves eventually end up like this: `backdrop-filter-none\n`
-> (Notice the `\n`)

/cc @thecrypticace

* fix range to include `\n`

* Include only unique values for tests

Really, what we care about most is that the list contains every expected candidate. Not necessarily how many times it shows up because while many candidates will show up A LOT in a source text we’ll unique them before passing them back to anything that needs them

* Fix failing tests

* Don’t match empty arbitrary values

* skip tests in oxide mode regarding custom separators in arbitrary variants

* re-enable workflows

* use `@tailwindcss/oxide` dependency

* publish `tailwindcss@oxide`

* drop prepublishOnly

I don't think we actually need this anymore (or even want because this
is trying to do things in CI that we don't want to happen. Aka, build
the Oxide Rust code, it is already a dependency).

* WIP

* Defer to existing CLI for Oxide

* Include new compiled typescript stuff when publishing

* Move TS to ./src/oxide

* Update scripts

* Clean up tests for TS

* copy `cli` to `oxide/cli`

* make CLI files TypeScript files

* drop --postcss flag

* setup lightningcss

* Remove autoprefixer and cssnano from oxide CLI

* cleanup Rust code a little bit

- Drop commented out code
- Drop 500 fixture templates

* sort test output

* re-add `prepublishOnly` script

* bump SWC dependencies in package-lock.json

* pin `@swc` dependencies

* ensure to install and build oxide

* update all GitHub Workflows to reflect Oxide required changes

* sort `content-resolution` integration tests

* add `Release Insiders — Oxide`

* setup turbo repo + remote caching

* use `npx` to invoke `turbo`

* setup unique/proper package names for integration tests

* add missing `isomorphic-fetch` dependency

* setup integration tests to use `turborepo`

* scope tailwind tasks to root workspace

* re-enable `node_modules` cache for integration tests

* re-enable `node_modules` cache for main CI workflow

* split cache for `main` and `oxide` node_modules

* fix indent

* split install dependencies so that they can be cached individually

* improve GitHub actions caching

* use correct path for oxide node_modules (crates/node)

* ensure that `cargo install` always succeeds

cargo install X, on CI will fail if it already exists.

* figure out integration tests with turbo

* tmp: use `npm` instead of `turbo`

* disable `fail-fast`

This will allow us to run integration tests so that it still caches the
succesful ones.

* YAML OH YAML, Y U WHITESPACE SENSITIVE

* copy the oxide-ci workflow to release-oxide

* make `oxide-ci` a normal CI workflow

Without publishing

* try to cache cargo and node_modules for the oxide build

* configure turbo to run scripts in the root

* explicitly skip failing test for the Oxide version

* run oxide tests in CI

* only use build script for root package

* sync package-lock.json

* do not cache node_modules for each individual integration

* look for hoisted `.bin`

* use turbo for caching build tailwind css in integration tests

* Robin...

* try to use the local binary first

* skip installing integration test dependencies

Should already be installed due to workspace usage

* Robin...

* drop `output.clean`

* explicitly add `mini-css-extract-plugin`

* drop oxide-ci, this is tested by proxy

* ensure oxide build is used in integration tests

This will ensure the `@tailwindcss/oxide` dependency is available
(whether we use it or not).

* setup Oxide shim in insiders release

* add browserslist dependency

* use `install:all` script name

Just using `install` as a script name will be called when running
`npm install`.
Now that we marked the repo as a `workspace`, `npm install` will run
install in all workspaces which is... not ideal.

* tmp: enable insiders release in PRs

Just to check if everything works before merging. Can be removed once
tested.

* don't cache node_modules?

I feel there is some catch 22 going on here.
We require `npm install` to build the `oxide/crates/node` version.
But we also require `oxide/crates/node` for the `npm install` becaus of
the dependency: `"@tailwindcss/oxide": "file:oxide/creates/node"`

* try to use `oxide/crates/node` as part of the workspace

* let's think about this

Let's try and cache the `node_modules` and share as much as possible.
However, some scripts still need to be installed specific to the OS.

Running `npm install` locally doesn't throw away your `node_modules`,
so if we just cache `node_modules` but also run `npm install` that
should keep as much as possible and still improve install times since
`node_modules` is already there.

I think.

* ensure generated `index.js` and `index.d.ts` files are considered outputs

* use `npx napi` instead of `napi` directly

* include all `package-lock.json` files

* normalize caching further in all workflows

* drop nested `package-lock.json` files

* `npm uninstall mini-css-extract-plugin && npm install mini-css-extract-plugin --save-dev`

* bump webpack-5 integration tests dependencies

* only release insiders on `master` branch

* tmp: let's figure out release insiders oxide

* fix little typo

* use Node 18 for Oxide Insiders

* syncup package-lock.json

* let's try node 16

Node 18 currently fails on `Build x86_64-unknown-linux-gnu (OXIDE)`
Workflow.

Install Node.JS output:

```
Environment details
Warning: /__t/node/18.13.0/x64/bin/node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by /__t/node/18.13.0/x64/bin/node)
/__t/node/18.13.0/x64/bin/node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by /__t/node/18.13.0/x64/bin/node)
/__t/node/18.13.0/x64/bin/node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by /__t/node/18.13.0/x64/bin/node)
/__t/node/18.13.0/x64/bin/node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by /__t/node/18.13.0/x64/bin/node)
/__t/node/18.13.0/x64/bin/node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by /__t/node/18.13.0/x64/bin/node)
/__t/node/18.13.0/x64/bin/node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by /__t/node/18.13.0/x64/bin/node)

Warning: node: /lib64/libm.so.6: version `GLIBC_2.27' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.25' not found (required by node)
node: /lib64/libc.so.6: version `GLIBC_2.28' not found (required by node)
node: /lib64/libstdc++.so.6: version `CXXABI_1.3.9' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.20' not found (required by node)
node: /lib64/libstdc++.so.6: version `GLIBCXX_3.4.21' not found (required by node)
```

* bump some Node versions

* only release oxide insiders on `master` branch

* don't cache `npm`

* bump napi-rs

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
2023-01-13 12:22:00 +01:00
Will Cosgrove
1f5d117cf9
Fix shadowed variable when using raw content (#9773)
* Fix shadowed variable when using raw content

* Add test

* Update changelog

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-11-08 17:02:10 -05:00
Robin Malfait
40f6b4ff64
Fix missing PostCSS dependencies in the CLI (#9617)
* Record and watch PostCSS dependencies in the CLI

* ensure `changedContent` gets cleared

Otherwise this list gets bigger and bigger, not only that there is a
subtle bug. The moment you save a `.css` file we want to create a new
context and start from scratch. However, since the list was never
cleared, it meant that every subsequent save to *any* file (not only
config / css files) creates a new context...

By clearing the least we should work around this problem.

* add test that verifies an odd bug

The story goes like this:

1. add `underline` to html file
  -> css contains `underline` rule
2. add `font-bold` to html file
  -> css contains `underline` and `font-bold`
3. remove `underline` from html file
  -> css still contains `underline` and `font-bold` for performance reasons
4. Save a css file (! RED FLAG)
  -> css contains `font-bold` because we started from scratch
5. add `underline` to html file
  -> css contains `underline` and `font-bold`
6. remove `underline` from html file
  -> css only contains `font-bold`... (UH OH)

This is because the moment we did step 4, every single save in any file created a new context. Every. Single. Time.

* use a property that doesn't require `autoprefixer`

* update changelog

Co-authored-by: Jordan Pittman <jordan@cryptica.me>
2022-10-20 18:01:39 +02:00
Robin Malfait
4041c863b8
Ensure --content is used in the CLI when passed (#9587)
* update changelog

* ensure `--content` is taken into account

* cleanup tests

- Use `rm` instead of deprecated `rmdir`
- Type the returnType correctly

* use a file not included in `content` of your tailwind.config.js file
2022-10-17 16:40:50 +02:00
Jordan Pittman
5ea752e85c
Add @config support (#9405)
* Refactor CLI

* Add `@config` support

* Update changelog

Co-authored-by: Robin Malfait <malfait.robin@gmail.com>
2022-09-23 13:48:17 -04:00
Jordan Pittman
bf44941049
Allow resolving content paths relative to the config file (#9396)
* Update lockfile

* Tweak formatting

* Refactor content path parsing

* Allow resolving content paths relative to the config file

* Include resolved symlinks as additional content paths

* Update changelog

* Work on suite of tests for content resolution

* reformat integration test list

* Move content resolution tests to integration

* Update future and experimental types
2022-09-23 08:09:02 -04:00
Robin Malfait
0d064ea032
Enable postcss-import in the CLI by default in watch mode (#8580)
* Add support for postcss-import in watch mode

* Add regression test

* Extract shared logic

* restructure test a little bit

Instead of relying on a arbitrary setTimout value, let's wait for the
file to be created instead.

* update changelog

Co-authored-by: Adam Bergman <adam@fransvilhelm.com>
2022-06-10 11:33:35 +02:00
Robin Malfait
4a745439f0
Add type annotations to the tailwind.config.js file (#8493)
* add type annotation to the config by default

* use `@type {import('tailwindcss').Config}` instead
2022-06-02 16:44:12 +02:00
Jordan Pittman
c4e443acc0
Add postcss-import support to the CLI (#8437)
* Add postcss-import support to the CLI

* Update changelog
2022-05-25 14:28:52 -04:00
Jordan Pittman
30538b363f
Update integration tests (#8386)
* Add content glob integration tests

* Use tagged version in parcel integration tests

* Upgrade postcss-cli integration tests

* upgrade integration test deps

* Fix CS

* Fix tests

* Update lockfile

* Fix vite test in CI
2022-05-19 16:44:20 -04:00
Jordan Pittman
6c63f67d20
Create tailwind.config.cjs file in ESM package when running init (#8363)
* refactor

* Adds support for tailwind.config.cjs files to CLI

* Update changelog

Co-authored-by: Nate Moore <nate@natemoo.re>
2022-05-16 10:53:03 -04:00
Jordan Pittman
122fb89e6c
Support postcss config options in config file in the CLI (#8226)
* Support config options from postcss CLI

* Update changelog
2022-04-28 15:14:36 -04:00
Jordan Pittman
7ed46b6f52 Re-enable new features
This reverts commits 1456ed9021b3455dbb4458c2fb7d8ab66dfb3fed, d0269c24b3c7ad4557b7e3f2779bd15c5ac501f7, and 57699a04036c542d82e7b7102d775d4d2379493d.
2022-04-12 14:13:04 -04:00
Jordan Pittman
1456ed9021 Fix integration test 2022-04-12 14:06:50 -04:00
Robin Malfait
407a5c368c
Add TypeScript types for the tailwind.config.js file (#7891)
* add generate-types script

This script will generate the full list of core plugins, which will
allow you to get code completion for the `corePlugins` section.

It will also generate all the colors (and deprecated colors) which is
used in multiple places in the config.

* add types for the `tailwind.config.js` config file

* annotate stubs with a JSDoc pointing to the types

* add types to package.json

- Updated the files to make sure that the types are being published
- Add a `types` section in the `package.json`, otherwise your editor by
  default will look for the `DefinitelyTyped` types which got me really
  confused for a second.
- Added some scripts to make sure that the generation of types happens
  when needed (before tests and before building). This way you never
  ever have to think about generating them when working on Tailwind CSS
  internals.

* re-export types top-level

Having a `colors.d.ts` next to the `colors.js` file allows us to type
the `colors.js` file and your editor will pickup the types from
`colors.d.ts`.

* also publish generated types

* update changelog

* enable TypeScript only when using `init --types` for now

* update tests to verify that `--types` works
2022-03-22 10:24:28 +01:00
Jordan Pittman
ee945bbea2
Add an explicit --poll option to the CLI (#7725)
* Refactor

* Allow user to enable polling

* Update changelog
2022-03-02 11:16:06 -05:00
Jordan Pittman
bd167635d5
Invalidate context when main css changes (#7626)
* Invalidate context when CSS changes

* Remove invalidation count check

* Add sass integration test

* Update changelog
2022-02-25 13:12:45 -05:00
Robin Malfait
96d4ce2516
Expose context.sortClassList(classes) (#7412)
* add prettier-plugin-tailwindcss

This will use the prettier plugin in our tests as well, yay consistency!

* ensure that both `group` and `peer` can't be used in `@apply`

This was only configured for `group`

* expose `sortClassList` on the context

This function will be used by the `prettier-plugin-tailwindcss` plugin,
this way the sorting happens within Tailwind CSS itself adn the
`prettier-plugin-tailwindcss` plugin doesn't have to use internal /
private APIs.

The signature looks like this:
```ts
function sortClassList(classes: string[]): string[]
```

E.g.:
```js
let sortedClasses = context.sortClassList(['p-1', 'm-1', 'container'])
```

* update changelog

* add sort test for utilities with the important modifier e.g.: `!p-4`
2022-02-10 18:06:41 +01:00
Robin Malfait
657bf5f8c9
Allow piping data into the CLI (#6876)
* use outputFile instead of direct writeFile

This is an improvement we introduced earlier but forgot this part.

* allow to pipe in data to the CLI

* add integration tests to validate piping to the CLI

* update changelog
2022-01-04 18:58:55 +01:00
Robin Malfait
1cbb29faeb
Remove the watching context (#6858)
* remove watching context

* update changelog
2022-01-03 17:45:31 +01:00
Robin Malfait
ac5a20420e
make version number dynamic in the test (#6017) 2021-11-08 21:30:37 +01:00
Robin Malfait
f12c0e1fa5
Improve css expectations in tests (#5819)
* use String.raw for css escapes

This will allow us to write code like:
```css
.mobile\:font-bold {}
```
Instead of
```css
.mobile\\:font-bold {}
```

Which resembles "real" css way better in our tests.

* use String.raw in integration tests as well
2021-10-18 12:08:48 +02:00