Feature/tailwind support #1466

seanparsons · 2021-07-06T17:39:00Z

Problem:
Users would like to be able to use Tailwind in projects, which currently they cannot do because Tailwind can often involve a command line process being run against a project.

Fix:
Primarily we use Twind to incorporate the configured style parts into the canvas, as unlike Tailwind itself it can be run in the browser. Once appropriate Tailwind and Postcss configuration is detected then it becomes automatically incorporated into the canvas and preview.

Commit Details:

useTwind hook implemented to either remove or add in the processed style element containing the configured Tailwind content. Uses the regular Tailwind configuration file format and filename.
Updated TypeScript to 4.1.3.
Added in support for module.exports in project files, similar to what is done for dependencies by including the same variables into the scope. Also extracts the contents of module.exports when producing the output of a module.
Trigger Twind when tailwind is configured in a postcss config.
Ensure that the required dependencies for tailwind are included in the dependencies of the project.
Support disabling the preflight of Tailwind.
Invokes injectTwind for the preview.
Better handle the selectors produced by Twind to ensure that they are encapsulated inside the canvas, having html and body target the root of the canvas.
Move all: initial from the canvas container to an enclosing div.
Memoized rule modifications to keep things smooth in the canvas.

…ilwind

…es are scoped

github-actions · 2021-07-06T17:50:59Z

Rheeseyb · 2021-07-07T09:41:54Z

editor/src/components/canvas/ui-jsx-canvas.tsx

+        <div
+          style={{
+            all: 'initial',
+          }}
+        >


This change was deliberate, and is the cause of the snapshot changes. Tailwind provides a "preflight" which adds CSS rules for the root of the doc. We obviously don't want that to affect the editor, so we scope all of the rules so that they are applied to descendants of the canvas-container only. That means we have to update those root rules to apply directly to the canvas-container element, which this all: 'initial' was interfering with. By moving the all: 'initial' up a level, we are still able to reset the styling on the canvas in a way that doesn't interfere with the tailwind preflight.

Rheeseyb · 2021-07-07T09:43:14Z

editor/package.json

@@ -183,7 +183,8 @@
    "string-hash": "1.1.3",
    "strip-ansi": "6.0.0",
    "tippy.js": "6.2.6",
-    "typescript": "4.0.5",
+    "twind": "0.16.16",
+    "typescript": "4.1.3",


Twind required a slightly updated version of TS, which is the cause of some unrelated changes elsewhere. There is a much newer version, but we didn't want to introduce too much noise into this PR, so that is something we should tackle separately.

Rheeseyb · 2021-07-07T09:45:53Z

editor/src/components/canvas/ui-jsx-canvas-renderer/ui-jsx-canvas-execution-scope.tsx

+  let module = {
+    exports: {},
+  }
+
+  // Mirrors the same thing in evaluateJs.
+  let process = {
+    env: {
+      NODE_ENV: 'production',
+    },
+  }
+
+  let executionScope: MapLike<any> = {
+    require: userRequireFn,
+    module: module,
+    exports: module.exports,
+    process: process,
+    ...requireResult,
+  }


As mentioned in the comment, this is to mirror the behaviour we use when evaluating npm dependencies in evaluator.ts, as without this we weren't able to use the sample config from tailwind's docs

Rheeseyb · 2021-07-07T09:46:45Z

editor/src/components/custom-code/code-file.spec.ts

