From f6e7f964f58e5acb03ceee253ce9e6c663037bdf Mon Sep 17 00:00:00 2001 From: adarleyjrr <50996706+adarleyjrr@users.noreply.github.com> Date: Wed, 24 Mar 2021 11:47:53 -0400 Subject: [PATCH 1/3] feat: new container classes, updated setup instructions --- CHANGELOG.md | 7 +++++++ docs/setup.md | 17 +++++------------ package-lock.json | 2 +- postcss.config.js | 25 +++++++++++-------------- src/components/Container/index.css | 12 ++++++++++++ src/components/index.css | 1 + 6 files changed, 37 insertions(+), 27 deletions(-) create mode 100644 src/components/Container/index.css diff --git a/CHANGELOG.md b/CHANGELOG.md index a0ed107..c3cf424 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,10 +21,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changes +- Updated setup instructions to use Tailwind's default extractor in purgecss configuration + ### Added +- Added new class `pui-container` extending Tailwind's default `container` class, but only allowing maximum width of 1280px instead of allowing up to 1536px +- Added new class `pui-container-large` extending Tailwind's default `container` class + ### Fixed +- Fixed bug in postcss purge script extractor method, by changing it for Tailwind's default extractor method + ## [2.0.0] - 2021-03-12 ### **Breaking changes** diff --git a/docs/setup.md b/docs/setup.md index 1e6063d..624d2d1 100644 --- a/docs/setup.md +++ b/docs/setup.md @@ -65,22 +65,15 @@ You will need: + // postcss-purgecss should always be last before autoprefixer and only run in production + ...(process.env.NODE_ENV === 'production' && { + '@fullhuman/postcss-purgecss': { - + extractors: [ - + { - + // Fix for escaped tailwind prefixes (sm:, lg:, hover:, etc) - + // https://github.com/tailwindlabs/tailwindcss/issues/391#issuecomment-746829848 - + extractor: (content) => { - + return content.match(/[A-Za-z0-9-._:\/]+/g) || []; - + }, - + extensions: ['css', 'js', 'ts', 'tsx'] - + } - + ], + + defaultExtractor: (content) => { + + const extractor = require('tailwindcss/lib/lib/purgeUnusedStyles').tailwindExtractor; + + const preserved = [...extractor(content)]; + + return preserved; + + }, + content: [ + // All project components + './pages/**/*.{js,ts,jsx,tsx}', + './src/components/**/*.{js,ts,jsx,tsx}', - + // Consider all css files imported from other libs - + './node_modules/react-toastify/dist/ReactToastify.css', + // Consider the components in the ui + './node_modules/@perimetre/ui/**/*.{js,ts,jsx,tsx,css}', + '!./node_modules/@perimetre/ui/**/storybookMappers.tsx' // ignore the storybookMappers.tsx inside @perimetre/ui because that should only be used by the ui package itself diff --git a/package-lock.json b/package-lock.json index 2a5b355..c585e1f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@perimetre/ui", - "version": "1.4.4", + "version": "2.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/postcss.config.js b/postcss.config.js index 1c6d79c..47b76d7 100644 --- a/postcss.config.js +++ b/postcss.config.js @@ -8,20 +8,17 @@ module.exports = { 'postcss-combine-duplicated-selectors': {}, 'postcss-flexbugs-fixes': {}, // Required to use the storybook beta with postcss8 and to use with nextjs '@fullhuman/postcss-purgecss': { - extractors: [ - { - /** - * Fix for escaped tailwind prefixes (sm:, lg:, hover:, etc) - * https://github.com/tailwindlabs/tailwindcss/issues/391#issuecomment-746829848 - * - * @param content the content to be parsed - */ - extractor: (content) => { - return content.match(/[A-Za-z0-9-._:\/]+/g) || []; - }, - extensions: ['css', 'js', 'ts', 'tsx'] - } - ], + /** + * Use tailwind extractor + * + * @param content the content to be parsed + */ + defaultExtractor: (content) => { + const extractor = require('tailwindcss/lib/lib/purgeUnusedStyles').tailwindExtractor; + const preserved = [...extractor(content)]; + + return preserved; + }, content: ['./src/**/*.{js,ts,jsx,tsx,css}', './.storybook/**/*.{js,ts,jsx,tsx,css}'] }, // autoprefixer should always be the last one diff --git a/src/components/Container/index.css b/src/components/Container/index.css new file mode 100644 index 0000000..2ca4501 --- /dev/null +++ b/src/components/Container/index.css @@ -0,0 +1,12 @@ +@layer components { + .pui-container { + @apply container; + + @screen 2xl { + max-width: 1280px; + } + } + .pui-container-large { + @apply container; + } +} diff --git a/src/components/index.css b/src/components/index.css index 439ba83..8c41f65 100644 --- a/src/components/index.css +++ b/src/components/index.css @@ -18,3 +18,4 @@ @import './HTMLParsedContent'; @import './WYSIWYGInput'; @import './DragFileUploadInput'; +@import './Container'; From 5dfc7f1b4b42fdd9889c97453eb331aa68a11770 Mon Sep 17 00:00:00 2001 From: adarleyjrr <50996706+adarleyjrr@users.noreply.github.com> Date: Wed, 24 Mar 2021 12:05:22 -0400 Subject: [PATCH 2/3] fix: display regular cursor on disabled buttons --- CHANGELOG.md | 1 + src/components/Button/index.css | 5 +++++ 2 files changed, 6 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index c3cf424..b403f95 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -31,6 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed - Fixed bug in postcss purge script extractor method, by changing it for Tailwind's default extractor method +- Fixed a bug in disabled buttons to display a regular cursor on hover ## [2.0.0] - 2021-03-12 diff --git a/src/components/Button/index.css b/src/components/Button/index.css index 994a36d..2457042 100644 --- a/src/components/Button/index.css +++ b/src/components/Button/index.css @@ -21,6 +21,11 @@ /* Moves the button down a little bit to give feedback */ --tw-translate-y: 0.125rem; } + + &:disabled { + /* Remove pointer */ + @apply cursor-default; + } } /* The default variant */ From 9d9826e219b87da6b731468b5c091ed50226dd8b Mon Sep 17 00:00:00 2001 From: adarleyjrr <50996706+adarleyjrr@users.noreply.github.com> Date: Wed, 24 Mar 2021 12:07:48 -0400 Subject: [PATCH 3/3] build: bumping version: 2.1.0 --- CHANGELOG.md | 8 ++++++++ package.json | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b403f95..4765597 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -21,6 +21,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Changes +### Added + +### Fixed + +## [2.1.0] - 2021-03-24 + +### Changes + - Updated setup instructions to use Tailwind's default extractor in purgecss configuration ### Added diff --git a/package.json b/package.json index 7a381a6..ab021f4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "@perimetre/ui", "description": "A component library made by @perimetre", - "version": "2.0.0", + "version": "2.1.0", "repository": { "type": "git", "url": "git+https://github.com/perimetre/ui.git"