Merge pull request #17 from tonytino/add-postcss

Add postcss

.eslintignore

@@ -121,8 +121,6 @@ dist
 .babel-config-test/
 
 # build artifacts
-bundle.js
-bundle.js.map
 storybook-static/
 
 # config files

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports = {
     es2021: true,
   },
   extends: [
+    'eslint:recommended',
     'plugin:react/recommended',
     'airbnb-typescript',
     'prettier',
@@ -15,14 +16,19 @@ module.exports = {
   ],
   parser: '@typescript-eslint/parser',
   parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    ecmaVersion: 2021,
+    sourceType: 'module',
     project: './tsconfig.eslint.json',
   },
   plugins: [
+    '@typescript-eslint',
     'jest',
-    'react',
     'jest-dom',
+    'react',
     'testing-library',
-    '@typescript-eslint',
   ],
   rules: {
     'react/jsx-props-no-spreading': 'off',

.github/workflows/npm-publish.yml

@@ -20,7 +20,7 @@ jobs:
       - run: npm ci
       # Test our code
       - run: npm run test
-      # Create our bundle.js & bundle.js.map using the build script
+      # Create our types and bundles in ./dist
       - run: npm run build
       # Publish our package to npm
       - run: npm publish

.github/workflows/on-push-pull-main-test-stylelint.yml

@@ -0,0 +1,26 @@
+name: CI - Test Stylelint
+
+# Controls when the action will run
+on:
+  # Triggers the workflow on push & pull request events for the main branch
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+# A workflow run is one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    name: Run Stylelint Test Script
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent tasks that will be executed as part of the job
+    steps:
+      # Pulls in your repository so your job can access your code
+      - uses: actions/checkout@v2
+      # Perform a clean install
+      - run: npm ci
+      # Runs the test script
+      - run: npm run test:css

.gitignore

@@ -121,6 +121,4 @@ dist
 .babel-config-test/
 
 # build artifacts
-bundle.js
-bundle.js.map
 storybook-static/

.prettierignore

@@ -121,8 +121,6 @@ dist
 .babel-config-test/
 
 # build artifacts
-bundle.js
-bundle.js.map
 storybook-static/
 
 # other

.storybook/main.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
@@ -6,4 +8,46 @@ module.exports = {
     '@storybook/addon-links',
     '@storybook/theming',
   ],
+  webpackFinal: async (config) => {
+    // Mirror the aliases we configure in rollup.config.js
+    config.resolve.alias = {
+      src: path.resolve(__dirname, '../src'),
+    };
+
+    // Mirror the css functionality we support in rollup.config.js
+    // 1. Filter out any non-css files
+    config.module.rules = config.module.rules.filter(
+      (f) => f.test.toString() !== '/\\.css$/'
+    );
+
+    // 2. Mirror css features in rollup.config.js
+    config.module.rules.push({
+      test: /\.css$/i,
+      exclude: /node_modules/,
+      use: [
+        // Order matters
+        'style-loader',
+        {
+          loader: 'css-loader',
+          options: {
+            // Enables css modules behavior for files containing '*.module.css'
+            modules: { auto: true },
+            // importLoaders: 1 tells webpack to anticipate postcss-loader next
+            importLoaders: 1,
+          },
+        },
+        {
+          loader: 'postcss-loader',
+          options: {
+            postcssOptions: {
+              // Mirror the config referenced by rollup.config.js
+              config: path.resolve(__dirname, '../postcss.config.js'),
+            },
+          },
+        },
+      ],
+    });
+
+    return config;
+  },
 };

.storybook/preview.js

@@ -1,4 +1,5 @@
 import { themes } from '@storybook/theming';
+import '../src/styles/variables.css';
 
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },

CHANGELOG.md

@@ -2,7 +2,26 @@
 
 Based on [Keep a CHANGELOG]. 🪵
 
