feat: initalize repo

Carsten Kragelund 2023-09-29 16:41:39 +02:00
commit ef89258e94
10 changed files with 344 additions and 0 deletions

176
.gitignore vendored

@ -0,0 +1,176 @@
# Based on https://raw.githubusercontent.com/github/gitignore/main/Node.gitignore
# Logs
logs
_.log
npm-debug.log_
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]_.[0-9]_.[0-9]_.[0-9]_.json
# Runtime data
pids
_.pid
_.seed
\*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
\*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
\*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
\*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.\*
# IntelliJ based IDEs
.idea
# Finder (MacOS) folder config
.DS_Store

@ -0,0 +1,16 @@
MIT No Attribution
Copyright 2023 Carsten Kragelund <carsten@kragelund.dev>
Permission is hereby granted, free of charge, to any person obtaining a copy of this
software and associated documentation files (the "Software"), to deal in the Software
without restriction, including without limitation the rights to use, copy, modify,
merge, publish, distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED,
INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A
PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

@ -0,0 +1,45 @@
# bun-postcss-plugin
`bun-postcss-plugin` is a [PostCSS](https://postcss.org/) plugin for [Bun](https://bun.sh/) that enables importing CSS files directly in your JavaScript files. Once imported, the plugin processes the CSS using PostCSS, and returns the processed CSS as a string which can be injected into your document or utilized however you see fit.
## Installation
```bash
bun install bun-postcss-plugin --save-dev
```
## Getting Started
Add the plugin to your preload in your `bunfig.toml`
```toml
preload = [ "bun-postcss-plugin" ]
```
and your `tsconfig.json` types field
```yaml yaml is used here to allow comments in JSON
{
"compilerOptions": {
// ...
"types": [
// ...
"bun-postcss-plugin"
]
}
}
```
Then you can import css files in your code directly as such
```js
// Import your CSS
import styles from './styles.css';
// Your CSS is now processed and ready to use!
console.log(styles); // Logs processed CSS as a string
```
## Configuration
`bun-postcss-plugin` will use the standard `postcss.config.js` file, like many other projects do.

Binary file not shown.

@ -0,0 +1,39 @@
{
"name": "bun-postcss-plugin",
"description": "A Bun plugin to directly import and process CSS files with PostCSS.",
"version": "1.0.0",
"license": "MIT-0",
"keywords": [
"bun",
"bunjs",
"postcss",
"postcss-plugin",
"css",
"import-css",
"bun-plugin"
],
"scripts": {
"typecheck": "bunx typescript --noEmit"
},
"module": "src/index.ts",
"types": "src/types.d.ts",
"files": [
"src/types.d.ts",
"src/index.ts",
"src/plugin.ts",
"README.md",
"tsconfig.json"
],
"type": "module",
"target": "bun",
"devDependencies": {
"bun-types": "latest"
},
"peerDependencies": {
"typescript": "^5.0.0"
},
"dependencies": {
"postcss": "^8.4.30",
"postcss-load-config": "^4.0.1"
}
}

@ -0,0 +1,7 @@
/** @type {import('postcss').Config} */
export default {
plugins: {
tailwindcss: {},
autoprefixer: {},
},
};

@ -0,0 +1,4 @@
import { plugin } from "bun";
import { cssPlugin } from "./plugin";
plugin(cssPlugin);

@ -0,0 +1,22 @@
import type { BunPlugin, OnLoadResult } from "bun";
import postcss from "postcss";
import postcssrc from "postcss-load-config";
export const cssPlugin: BunPlugin = {
name: "PostCSS Loader",
setup(build) {
build.onLoad({ filter: /\.css$/ }, async (args) => {
const cssFile = await Bun.file(args.path).text();
const css = await postcssrc({
from: args.path,
to: args.path,
}).then(({ plugins }) => postcss(plugins).process(cssFile).async());
return {
loader: "object",
exports: {
default: css.css,
},
} satisfies OnLoadResult;
});
},
};

4
src/types.d.ts vendored

@ -0,0 +1,4 @@
declare module "*.css" {
var style: string;
export default style;
}

@ -0,0 +1,31 @@
{
"compilerOptions": {
/* Base Options: */
"esModuleInterop": true,
"skipLibCheck": true,
"target": "es2022",
"verbatimModuleSyntax": true,
"allowSyntheticDefaultImports": true,
"allowJs": true,
"resolveJsonModule": true,
"allowImportingTsExtensions": true,
"moduleDetection": "force",
/* Strictness */
"strict": true,
"noUncheckedIndexedAccess": true,
"forceConsistentCasingInFileNames": true,
/* If NOT transpiling with TypeScript: */
"moduleResolution": "Bundler",
"module": "ESNext",
"noEmit": true,
/* If your code doesn't run in the DOM: */
"lib": ["es2022"],
/* If you're building for a library: */
"declaration": true,
/* Bun specific options*/
"types": [
"bun-types" // add Bun global
]
},
"include": ["src/*.ts"]
}