Merge pull request #18 from perimetre/fix/Bug-with-purgecss-cleaning-…

…classes_CU-3k7em3

1.4.2

CHANGELOG.md

@@ -25,6 +25,13 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Fixed
 
+## [1.4.2] - 2021-03-08
+
+### Fixed
+
+- Fixed an issue where purgecss was purging more than it needed to
+- Fixed a bug where the WYSIWYGInput text align buttons were not toggling correctly when switching from an alignment to another
+
 ## [1.4.1] - 2021-03-04
 
 ### Fixed

docs/setup.md

@@ -38,12 +38,7 @@ You will need:
 1. Edit the `tailwind.config.js` file, adding the following `preset`:
    ```diff
    module.exports = {
-      purge: [
-         './pages/**/*.{js,ts,jsx,tsx,css}',
-         './components/**/*.{js,ts,jsx,tsx,css}',
-   +     './node_modules/@perimetre/ui/**/*.{js,ts,jsx,tsx,css}',
-   +     '!./node_modules/@perimetre/ui/**/storybookMappers.tsx'
-      ],
+   +  purge: false, // Turning tailwindcss purge off because we're customizing the execution order in postcss.config.js
       darkMode: false, // or 'media' or 'class'
       theme: {
          extend: {}
@@ -56,7 +51,33 @@ You will need:
    +  presets: [require('@perimetre/ui').defaultPreset]
    };
    ```
-2. [Check out the preset to learn more about the values](../src/presets/default-preset.js)
+1. Edit the `postcss.config.js` file, adding the following `preset`:
+   ```diff
+   module.exports = {
+      plugins: {
+   +     'postcss-import': {}, // Import must come before tailwind
+         tailwindcss: {},
+   +     // Other plugins come after tailwind and before postcss-purgecss + autoprefixer
+   +     'postcss-nested': {},
+   +     'postcss-combine-media-query': {}, // Media query must come before duplicated-selectors
+   +     'postcss-combine-duplicated-selectors': {},
+   +     // postcss-purgecss should always be last before autoprefixer
+   +     '@fullhuman/postcss-purgecss': {
+   +        content: [
+   +          // All project components
+   +          './pages/**/*.{js,ts,jsx,tsx,css}',
+   +          './components/**/*.{js,ts,jsx,tsx,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
+   +        ]
+   +     },
+   +     // autoprefixer should always be the last one
+         autoprefixer: {}
+      }
+   };
+   ```
+1. [Check out the preset to learn more about the values](../src/presets/default-preset.js)
 
 ### Importing the font
 

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@perimetre/ui",
   "description": "A component library made by @perimetre",
-  "version": "1.4.1",
+  "version": "1.4.2",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/perimetre/ui.git"
@@ -37,7 +37,7 @@
     "check-commit": "npm run type-check && npm run prettier && npm run lint:css && npm run lint:fix && npm run rollup:build",
     "storybook": "start-storybook -s ./public -p 6006",
     "build-storybook": "build-storybook -s ./public",
-    "serve-storybook": "npm run build-storybook && http-server ./storybook-static",
+    "serve-storybook": "npm run build-storybook && http-server ./storybook-static -c-1",
     "rollup:build": "rollup -c",
     "rollup:watch": "rollup -c -w",
     "prepare": "npm run rollup:build"

postcss.config.js

@@ -6,6 +6,9 @@ module.exports = {
     'postcss-nested': {},
     'postcss-combine-media-query': {}, // Media query must come before duplicated-selectors
     'postcss-combine-duplicated-selectors': {},
+    '@fullhuman/postcss-purgecss': {
+      content: ['./src/**/*.{js,ts,jsx,tsx,css}', './.storybook/**/*.{js,ts,jsx,tsx,css}']
+    },
     autoprefixer: {}
   }
 };

src/utils/wysiwyg.tsx

@@ -56,8 +56,9 @@ export const toggleBlockData = async (
   // For each entry in the provided data object
   Object.entries(data || {}).forEach(([key, value]) => {
     // If the current data DOES NOT have the key
-    if (!currentData.has(key)) {
-      // Add the key to the new data, because we should keep ip
+    // Of if there is but the value is a different one, we then want to update the value
+    if (!currentData.has(key) || currentData.get(key) !== value) {
+      // Add the key to the new data, because we should keep it
       newData[key] = value;
     }
 

tailwind.config.js

@@ -1,6 +1,7 @@
 // Ref: https://tailwindcss.com/docs/configuration
+
 module.exports = {
-  purge: ['./src/**/*.{js,ts,jsx,tsx,css}', './.storybook/**/*.{js,ts,jsx,tsx,css}'],
+  purge: false,
   darkMode: false, // or 'media' or 'class'
   presets: [require('./src/presets/default-preset')]
 };