[MERGE] PR #1 - woodbrettm/v1-release

.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

.changeset/config.json

@@ -0,0 +1,11 @@
+{
+ "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+ "changelog": "@changesets/cli/changelog",
+ "commit": false,
+ "fixed": [],
+ "linked": [],
+ "access": "restricted",
+ "baseBranch": "main",
+ "updateInternalDependencies": "patch",
+ "ignore": []
+}

.changeset/thirty-terms-jog.md

@@ -0,0 +1,35 @@
+---
+'css-preflight': major
+---
+
+This is the first major release of css-preflight.
+
+### Repo Changes
+
+- Stylelint added.
+- Automated deployments and versioning using changesets and github actions.
+- Build system removed and source css files directly exposed instead of dist.
+
+### CSS Changes
+
+- Browser prefixes have been removed (e.g. -webkit-, -moz-), with the intent for consumers
+ of this package to use `autoprefixer` in their own build process.
+
+- As the source css files are exposed directly to the package.json exports, the code is
+ unminifed. Was not minified previously, just noting as an FYI here.
+
+- font-family properties using system-ui fonts have been changed to using either web-safe fonts
+ or removed entirely. system-ui fonts can be unpredictable given they depend not only on the OS
+ version, but also the OS language. Removed in favor of the dev adding these intentionally
+ on their own if desired.
+
+- `import 'css-preflight'` now only imports the reset/normalizer preflight, not the enhancements.
+
+Possible imports are now as follows:
+
+```javascript
+import 'css-preflight'; // styles/preflight.css
+import 'css-preflight/preflight'; // ALIAS: styles/preflight.css
+import 'css-preflight/enhancements'; // styles/enhancements.css
+import 'css-preflight/rem-same-px'; // styles/rem-same-px
+```

.devcontainer/devcontainer.json

@@ -1,14 +1,15 @@
 {
+ "$schema": "https://raw.githubusercontent.com/devcontainers/spec/main/schemas/devContainer.schema.json",
  "name": "css-preflight",
  "build": {
  "dockerfile": "Dockerfile"
  },
- "runArgs": ["--name", "woodbrettm.css-preflight.dev"],
+ "runArgs": ["--name", "css-preflight.dev"],
  "postCreateCommand": ["pnpm", "install"],
  "remoteUser": "node",
  "customizations": {
  "vscode": {
- "extensions": ["esbenp.prettier-vscode"]
+ "extensions": ["esbenp.prettier-vscode", "stylelint.vscode-stylelint"]
  }
  }
 }

.github/workflows/pr-main.yml

@@ -0,0 +1,34 @@
+name: PR To Main Branch
+
+on:
+ pull_request:
+ types:
+ - opened
+ - synchronize
+ branches:
+ - main
+
+jobs:
+ lint:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout Repo
+ uses: actions/checkout@v4
+
+ - name: Install PNPM
+ uses: pnpm/action-setup@v2
+ with:
+ version: 8
+ run_install: false
+
+ - name: Install Node.js
+ uses: actions/setup-node@v3
+ with:
+ node-version: 20.x
+ cache: pnpm
+
+ - name: Install Dependencies
+ run: pnpm install --frozen-lockfile
+
+ - name: Lint Styles
+ run: pnpm run lint

.github/workflows/push-main.yml

@@ -0,0 +1,50 @@
+name: Push To Main Branch
+
+on:
+ push:
+ branches:
+ - main
+
+# So no other instances of workflow running at same time
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+ release:
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout Repo
+ uses: actions/checkout@v4
+
+ - name: Install PNPM
+ uses: pnpm/action-setup@v2
+ with:
+ version: 8
+ run_install: false
+
+ - name: Install Node.js
+ uses: actions/setup-node@v3
+ with:
+ node-version: 20.x
+ cache: pnpm
+
+ - name: Install Dependencies
+ run: pnpm install --frozen-lockfile
+
+ - name: Lint Styles
+ run: pnpm run lint
+
+ - name: 1Password Load Tokens
+ id: op-tokens
+ uses: 1password/load-secrets-action@v1
+ with:
+ export-env: true
+ env:
+ OP_SERVICE_ACCOUNT_TOKEN: ${{ secrets.OP_SERVICE_ACCOUNT_TOKEN }}
+ NPM_TOKEN: op:https://dev/css-preflight/github-actions-npm-token
+
+ - name: Release Pull Request or Publish to NPM
+ id: changesets
+ uses: changesets/action@v1
+ env:
+ GTHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ # NPM_TOKEN: set in steps.op-tokens (export-env: true)