-## [0.5.0] - 2021-02-03
+## [0.6.0] - 2021-02-06
+
+### Changes
+
+- Add support for native CSS, CSS Modules, and Stage 2 CSS features (`postcss-preset-env`)
+  - Add and configure `postcss`
+  - Add support for CSS mocking during testing
+  - Configure `rollup` to process CSS
+  - Configure Storybook's webpack to support new css features
+- Add new project-wide css files (`src/styles`)
+- Add and configure Stylelint
+- Add configuration file for `lint-staged`
+- Add some features to example component to demonstrate CSS functionality
+- Add and update scripts
+- Update README
+- Upgrade all deps
+- Add new GitHub CI check
+- Remove engine specification from `package.json`
+
+## [0.5.1] - 2021-02-03
 
 ### Changes
 
@@ -95,6 +114,8 @@ Based on [Keep a CHANGELOG]. 🪵
 
 <!-- RELEASE LINKS -->
 
+[0.6.0]: https://github.com/tonytino/monkeyspan/releases/tag/0.6.0
+[0.5.1]: https://github.com/tonytino/monkeyspan/releases/tag/0.5.1
 [0.5.0]: https://github.com/tonytino/monkeyspan/releases/tag/0.5.0
 [0.4.1]: https://github.com/tonytino/monkeyspan/releases/tag/0.4.1
 [0.4.0]: https://github.com/tonytino/monkeyspan/releases/tag/0.4.0

README.md

@@ -1,9 +1,14 @@
 # MonkeySpan
 
+![Lang:TypeScript](https://img.shields.io/badge/Lang-TypeScript-blue)
+![CSS:PostCSS](https://img.shields.io/badge/CSS-PostCSS-c82829)
+![Build:Rollup](https://img.shields.io/badge/Build-Rollup-ef3335)
+![Compiler:Babel](https://img.shields.io/badge/Transpiler-Babel-f5da55)
+![Jest Code Coverage:100%](https://img.shields.io/badge/Jest%20Code%20Coverage-100%25-15c213)
+[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 [![npm](https://img.shields.io/npm/v/monkeyspan/latest.svg)](https://www.npmjs.com/package/monkeyspan)
-![Node.js Package](https://github.com/tonytino/monkeyspan/workflows/Node.js%20Package/badge.svg)
+![Build status](https://github.com/tonytino/monkeyspan/workflows/Node.js%20Package/badge.svg)
 [![Storybook](https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg)](https://monkeyspan.netlify.app/)
-[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg)](https://github.com/prettier/prettier)
 
 ## About
 
@@ -17,14 +22,16 @@ See this package in action in this [CodeSandbox](https://codesandbox.io/s/nervou
 
 - [Babel](https://babeljs.io/)
 - [ESLint](https://eslint.org/)
+- [gh cli]
 - [GitHub Actions](https://github.com/features/actions)
-- [Jest](https://jestjs.io/)
 - [Husky](https://github.com/typicode/husky)
+- [Jest](https://jestjs.io/)
 - [lint-staged](https://github.com/okonet/lint-staged)
+- [PostCSS](https://postcss.org/)
 - [Prettier](https://prettier.io/)
-- [prop-types](https://www.npmjs.com/package/prop-types)
 - [Rollup](https://rollupjs.org/guide/en/)
 - [Storybook](https://storybook.js.org/)
+- [Stylelint](https://stylelint.io/)
 - [@testing-library](https://testing-library.com/)
 - [TypeScript](https://www.typescriptlang.org/)
 
@@ -36,7 +43,7 @@ import { MonkeySpan } from "monkeyspan";
 function App() {
   return (
     <div>
-      <MonkeySpan ariaLabel="a monkey emoji">🐵</MonkeySpan>
+      <MonkeySpan label="a monkey emoji">🐵</MonkeySpan>
     </div>
   );
 }
@@ -56,15 +63,9 @@ _Please note that this project follows the practices of [Semantic Versioning] an
    npm install
    ```
 
-2. Start up Storybook for a live development environment:
+2. Make your changes
 
-   ```bash
-   npm run storybook
-   ```
-
-3. Make your changes
-
-4. Test them in Storybook and/or using a separate app (e.g `npx create-react-app demo`):
+3. Test them in Storybook and/or using a separate app (e.g `npx create-react-app demo`):
 
    If you want to test your changes in a separate app, [Yalc](https://github.com/wclr/yalc) is a fantastic tool for linking purposes.
 
@@ -73,7 +74,7 @@ _Please note that this project follows the practices of [Semantic Versioning] an
    yalc publish
 
    # then in the root directory of the app you're using to demo this package, run:
-   yalc link monkeyspan && npm i && npm run start
+   yalc add monkeyspan && npm run start
    ```
 
    You should now be able to use the package in that app, e.g.
@@ -82,7 +83,7 @@ _Please note that this project follows the practices of [Semantic Versioning] an
    import { MonkeySpan } from "monkeyspan";
    ```
 
-5. Make sure your changes haven't broken anything:
+4. Make sure your changes haven't broken anything:
 
    Run the tests and linting.
 
@@ -96,35 +97,38 @@ _Please note that this project follows the practices of [Semantic Versioning] an
    npm run build
    ```
 
-6. Commit your changes and merge them to the `main` branch
-
-7. See [Publishing Releases](#publishing-releases)
+5. Commit your changes, open a pull request (`npm run pr:create`), and merge them to the `main` branch.
 
+6. See [Publishing Releases](#publishing-releases).
 ### Available Scripts
 
 | Command | Params | Example | Purpose
 | - | - | - | - |
-| build | none | `npm run build` | Runs `npm run build:rollup` |
+| build | none | `npm run build` | Runs `npm run build:types && npm run build:rollup` |
+| build:link | none | `npm run build:link` | Generates a production build, then publishes it locally via [yalc], and copies to your clipboard the command to run to complete the link within an app directory via `npm run build && npx yalc publish && echo \"yalc add monkeyspan\" | pbcopy`. |
 | build:storybook | none | `npm run build:storybook` | Generates a build for storybook using `build-storybook`. |
 | build:storybook:docs | none | `npm run build:storybook:docs` | Generates a build for storybook docs using `build-storybook --docs`. |
-| build:rollup | none | `npm run build:rollup` | Generates a build and source map (`bundle.js` & `bundle.js.map`) using Rollup & Babel. |
-| clean | none | `npm run clean` | Runs `npm run clean:eslint` and `npm run clean:prettier` |
-| clean:artifacts | none | `npm run clean:artifacts` | Runs `rm -rv ./dist ; rm -rv .babel-config-test ; rm -rv storybook-static ; rm -v bundle.js ; rm -v bundle.js.map`, which attempts to delete artifacts created by other scripts. |
+| build:rollup | none | `npm run build:rollup` | Generates a build and source map (`./dist/bundle.js`, `./dist/bundle.es.js` & `./dist/bundle.js.map`) using Rollup & Babel. |
+| build:types | none | `npm run build:types` | Runs `npx tsc --project ./tsconfig.build.json --emitDeclarationOnly`, which runs the typescript compiler to generate types files. |
+| clean | none | `npm run clean` | Runs `npm run clean:eslint && npm run clean:css && npm run clean:prettier` |
+| clean:artifacts | none | `npm run clean:artifacts` | Runs `rm -rv ./dist ; rm -rv .babel-config-test ; rm -rv storybook-static`, which attempts to delete artifacts created by other scripts. |
+| clean:css | none | `npm run clean:css` | Runs `npx stylelint 'src/**/*.css' --fix`, which attempts to resolve all stylelint issues in the project. |
 | clean:eslint | none | `npm run clean:eslint` | Runs `npx eslint --fix .`, which attempts to resolve all eslint issues in the project. |
 | clean:prettier | none | `npm run clean:prettier` | Runs `npx prettier --write .`, which attempts to resolve all prettier issues in the project. |
 | pr:create | none | `gh pr create --web --fill` | Pushes your branch up, opens your browser at the create PR page for your branch, and fills in commit log info automatically. |
 | storybook | none | `npm run storybook` | Starts storybook on port 6006 via `start-storybook -p 6006`. |
 | storybook:docs | none | `npm run storybook:docs` | Starts storybook on port 6006 in docs mode via `start-storybook -p 6006 --docs`. |
 | storybook:nocache | none | `npm run storybook:nocache` | Starts storybook on port 6006 without manager caching via `start-storybook -p 6006 --no-manager-cache`. |
-| tag | `--value` | `npm run tag --value=1.2.3` | Runs `npm run tag:set --value=<value>` and `npm run tag:release --value=<value>` |
-| tag:set | `--value` | `npm run tag:set --value=1.2.3` | Runs `npx json -I -f ./package.json -e 'this.version=\"$npm_config_value\"' && npm i && git ci -am \"$npm_config_value\" && git tag $npm_config_value`, which updates the `package.json` version to the value provided, updates the `package-lock.json`, generates a commit for the changes, and tags the commit using the value provided. |
+| tag | `--value` | `npm run tag --value=1.2.3` | Runs `npm run tag:create --value=<value>` and `npm run tag:release --value=<value>` |
+| tag:create | `--value` | `npm run tag:create --value=1.2.3` | Runs `npx json -I -f ./package.json -e 'this.version=\"$npm_config_value\"' && npm i && git ci -am \"$npm_config_value\" && git tag $npm_config_value`, which updates the `package.json` version to the value provided, updates the `package-lock.json`, generates a commit for the changes, and tags the commit using the value provided. |
 | tag:release | `--value` | `npm run tag:release --value=1.2.3` | Runs `git push origin $npm_config_value && gh release create $npm_config_value --title $npm_config_value --notes-file ./CHANGELOG.md`, which pushes the tag value provided to GitHub, then produces a release for it using the `gh` cli. _You will need the [gh cli](https://github.com/cli/cli) for this command to work._ |
-| test | none | `npm run test` | Runs `npm run test:eslint && npm run test:prettier && npm run test:types && npm run test:code` |
+| test | none | `npm run test` | Runs `npm run test:eslint && npm run test:css && npm run test:prettier && npm run test:types && npm run test:code` |
 | test:babel | none | `npm run test:babel` | Runs `npx babel src/ --out-dir .babel-config-test --extensions ".ts,.tsx,.js,.jsx"`, providing a glimpse at how babel's current config transforms the src code. Find the output in `.babel-config-test/`. |
 | test:code | none | `npm run test:code` | Runs the test suite via `npx jest`. |
+| test:css | none | `npm run test:css` | Runs stylelint suite via `npx stylelint 'src/**/*.css'`. |
 | test:eslint | none | `npm run test:eslint` | Runs `npx eslint .`, providing info about issues. |
 | test:prettier | none | `npm run test:prettier` | Runs `npx prettier --check .`, providing info about issues. |
-| test:types | none | `npm run test:types` | Runs `npx tsc`, which runs the typescript compiler and will raise typescript issues. |
+| test:types | none | `npm run test:types` | Runs `npx tsc --project ./tsconfig.eslint.json --noEmit`, which checks for typescript errors without emitting any files. |
 
 ### Publishing Releases
 
@@ -134,10 +138,10 @@ In order to generate a release, you need to produce a new package version and a
 
 For example, let's say you want to add a component or feature to this package.
 
-To do so, you'd simply add your component/feature, commit your work, then produce your version via:
+To do so, you'd simply follow the instructions in [Making Changes](#making-changes), then produce your version via:
 
-1. Determine what type of changes you've made per [Semantic Versioning] to identify what the next version for this package will be. Check the [`package.json`](./package.json)'s current version to begin.
-2. Add an entry to the [CHANGELOG]
+1. Determine what type of changes you've made per [Semantic Versioning] to identify what the next version for this package will be. Check the [`package.json`](./package.json#L3)'s current version to begin.
+2. Add an entry to the [CHANGELOG].
 3. Run the following command with your new version in place of `<VERSION>`:
 
    ```bash
@@ -156,3 +160,5 @@ To do so, you'd simply add your component/feature, commit your work, then produc
 [npm]: https://www.npmjs.com/package/monkeyspan
 [Semantic Versioning]: https://semver.org
 [Storybook]: https://monkeyspan.netlify.app/
+[gh cli]: https://github.com/cli/cli
+[yalc]: https://github.com/wclr/yalc

babel.config.js

@@ -1,9 +1,6 @@
-const ignore = ['./src/.example-stories/'];
-
 const plugins = [
   // https://babeljs.io/docs/en/babel-plugin-transform-runtime#options
   ['@babel/plugin-transform-runtime', {}],
-  ['transform-react-remove-prop-types', { removeImport: true }],
 ];
 
 const presets = [
@@ -26,4 +23,4 @@ const presets = [
 ];
 
 // https://babeljs.io/docs/en/options
-module.exports = { ignore, plugins, presets };
+module.exports = { plugins, presets };