fix(panel): patch internal panel css

crimx · Aug 4, 2018 · befe9ce · befe9ce
1 parent 1bffdc9
commit befe9ce
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 26 deletions.
diff --git a/package.json b/package.json
@@ -108,6 +108,7 @@
     "minimist": "^1.2.0",
     "node-sass": "^4.7.2",
     "postcss-flexbugs-fixes": "3.3.0",
+    "postcss-increase-specificity": "^0.6.0",
     "postcss-loader": "2.1.1",
     "postcss-safe-important": "^1.1.0",
     "raf": "3.4.0",

diff --git a/scripts/build.js b/scripts/build.js
@@ -28,16 +28,18 @@ const fs = require('fs-extra')
 const webpack = require('webpack')
 const config = require('../config/webpack.config.prod')
 const paths = require('../config/paths')
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles')
+// const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles')
 const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages')
 const FileSizeReporter = require('react-dev-utils/FileSizeReporter')
 const printBuildError = require('react-dev-utils/printBuildError')
-const semver = require('semver')
+// const semver = require('semver')
+var postcss = require('postcss')
+var increaseSpecificity = require('postcss-increase-specificity')
 
 const measureFileSizesBeforeBuild =
   FileSizeReporter.measureFileSizesBeforeBuild
 const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild
-const useYarn = fs.existsSync(paths.yarnLockFile)
+// const useYarn = fs.existsSync(paths.yarnLockFile)
 
 // These sizes are pretty large. We'll warn for bundles exceeding them.
 const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024
@@ -89,6 +91,7 @@ measureFileSizesBeforeBuild(paths.appBuild)
       process.exit(1)
     }
   )
+  .then(patchInternalCSS)
   .then(generateByBrowser)
 
 // Create the production build and print the deployment instructions.
@@ -200,3 +203,19 @@ function writeLocales (localesPath, localesJSON) {
     }))
   )
 }
+
+function patchInternalCSS () {
+  const cssPath = path.join(paths.appBuild, 'panel-internal.css')
+  const panelCSS = fs.readFileSync(cssPath, 'utf8')
+  const output = postcss([
+    increaseSpecificity({
+      repeat: 1,
+      overrideIds: false,
+      stackableRoot: '.panel-StyleRoot'
+    })
+  ])
+  .process(panelCSS)
+  .css
+
+  fs.writeFileSync(cssPath, output)
+}
diff --git a/src/panel-internal/panel-internal.scss b/src/panel-internal/panel-internal.scss
@@ -1,28 +1,26 @@
-.panel-StyleRoot {
-  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
-    font-weight: 700;
-    line-height: 1.6;
-  }
-
-  h1, .h1 {
-    font-size: 1.5em;
-  }
+h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
+  font-weight: 700;
+  line-height: 1.6;
+}
 
-  h2, .h2 {
-    font-size: 13px;
-  }
+h1, .h1 {
+  font-size: 1.5em;
+}
 
-  h3, .h3 {
-    font-size: 1.17em;
-  }
+h2, .h2 {
+  font-size: 13px;
+}
 
-  h4, .h4 {
-    font-size: 1em;
-  }
+h3, .h3 {
+  font-size: 1.17em;
+}
 
-  h5, .h5, h6, .h6 {
-    font-size: 0.83em;
-  }
+h4, .h4 {
+  font-size: 1em;
+}
 
-  @import '../panel/panel';
+h5, .h5, h6, .h6 {
+  font-size: 0.83em;
 }
+
+@import '../panel/panel';
diff --git a/yarn.lock b/yarn.lock
@@ -6279,6 +6279,10 @@ [email protected], object-assign@^4.0.1, object-assign@^4.1.0, object-assign@^4.
   version "4.1.1"
   resolved "http://registry.npm.taobao.org/object-assign/download/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
 
+object-assign@^3.0.0:
+  version "3.0.0"
+  resolved "http://registry.npm.taobao.org/object-assign/download/object-assign-3.0.0.tgz#9bedd5ca0897949bca47e7ff408062d549f587f2"
+
 object-copy@^0.1.0:
   version "0.1.0"
   resolved "http://registry.npm.taobao.org/object-copy/download/object-copy-0.1.0.tgz#7e7d858b781bd7c991a41ba975ed3812754e998c"
@@ -6780,6 +6784,15 @@ [email protected]:
   dependencies:
     postcss "^6.0.1"
 
+postcss-increase-specificity@^0.6.0:
+  version "0.6.0"
+  resolved "http://registry.npm.taobao.org/postcss-increase-specificity/download/postcss-increase-specificity-0.6.0.tgz#28facf95b24527aaaf8e687915da837ab9bd814c"
+  dependencies:
+    escape-string-regexp "^1.0.5"
+    object-assign "^3.0.0"
+    postcss "^5.1.2"
+    string.prototype.repeat "^0.2.0"
+
 postcss-load-config@^1.1.0, postcss-load-config@^1.2.0:
   version "1.2.0"
   resolved "http://registry.npm.taobao.org/postcss-load-config/download/postcss-load-config-1.2.0.tgz#539e9afc9ddc8620121ebf9d8c3673e0ce50d28a"
@@ -6986,7 +6999,7 @@ postcss-zindex@^2.0.1:
     postcss "^5.0.4"
     uniqs "^2.0.0"
 
-postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.2.16:
+postcss@^5.0.10, postcss@^5.0.11, postcss@^5.0.12, postcss@^5.0.13, postcss@^5.0.14, postcss@^5.0.16, postcss@^5.0.2, postcss@^5.0.4, postcss@^5.0.5, postcss@^5.0.6, postcss@^5.0.8, postcss@^5.1.2, postcss@^5.2.16:
   version "5.2.18"
   resolved "http://registry.npm.taobao.org/postcss/download/postcss-5.2.18.tgz#badfa1497d46244f6390f58b319830d9107853c5"
   dependencies:
@@ -8708,6 +8721,10 @@ string-width@^1.0.1, string-width@^1.0.2:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
+string.prototype.repeat@^0.2.0:
+  version "0.2.0"
+  resolved "http://registry.npm.taobao.org/string.prototype.repeat/download/string.prototype.repeat-0.2.0.tgz#aba36de08dcee6a5a337d49b2ea1da1b28fc0ecf"
+
 string_decoder@^1.0.0, string_decoder@~1.1.1:
   version "1.1.1"
   resolved "http://registry.npm.taobao.org/string_decoder/download/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"