@@ -333,11 +333,13 @@ describe('transpileCode', () => {

      var icon_css_1 = __importDefault(require(\\"./icon.css\\"));

-      exports.App = function (props) {
+      var App = function App(props) {


This is fallout from the TS update

Rheeseyb · 2021-07-07T09:49:53Z

editor/src/components/editor/npm-dependency/npm-dependency.ts

+      const fromDependencies = Utils.path<unknown>(['dependencies', dependencyToCheck], parsedJSON)
+      const fromDevDependencies = Utils.path<unknown>(
+        ['devDependencies', dependencyToCheck],
+        parsedJSON,
+      )


I've created the follow up ticket #1468 for this, because we need further support for devDependencies

Rheeseyb · 2021-07-07T09:52:49Z

editor/src/core/tailwind/tailwind.ts

+        ) {
+          return prefixSelector
+        } else if (lowerCaseSelector === 'body') {
+          return `${prefixSelector} > *`


This is required because of the subtle difference between using the html vs the body selector. Tailwind uses both in the preflight, in one case attaching a specific font-family rule to the html selector, and then attaching font-family: inherit to the body selector.

Rheeseyb · 2021-07-07T09:54:31Z

editor/src/core/tailwind/tailwind.ts

+  }, [prefixSelector, shouldUseTwind, tailwindConfig])
+}
+
+export function injectTwind(


This is just a non-hooks version of the above for use in the preview because the preview render function (which needs to call this) isn't a React component. It's a bit rubbish having to effectively duplicate the logic like this :/

Rheeseyb · 2021-07-07T09:59:28Z

editor/webpack.config.js

@@ -281,7 +281,7 @@ const config = {
        contentBase: path.join(__dirname, 'resources'),
        watchContentBase: true, // Watch the above folder for changes too
        overlay: {
-          warnings: true,
+          warnings: false,


This is because of the TS update. For some reason (a few hours were lost trying to figure this one out), TS 4.1+ results in the following warning, which we weren't able rectify:

WARNING in ./node_modules/typescript/lib/typescript.js Module not found: Error: Can't resolve 'perf_hooks' in '/home/rheese/Workspace/Utopia/utopia/editor/node_modules/typescript/lib' @ ./node_modules/typescript/lib/typescript.js @ ./src/core/workers/ts/ts-worker.ts @ ./src/core/workers/ts/ts.worker.ts

This appears to be related to this change, and maybe needs further investigation if it can't be fixed by replacing the ts-loader with babel

enidemi · 2021-07-07T10:53:09Z

editor/src/core/tailwind/tailwind.ts

+
+  return {
+    ...tailwindConfig,
+    preflight: preflightEnabled,


what is the difference between preflight and non-preflight for the canvas?

This is just determining whether or not the preflight should be included. It doesn't mess up the styling of the canvas.

seanparsons and others added 11 commits July 5, 2021 15:50

feature(tailwind) Initial functionality for getting the Tailwind config.

cf43f31

feat(editor) useTwind hook, with types needed

a504b53

feature(editor) Support module.exports in project files.

6425c2a

feat(editor) Trigger tailwind support when plugin is used in postcss

9cdc2fd

feat(editor) Check dependencies and postcss config before applying ta…

921b71f

…ilwind

feat(editor) Support disabling tailwind preflight in config

a153973

feat(preview) Include tailwind support in the preview

6cc54a2

fix(editor) Split rules before applying css scoping to ensure all rul…

25804e9

…es are scoped

chore(tailwind.ts) Memoize individual rule scoping

20309fd

fix(tests) Updated snapshots

895c0cd

Merge remote-tracking branch 'origin' into feature/tailwind-support

977e898

seanparsons requested review from balazsbajorics and enidemi July 6, 2021 17:39

Rheeseyb reviewed Jul 7, 2021

View reviewed changes

enidemi reviewed Jul 7, 2021

View reviewed changes

enidemi approved these changes Jul 7, 2021

View reviewed changes

balazsbajorics approved these changes Jul 7, 2021

View reviewed changes

Rheeseyb merged commit 1e69b53 into master Jul 7, 2021

Rheeseyb deleted the feature/tailwind-support branch July 7, 2021 14:21

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature/tailwind support #1466

Feature/tailwind support #1466

seanparsons commented Jul 6, 2021

github-actions bot commented Jul 6, 2021

Rheeseyb Jul 7, 2021

Rheeseyb Jul 7, 2021

Rheeseyb Jul 7, 2021

Rheeseyb Jul 7, 2021

Rheeseyb Jul 7, 2021

Rheeseyb Jul 7, 2021

Rheeseyb Jul 7, 2021

Rheeseyb Jul 7, 2021

enidemi Jul 7, 2021

Rheeseyb Jul 7, 2021

Feature/tailwind support #1466

Feature/tailwind support #1466

Conversation

seanparsons commented Jul 6, 2021

github-actions bot commented Jul 6, 2021

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment