Merge pull request json-editor#675 from json-editor/feature/merges-20…

…200227

Feature/merges 20200227

.gitignore

@@ -5,3 +5,4 @@
 /tests/codeceptjs/output
 .vscode
 .env
+/src/themes/*.json

build/CssToJson.js

@@ -0,0 +1,55 @@
+const glob = require('glob')
+const fs = require('fs')
+const path = require('path')
+const css2json = require('css2json')
+
+class CssToJson {
+  constructor (params) {
+    this.pattern = params.pattern
+    this.jsonPattern = params.jsonPattern
+  }
+
+  apply (compiler) {
+    compiler.hooks.entryOption.tap('CssToJson', (context, entry) => {
+      glob(this.pattern, (err, files) => {
+        if (err) throw err
+        files.forEach(this.convert)
+      })
+    })
+  }
+
+  convert (file) {
+    const target =
+      path.join(path.dirname(path.resolve(file)), path.basename(file, '.css')) + '.json'
+
+    if (fs.existsSync(target) && (fs.statSync(file).mtime < fs.statSync(target).mtime)) {
+      return
+    }
+
+    const css = fs.readFileSync(file, { encoding: 'utf-8' })
+    const rules = Object.entries(css2json(css))
+      .map(
+        ([selector, block]) =>
+          `"${formatSelector(selector)}":"${concatBlock(block)}"`
+      )
+      .join(',')
+    fs.writeFileSync(target, `{${rules}}`)
+  }
+}
+
+function formatSelector (selector) {
+  return _fixQuote(selector).replace(/\r?\n/g, ' ')
+}
+
+function concatBlock (value) {
+  const block = Object.entries(value)
+    .map(([property, value]) => `${property}:${value}`)
+    .join(';')
+  return _fixQuote(block)
+}
+
+function _fixQuote (str) {
+  return str.replace(/"/g, "'")
+}
+
+module.exports = CssToJson

config/webpack.common.js

@@ -1,7 +1,7 @@
+const webpack = require('webpack')
+const CssToJSON = require('../build/CssToJson')
 
-var webpack = require('webpack')
-
-var bannerText = `/**
+const bannerText = `/**
 * @name JSON Editor
 * @description JSON Schema Based Editor
 * This library is the continuation of jdorn's great work (see also https://github.com/jdorn/json-editor/issues/800)
@@ -14,14 +14,12 @@ var bannerText = `/**
 */`
 module.exports = {
   entry: {
-    // 'polyfills': './src/polyfills.ts',
-    'jsoneditor': './src/core.js'
+    jsoneditor: './src/core.js'
   },
   resolve: {
     extensions: ['.js']
   },
   module: {
-
     rules: [
       {
         enforce: 'pre',
@@ -45,14 +43,21 @@ module.exports = {
       },
       {
         test: /\.css$/,
-        use: [
-          'style-loader',
-          'css-loader'
-        ]
+        exclude: /(node_modules)|(src\/themes)/,
+        use: ['style-loader', 'css-loader']
       }
     ]
   },
   plugins: [
-    new webpack.BannerPlugin(bannerText.replace('{{ VERSION }}', JSON.stringify(require('../package.json').version)))
+    new webpack.BannerPlugin(
+      bannerText.replace(
+        '{{ VERSION }}',
+        JSON.stringify(require('../package.json').version)
+      )
+    ),
+    new CssToJSON({
+      pattern: './src/themes/*.css',
+      jsonPattern: './src/themes/*.json'
+    })
   ]
 }

config/webpack.dev.js

@@ -1,8 +1,7 @@
 /* eslint-disable no-undef */
-var webpackMerge = require('webpack-merge')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-var commonConfig = require('./webpack.common.js')
-var helpers = require('./helpers')
+const webpackMerge = require('webpack-merge')
+const commonConfig = require('./webpack.common.js')
+const helpers = require('./helpers')
 
 module.exports = webpackMerge(commonConfig, {
   mode: 'development',
@@ -14,20 +13,10 @@ module.exports = webpackMerge(commonConfig, {
     chunkFilename: '[id].chunk.js'
   },
 
-  plugins: [
-    new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // all options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
-      ignoreOrder: false // Enable to remove warnings about conflicting order
-    })
-  ],
-
   devServer: {
     contentBase: helpers.root('.'),
     historyApiFallback: true,
     // stats: 'minimal',
     port: 8080
   }
-})
+})

config/webpack.nonmin.js

@@ -1,8 +1,7 @@
-var webpackMerge = require('webpack-merge')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const webpackMerge = require('webpack-merge')
 const { CleanWebpackPlugin } = require('clean-webpack-plugin')
-var commonConfig = require('./webpack.common.js')
-var helpers = require('./helpers')
+const commonConfig = require('./webpack.common.js')
+const helpers = require('./helpers')
 
 // See https://webpack.js.org/guides/development/
 module.exports = webpackMerge(commonConfig, {
@@ -16,14 +15,7 @@ module.exports = webpackMerge(commonConfig, {
   },
 
   plugins: [
-    new CleanWebpackPlugin(), // Cleans directory before building
-    new MiniCssExtractPlugin({
-      // Options similar to the same options in webpackOptions.output
-      // all options are optional
-      filename: '[name].css',
-      chunkFilename: '[id].css',
-      ignoreOrder: false // Enable to remove warnings about conflicting order
-    })
+    new CleanWebpackPlugin() // Cleans directory before building
   ],
 
   devServer: {
@@ -32,4 +24,4 @@ module.exports = webpackMerge(commonConfig, {
     // stats: 'minimal',
     port: 8080
   }
-})
+})

config/webpack.prod.js

@@ -1,17 +1,39 @@
-var webpack = require('webpack')
-var webpackMerge = require('webpack-merge')
-const TerserJSPlugin = require('terser-webpack-plugin')
-const MiniCssExtractPlugin = require('mini-css-extract-plugin')
-const { CleanWebpackPlugin } = require('clean-webpack-plugin')
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
+const webpack = require('webpack')
+const webpackMerge = require('webpack-merge')
 const RemoveStrictPlugin = require('remove-strict-webpack-plugin')
-var commonConfig = require('./webpack.common.js')
-var helpers = require('./helpers')
+const commonConfig = require('./webpack.common.js')
+const helpers = require('./helpers')
 
-const ENV = process.env.NODE_ENV = process.env.ENV = 'production'
+const ENV = (process.env.NODE_ENV = process.env.ENV = 'production')
 
 function createConfig (target) {
   filenameInsert = target === 'var' ? '.' : '.' + target + '.'
+  commonConfig.module.rules = [
+    {
+      enforce: 'pre',
+      test: /\.js$/,
+      exclude: /node_modules/,
+      loader: `eslint-loader`
+    },
+    {
+      test: /\.css$/,
+      use: [
+        'style-loader',
+        {
+          loader: 'postcss-loader',
+          options: {
+            sourceMap: true,
+            plugins: [
+              require('cssnano')({
+                preset: 'default'
+              })
+            ]
+          }
+        }
+      ]
+    }
+  ]
+
   return webpackMerge(commonConfig, {
     mode: 'production',
     output: {
@@ -29,23 +51,10 @@ function createConfig (target) {
     plugins: [
       new RemoveStrictPlugin(), // I have put this in to avoid IE throwing error Assignment to read-only properties is not allowed in strict mode
       // This doesn't seem to actually be minimising the CSS!
-      new OptimizeCSSAssetsPlugin({
-        cssProcessor: require('cssnano'),
-        cssProcessorPluginOptions: {
-          preset: ['default', { discardComments: { removeAll: true } }]
-        }
-      }),
       new webpack.NoEmitOnErrorsPlugin(),
-      new MiniCssExtractPlugin({
-        // Options similar to the same options in webpackOptions.output
-        // all options are optional
-        filename: '[name].[hash].css',
-        chunkFilename: '[id].css',
-        ignoreOrder: false // Enable to remove warnings about conflicting order
-      }),
       new webpack.DefinePlugin({
         'process.env': {
-          'ENV': JSON.stringify(ENV)
+          ENV: JSON.stringify(ENV)
         }
       })
     ],
@@ -56,7 +65,6 @@ function createConfig (target) {
       stats: 'minimal',
       port: 8080
     }
-
   })
 }
 

config/webpack.test.js

@@ -1,5 +1,5 @@
-var webpack = require('webpack')
-var helpers = require('./helpers')
+const helpers = require('./helpers')
+const CssToJSON = require('../build/CssToJson')
 
 module.exports = {
   devtool: 'inline-source-map',
@@ -26,5 +26,11 @@ module.exports = {
 
       }
     ]
-  }
-}
+  },
+  plugins: [
+    new CssToJSON({
+      pattern: './src/themes/*.css',
+      jsonPattern: './src/themes/*.json'
+    })
+  ]
+}