Merge pull request #30 from perimetre/2.1

2.1

CHANGELOG.md

@@ -25,6 +25,22 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [2.1.0] - 2021-03-24
+
+### 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
+- Fixed a bug in disabled buttons to display a regular cursor on hover
+
 ## [2.0.0] - 2021-03-12
 
 ### **Breaking changes**

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

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"

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

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 */

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;
+  }
+}

src/components/index.css

@@ -18,3 +18,4 @@
 @import './HTMLParsedContent';
 @import './WYSIWYGInput';
 @import './DragFileUploadInput';
+@import './Container';