.gitignore

@@ -1,3 +1,2 @@
 node_modules
-dist
 .pnpm-store

.prettierignore

@@ -0,0 +1,9 @@
+# Package-Related
+*lock.*
+.pnpm-store
+node_modules
+
+# Git-Related
+.git
+.gitignore
+.gitattributes

.prettierrc.json

@@ -1,6 +1,10 @@
 {
+ "$schema": "https://json.schemastore.org/prettierrc",
  "tabWidth": 2,
+ "endOfLine": "lf",
+ "printWidth": 80,
+ "useTabs": false,
  "semi": true,
  "trailingComma": "all",
  "singleQuote": true
-}
+}

.stylelintignore

@@ -0,0 +1 @@
+node_modules

.stylelintrc.json

@@ -0,0 +1,4 @@
+{
+ "$schema": "https://json.schemastore.org/stylelintrc.json",
+ "extends": "stylelint-config-standard"
+}

.vscode/settings.json

@@ -2,5 +2,10 @@
  "files.eol": "\n",
  "editor.tabSize": 2,
  "editor.formatOnSave": true,
- "editor.defaultFormatter": "esbenp.prettier-vscode"
+ "editor.defaultFormatter": "esbenp.prettier-vscode",
+ "css": {
+ "lint": {
+ "propertyIgnoredDueToDisplay": "ignore"
+ }
+ }
 }

LICENSE_TAILWIND.md

@@ -1,3 +1,6 @@
+> The below copyright applies to `./styles/preflight.css` as it's derived directly
+> from Tailwind's preflight css.
+
 MIT License
 
 Copyright (c) Tailwind Labs, Inc.

README.md

@@ -1,41 +1,87 @@
 # CSS Preflight
 
