Skip to content

Commit

Permalink
add tailwindcss and mdx
Browse files Browse the repository at this point in the history
  • Loading branch information
Hillsie committed Jun 18, 2022
1 parent 9a7b744 commit f97a773
Show file tree
Hide file tree
Showing 12 changed files with 1,219 additions and 100 deletions.
30 changes: 21 additions & 9 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,16 +1,28 @@
# Boiler Plate React App with TypeScript and SWC
An Ejected Create React App with the purpose of configuring it with SWC. It's wip.\
TODO: Convert remaining babel to swc.
An Ejected Create React App configured to compile with SWC

It has:
- SWC - Speedy Web Compiler hacks to an ejected create react app
- TypeScript
- SWC Speedy Web Compiler hacks to an ejected create react app
- React
- MobX
- Sass
- TypeScript
- React Router 6
- Tailwindcss - Awesome Tailwindcss with version 6 configuration
- mdx - Markdown for the component era. Components rendered in the markdown. Tailwindcss utility class batteries included.
- MobX - One mean state machine
- Yup and @types/yup included.
- Tailwind appeared after ejecting.

- Sass batteries included

## Stuff done, stuff to do
- [x] build and hot reloading tested
- [x] frontmatter loader added
- [x] configured tailwindcss support
- [ ] add support for @swc/jest
- [ ] sort out tailwindcss nesting issue
- [ ] sort out gfm
- [ ] clean up janky experiment code (Progress over perfection)
- [ ] clean up directory structure

## BAGS and daydreams
- Webassembly wasm
## Available Scripts