-[![npm](https://img.shields.io/npm/v/css-preflight)](https://www.npmjs.com/package/css-preflight)
+[![npm](https://img.shields.io/npm/v/css-preflight?color=red)](https://www.npmjs.com/package/css-preflight)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://github.com/woodbrettm/css-preflight/blob/main/LICENSE.md)
 
-This is a CSS browser normalizer based on Tailwind's preflight,
-with additional enhancements like smooth scrolling. The original
-preflight has several Tailwind-isms like tailwind-specific css variables,
-and usage of the tailwind `theme()` function, which have been removed.
+This is a CSS browser reset based on Tailwind's preflight, optimized for non-Tailwind projects. **Optional** enhancements like smooth scrolling and other utilities are also provided (see usage).
 
-## Core Usage:
+## Preflight
 
-The package `main:` links to a bundled `core.css` file, so simply import the package into
-the root project layout file, such as into `Layout.astro` for example. The core contains
-tailwind's preflight with additional enhancements.
+The following adjustments have been made to Tailwind's preflight, located in `styles/preflight.css`:
 
-Note: the css is not minified.
+1. Tailwind-specific CSS variables removed.
+2. Tailwind postcss functions like `theme()` removed.
+3. Properties with vendor prefixes (e.g. `-webkit-`, `-moz-`) have been removed, to avoid duplication
+ from autoprefixer when used. Inline comments in the `preflight.css` source code indicate which of
+ these have been adjusted and note the original existing prefix.
+4. system-ui fonts have been removed completely from `font-family` properties in exchange for
+ either websafe fonts (e.g. Courier New for monospace elements), or removed completely (in the case
+ of the original preflight's font-family on `:root`).
 
-```javascript
-import 'css-preflight'; // imports core
+#### Removing System UI Fonts
+
+system-ui fonts can be problematic as they not only depend on the OS version, but on the language
+settings of the OS as well. These have been removed as it's felt they're too unpredictable to be
+left in as a preflight, and better left for a dev to intentionally specify them.
+
+## Installation
+
+```bash
+#pnpm
+pnpm add css-preflight
+
+#npm
+npm install css-preflight
 ```
 
-## Utilities
+## Usage
+
+The exports are broken down into 3 main CSS files. Completely
+unprocessed so it's up to the dev to pass them through optimizations like
+Autoprefixer and minification.
+
+Simply import these into the root layout file (like `Layout.astro` for example).
+They should be imported first before any other CSS imports.
+
+#### Possible Imports
+
+```javascript
+import 'css-preflight'; // styles/preflight.css
+import 'css-preflight/preflight'; // ALIAS: styles/preflight.css
 
-The package also comes with utilities:
+import 'css-preflight/enhancements'; // styles/enhancements.css
 
-### `rem-same-px`
+import 'css-preflight/rem-same-px'; // styles/rem-same-px
+```
 
-Sets rem equal to 1px at the root, so they can be used interchangeably.
-This calculation is done using `%`, so the browser root font size
-will still affect using `rem` for accessibility purposes.
+#### Typical Setup
 
 ```javascript
-import 'css-preflight/rem-same-px';
+import 'css-preflight/preflight';
+import 'css-preflight/enhancements';
 ```
 
+### Preflight
+
+Tailwind preflight (with adjustments mentioned previously). Can either do a bare
+`css-preflight` import, or use the more verbose option of `css-preflight/preflight`.
+Both are exactly the same.
+
+### Enhancements
+
+These are small enhancements added to the main preflight:
+
+- Enables smooth scrolling to anchor points (e.g. #about). Disabled for `prefers-reduced-motion`.
+- Adds `text-wrap: balance` on h1-h6 and blockquote. Helps prevent hanging words on newlines.
+
+### Rem Same Px
+
+Sets rem equal to 1px at the root for easier design-dev handoff. This calculation is done
+using `%`, so the browser root font size will still affect fonts using `rem` for
+accessibility purposes.
+
 ### License
 
 The repo falls under MIT licensing, contained in the LICENSE.md file.
-Usage is also subject to Tailwind's licensing (MIT), which is included
-in the repo for reference (LICENSE_TAILWIND).
+Usage of the `preflight.css` file is also subject to Tailwind's licensing (MIT), which is included
+in the repo for reference.

package.json

@@ -1,38 +1,49 @@
 {
+ "$schema": "https://json.schemastore.org/package",
  "name": "css-preflight",
  "version": "0.2.4",
- "description": "Tailwind preflight with some added enhancements.",
- "main": "./dist/core.css",
- "style": "./dist/core.css",
  "type": "module",
- "exports": {
- ".": "./dist/core.css",
- "./rem-same-px": "./dist/rem-same-px.css"
+ "license": "MIT",
+ "description": "CSS browser reset based on Tailwind's preflight, with optional enhancements.",
+ "author": {
+ "name": "Brett Wood",
+ "url": "https://github.com/woodbrettm"
+ },
+ "bugs": "https://github.com/woodbrettm/css-preflight/issues",
+ "homepage": "https://github.com/woodbrettm/css-preflight",
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/woodbrettm/css-preflight"
  },
  "keywords": [
  "css",
  "preflight",
  "normalize",
- "browser reset"
+ "reset",
+ "normalizer",
+ "browser"
  ],
- "author": "Brett Wood",
+ "scripts": {
+ "lint": "stylelint \"./styles/*.css\""
+ },
+ "main": "./styles/preflight.css",
+ "style": "./styles/preflight.css",
+ "exports": {
+ ".": "./styles/preflight.css",
+ "./preflight": "./styles/preflight.css",
+ "./enhancements": "./styles/enhancements.css",
+ "./rem-same-px": "./styles/rem-same-px.css"
+ },
  "files": [
  "LICENSE.md",
  "LICENSE_TAILWIND.md",
- "dist/core.css",
- "dist/rem-same-px.css"
+ "styles",
+ "package.json",
+ "README.md"
  ],
- "repository": {
- "type": "git",
- "url": "https://github.com/woodbrettm/css-preflight"
- },
- "license": "MIT",
- "bugs": "https://github.com/woodbrettm/css-preflight/issues",
- "homepage": "https://github.com/woodbrettm/css-preflight",
- "scripts": {
- "build": "vite build"
- },
  "devDependencies": {
- "vite": "4.5.0"
+ "@changesets/cli": "2.27.1",
+ "stylelint": "15.11.0",
+ "stylelint-config-standard": "34.0.0"
  }
 }