In the project directory, you can run:
Expand Down
18 changes: 14 additions & 4 deletions config/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -457,6 +457,8 @@ module.exports = function (webpackEnv) {
customize: require.resolve(
"babel-preset-react-app/webpack-overrides"
),
// NOTE: https://swc.rs/docs/configuration/compilation#jsctransformreactrefresh // 18.06.2022 - AH.
// --- start ---
// presets: [
// [
// require.resolve('babel-preset-react-app'),
Expand All @@ -465,12 +467,13 @@ module.exports = function (webpackEnv) {
// },
// ],
// ],

// plugins: [
// isEnvDevelopment &&
// shouldUseReactRefresh &&
// require.resolve('react-refresh/babel'),
// require.resolve("react-refresh/babel"),
// ].filter(Boolean),
//--- end ---

// This is a feature of `babel-loader` for webpack (not Babel itself).
// It enables caching results in ./node_modules/.cache/babel-loader/
// directory for faster rebuilds.
Expand All @@ -484,18 +487,23 @@ module.exports = function (webpackEnv) {
// Unlike the application JS, we only compile the standard ES features.
{
test: /\.(js|mjs)$/,
//TODO: Regex replacement for @babel/runtime. Does this meet swc direct replacement ?
// 18.06.2022 - AH.
exclude: /@babel(?:\/|\\{1,2})runtime/,
loader: require.resolve("swc-loader"),
options: {
swcrc: true,
configFile: true,
// NOTE: Below does not work with swc-loader - 18.06.2022 - AH.
// --- start ---
// compact: false,
// presets: [
// [
// require.resolve('babel-preset-react-app/dependencies'),
// { helpers: true },
// ],
// ],
// --- end ---
cacheDirectory: true,
// See #6846 for context on why cacheCompression is disabled
cacheCompression: false,
Expand Down Expand Up @@ -753,9 +761,10 @@ module.exports = function (webpackEnv) {
// as micromatch doesn't match
// '../cra-template-typescript/template/src/App.tsx'
// otherwise.
// Added mdx - 18/06/2022 AH
include: [
{ file: "../**/src/**/*.{ts,tsx}" },
{ file: "**/src/**/*.{ts,tsx}" },
{ file: "../**/src/**/*.{ts,tsx,mdx}" },
{ file: "**/src/**/*.{ts,tsx,mdx}" },
],
exclude: [
{ file: "**/src/**/__tests__/**" },
Expand All @@ -771,6 +780,7 @@ module.exports = function (webpackEnv) {
!disableESLintPlugin &&
new ESLintPlugin({
// Plugin options
// Bookmark: Add linting mdx - 18/06/2022 AH
extensions: ["js", "mjs", "jsx", "ts", "tsx"],
formatter: require.resolve("react-dev-utils/eslintFormatter"),
eslintPath: require.resolve("eslint"),
Expand Down
8 changes: 2 additions & 6 deletions config/webpack/lib/frontmatterLoader.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,16 +9,12 @@ module.exports = async function (src) {
const { content, data } = matter(src);
const compiledGfm = await compile(
remarkGfm(content, { singleTilde: true }),
);
); //TODO: Experiment does not work. remark-gfm is not working.

const newContent = await compile(remark(compiledGfm));
// Two plugins, first w/ options.
// const code = `export const frontMatter = ${stringifyObject(data)}
// ${content}`;
const code = `export const frontMatter = ${stringifyObject(data)} ${newContent}`;
return callback(null, code);
};;
// Investigate
// programatically checkiif a package is loaded
// https://stackoverflow.com/questions/60454251/how-to-know-the-version-of-currently-installed-package-from-yarn-lock
// yarn list --pattern lodash --depth=0 --json --non-interactive --no-progress | jq -r '.data.trees[].name'
};
38 changes: 26 additions & 12 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
{
"name": "achtungswc",
"description": "React with SWC and other things",
"version": "0.1.0",
"description": "React with SWC and other things",
"version": "0.1.1",
"license": "MIT",
"keywords": [
"react",
"typescript",
"swc",
"speedy web compiler",
"boilerplate"
"react",
"typescript",
"tailwindcss",
"mobx",
"mdx",
"react-router",
"starter"
],
"dependencies": {
"@mdx-js/loader": "^2.1.1",
"@mdx-js/mdx": "^2.1.2",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
"@svgr/webpack": "^5.5.0",
"@testing-library/jest-dom": "^5.14.1",
Expand All @@ -27,7 +32,7 @@
"browserslist": "^4.18.1",
"camelcase": "^6.2.1",
"case-sensitive-paths-webpack-plugin": "^2.4.0",
"classnames": "^2.3.1",
"clsx": "^1.1.1",
"css-loader": "^6.5.1",
"css-minimizer-webpack-plugin": "^3.2.0",
"dotenv": "^10.0.0",
Expand All @@ -46,7 +51,6 @@
"mini-css-extract-plugin": "^2.4.5",
"mobx": "^6.6.0",
"mobx-react": "^7.5.0",
"postcss": "^8.4.4",
"postcss-flexbugs-fixes": "^5.0.2",
"postcss-loader": "^6.2.1",
"postcss-normalize": "^10.0.1",
Expand All @@ -57,16 +61,17 @@
"react-dev-utils": "^12.0.1",
"react-dom": "^18.1.0",
"react-refresh": "^0.11.0",
"react-router-dom": "6",
"remark-frontmatter": "^4.0.1",
"remark-gfm": "^3.0.1",
"remark-mdx": "^2.1.2",
"resolve": "^1.20.0",
"resolve-url-loader": "^4.0.0",
"sass": "^1.52.3",
"sass-loader": "^12.3.0",
"semver": "^7.3.5",
"source-map-loader": "^3.0.0",
"style-loader": "^3.3.1",
"tailwindcss": "^3.0.2",
"terser-webpack-plugin": "^5.2.5",
"typescript": "^4.4.2",
"web-vitals": "^2.1.0",
Expand Down Expand Up @@ -99,6 +104,19 @@
"last 1 safari version"
]
},
"devDependencies": {
"@swc/core": "^1.2.198",
"@tailwindcss/aspect-ratio": "^0.4.0",
"@tailwindcss/forms": "^0.5.2",
"@tailwindcss/line-clamp": "^0.4.0",
"@tailwindcss/nesting": "^0.0.0-insiders.565cd3e",
"@tailwindcss/typography": "^0.5.2",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"postcss-nesting": "^10.1.8",
"swc-loader": "^0.2.3",
"tailwindcss": "^3.1.3"
},
"jest": {
"roots": [
"<rootDir>/src"
Expand Down Expand Up @@ -154,9 +172,5 @@
"presets": [
"react-app"
]
},
"devDependencies": {
"@swc/core": "^1.2.198",
"swc-loader": "^0.2.3"
}
}
13 changes: 13 additions & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
module.exports = {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": "postcss-nesting",
"postcss-focus-visible": {},
"postcss-preset-env": {
features: { "nesting-rules": true },
},
autoprefixer: {},
tailwindcss: {},
...(process.env.NODE_ENV === "production" ? { cssnano: {} } : {}),
},
};
5 changes: 2 additions & 3 deletions src/App.module.scss → src/App.module.css
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
/* add nested css to App */

.App {
text-align: center;
&List {
list-style-type: none;
}
}

.App-logo {
Expand Down
20 changes: 7 additions & 13 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
import * as React from 'react';
import Main from './md/main.mdx';
import logo from './logo.svg';
import styles from './App.module.scss';
import styles from './App.module.css';
import clsx from 'clsx';

function App() {
console.log('App'); // Console log stripped out with .swcrc config
Expand All @@ -11,19 +12,12 @@ function App() {
<img src={logo} className={styles["App-logo"]} alt="logo" />

<ul className={styles.AppList}>
<li>TypeScript</li>
<li>Sass</li>
<li>Mobx</li>
<li>Yup</li>
<li className="box-decoration-slice bg-gradient-to-r from-green-400 to-blue-500 text-white px-2">Tailwindcss</li>
<li className="box-decoration-slice bg-gradient-to-r from-blue-600 to-pink-500 text-white px-2">TypeScript</li>
<li className="box-decoration-slice bg-gradient-to-r from-green-600 to-blue-500 text-white px-2">React router</li>
<li className="box-decoration-slice bg-gradient-to-r from-orange-700 to-red-600 text-white px-2">Mobx</li>
<li className="box-decoration-slice bg-gradient-to-r from-blue-600 to-pink-500 text-white px-2">MDX</li>
</ul>
<a
className={styles["App-link"]}
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React and other stuff
</a>
</header>
<Main />
</div>
Expand Down
4 changes: 4 additions & 0 deletions src/index.scss → src/index.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
Expand Down
2 changes: 1 addition & 1 deletion src/index.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import './index.scss';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

Expand Down
68 changes: 33 additions & 35 deletions src/md/main.mdx
Original file line number Diff line number Diff line change
@@ -1,49 +1,47 @@
---
title: Hello
slug: home
title: Hello front matter
slug: Hello slug matter
---
<h1>Hello world!</h1>
<s>strike</s>
export const HelloWorld = () => (
<>
<span className="box-decoration-slice bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
Hello World
</span>
<span className="box-decoration-clone bg-gradient-to-r from-indigo-600 to-pink-500 text-white px-2 ...">
Hello World
</span>
</>
)

<HelloWorld/>

<h1>Hello h1</h1>
<s>gone</s>
<div>Style me mdx tomato style</div>
<div style={{ padding: '20px', backgroundColor: 'tomato' }}>
<h3>This is JSX</h3>
```
style={{ padding: '20px', backgroundColor: 'tomato' }}
```
</div>

export const Thing = () => <button>World!</button>

export const Thing = () => <button className="border-spacing-0 rounded-md border-2 border-green-300 hover:border-green-500 text-green-600 focus:outline-none focus:ring focus:ring-green-400 cursor-pointer">Hello tailwindcss button thing in markdown mdx thing</button>

```javascript
export const Thing = () => <button className="text-green-600"> tailwindcss mdx button thing</button>
```
# Hello, <Thing />

# GFM

## Autolink literals

www.example.com, https://example.com, and [email protected].

## Footnote

A note[^1]

[^1]: Big note.

## Strikethrough

~one~ or ~~two~~ tildes.

## Table
- ^stuff^

| a | b | c | d |
| - | :- | -: | :-: |

## Tasklist

* [ ] to do
* [x] done

```javascript
const a = 1;
const b = 2;
const c = a + b;
console.log('Hello world!')
```

https://rubberduckdebugging.com/
export const CircleBlendThing = () => (
<div className="justify-center-space-x-14">
<div className="mix-blend-multiply bg-blue-400 ...">Blend Blue and</div>
<div className="mix-blend-multiply bg-pink-400 ...">Pink in mdx</div>
</div>)

<CircleBlendThing/>
Loading

0 comments on commit f97a773

Please sign in to comment.