dephiros · May 31, 2019 15:44 · LucianVoju · May 14, 2020
diff --git a/package.json b/package.json
 {

  "scripts": {
    "dev": "sapper dev",
    "format:check": "prettier --check './**/*.{js,ts,css,html,svelte}'",
    "format": "prettier --write './**/*.{js,ts,css,html,svelte}'",
    "build": "NODE_ENV=production sapper build",
    "export": "NODE_ENV=production sapper export",
    "start": "node __sapper__/build",
    "cy:run": "cypress run",
    "cy:open": "cypress open",
    "test": "run-p --race dev cy:run",
  },
  "dependencies": {
    "@fortawesome/free-regular-svg-icons": "^5.8.2",
    "@fortawesome/free-solid-svg-icons": "^5.8.2",
    "fa-svelte": "^3.0.0"
  },
  "devDependencies": {
    "@fullhuman/postcss-purgecss": "^1.2.0",
    "@tailwindcss/custom-forms": "^0.1.4",
    "compression": "^1.7.1",
    "css-loader": "^2.1.1",
    "cssnano": "^4.1.10",
    "firebase-tools": "^6.10.0",
    "isomorphic-style-loader": "^5.0.1",
    "mini-css-extract-plugin": "^0.6.0",
    "npm-run-all": "^4.1.5",
    "polka": "^0.5.0",
    "postcss": "^7.0.16",
    "postcss-extend": "^1.0.5",
    "postcss-import": "^12.0.1",
    "postcss-loader": "^3.0.0",
    "postcss-preset-env": "^6.6.0",
    "prettier": "^1.17.1",
    "prettier-plugin-svelte": "^0.6.0",
    "purgecss-from-svelte": "^1.1.1",
    "sapper": "^0.27.0",
    "sirv": "^0.4.0",
    "svelte": "^3.0.0",
    "svelte-loader": "^2.9.0",
    "svelte-preprocess": "^2.9.0",
    "tailwindcss": "^1.0.1",
    "webpack": "^4.32"
  }
 }
diff --git a/postcss.config.js b/postcss.config.js
 const purgecss = require('@fullhuman/postcss-purgecss');
 const purgeSvelte = require('purgecss-from-svelte');
 const env = process.env.NODE_ENV;

 // Custom PurgeCSS extractor for Tailwind that allows special characters in
 // class names.
 //
 // https://github.com/FullHuman/purgecss#extractor
 class TailwindExtractor {
  static extract(content) {
    return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
  }
 }

 module.exports = {
  plugins: [
    require('postcss-import')(),
    require('postcss-preset-env')({
      browsers: 'last 2 versions',
    }),
    require('tailwindcss')('./tailwind.config.js'),
    require('postcss-extend')(),
    require('autoprefixer')(),
    ...(env !== 'production'
      ? []
      : [
          purgecss({
            content: ['**/*.html'],
            css: ['**/*.css'],
            extractors: [
              {
                extractor: purgeSvelte,
                extensions: ['svelte'],
              },
              {
                extractor: TailwindExtractor,

                // Specify the file extensions to include when scanning for
                // class names.
                extensions: ['html'],
              },
            ],
          }),
          require('cssnano')({ preset: 'default' }),
        ]),
  ],
 };
diff --git a/tailwind.config.js b/tailwind.config.js
 const defaultTheme = require('tailwindcss/defaultTheme');

 module.exports = {
  theme: {  
  },
  variants: {
    // Some useful comment
  },
  plugins: [
    // Some useful comment
  ],
 };
diff --git a/webpack.config.js b/webpack.config.js
 const webpack = require('webpack');
 const config = require('sapper/config/webpack.js');
 const pkg = require('./package.json');
 const autoPreprocess = require('svelte-preprocess');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');

 const mode = process.env.NODE_ENV;
 console.log(mode);
 const dev = mode === 'development';

 const extensions = ['.mjs', '.js', '.json', '.svelte', '.html'];
 const mainFields = ['svelte', 'module', 'browser', 'main'];
 const cssConfig = {
  test: /\.(sa|sc|c)ss$/,
  exclude: /node_modules/,
  use: [
    'isomorphic-style-loader',
    MiniCssExtractPlugin.loader,
    'css-loader',
    'postcss-loader',
  ],
 };
 const sveltPreprocess = autoPreprocess({
  postcss: true,
  scss: false,
  stylus: false,
  typescript: false,
  coffeescript: false,
  less: false,
  pug: false,
 });

 module.exports = {
  client: {
    entry: config.client.entry(),
    output: config.client.output(),
    resolve: { extensions, mainFields },
    module: {
      rules: [
        cssConfig,
        {
          test: /\.(svelte|html)$/,
          use: {
            loader: 'svelte-loader',
            options: {
              preprocess: sveltPreprocess,
              dev,
              hydratable: true,
              hotReload: false, // pending https://github.com/sveltejs/svelte/issues/2377
            },
          },
        },
      ],
    },
    mode,
    plugins: [
      // pending https://github.com/sveltejs/svelte/issues/2377
      // dev && new webpack.HotModuleReplacementPlugin(),
      new webpack.DefinePlugin({
        'process.browser': true,
        'process.env.NODE_ENV': JSON.stringify(mode),
      }),
      new MiniCssExtractPlugin({
        filename: '[name].[hash:5].css',
        chunkFilename: '[id].[hash:5].css',
      }),
    ].filter(Boolean),
    devtool: dev && 'inline-source-map',
  },

  server: {
    entry: config.server.entry(),
    output: config.server.output(),
    target: 'node',
    resolve: { extensions, mainFields },
    externals: Object.keys(pkg.dependencies).concat('encoding'),
    module: {
      rules: [
        cssConfig,
        {
          test: /\.(svelte|html)$/,
          use: {
            loader: 'svelte-loader',
            options: {
              preprocess: sveltPreprocess,
              css: false,
              generate: 'ssr',
              dev,
            },
          },
        },
      ],
    },
    plugins: [
      new MiniCssExtractPlugin({
        filename: '[name].[hash:5].css',
        chunkFilename: '[id].[hash:5].css',
      }),
    ].filter(Boolean),
    mode: process.env.NODE_ENV,
    performance: {
      hints: false, // it doesn't matter if server.js is large
    },
  },

  serviceworker: {
    entry: config.serviceworker.entry(),
    output: config.serviceworker.output(),
    mode: process.env.NODE_ENV,
  },
 };
	{

	"scripts": {
	"dev": "sapper dev",
	"format:check": "prettier --check './*/.{js,ts,css,html,svelte}'",
	"format": "prettier --write './*/.{js,ts,css,html,svelte}'",
	"build": "NODE_ENV=production sapper build",
	"export": "NODE_ENV=production sapper export",
	"start": "node __sapper__/build",
	"cy:run": "cypress run",
	"cy:open": "cypress open",
	"test": "run-p --race dev cy:run",
	},
	"dependencies": {
	"@fortawesome/free-regular-svg-icons": "^5.8.2",
	"@fortawesome/free-solid-svg-icons": "^5.8.2",
	"fa-svelte": "^3.0.0"
	},
	"devDependencies": {
	"@fullhuman/postcss-purgecss": "^1.2.0",
	"@tailwindcss/custom-forms": "^0.1.4",
	"compression": "^1.7.1",
	"css-loader": "^2.1.1",
	"cssnano": "^4.1.10",
	"firebase-tools": "^6.10.0",
	"isomorphic-style-loader": "^5.0.1",
	"mini-css-extract-plugin": "^0.6.0",
	"npm-run-all": "^4.1.5",
	"polka": "^0.5.0",
	"postcss": "^7.0.16",
	"postcss-extend": "^1.0.5",
	"postcss-import": "^12.0.1",
	"postcss-loader": "^3.0.0",
	"postcss-preset-env": "^6.6.0",
	"prettier": "^1.17.1",
	"prettier-plugin-svelte": "^0.6.0",
	"purgecss-from-svelte": "^1.1.1",
	"sapper": "^0.27.0",
	"sirv": "^0.4.0",
	"svelte": "^3.0.0",
	"svelte-loader": "^2.9.0",
	"svelte-preprocess": "^2.9.0",
	"tailwindcss": "^1.0.1",
	"webpack": "^4.32"
	}
	}
	const purgecss = require('@fullhuman/postcss-purgecss');
	const purgeSvelte = require('purgecss-from-svelte');
	const env = process.env.NODE_ENV;

	// Custom PurgeCSS extractor for Tailwind that allows special characters in
	// class names.
	//
	// https://github.com/FullHuman/purgecss#extractor
	class TailwindExtractor {
	static extract(content) {
	return content.match(/[A-Za-z0-9-_:\/]+/g) \|\| [];
	}
	}

	module.exports = {
	plugins: [
	require('postcss-import')(),
	require('postcss-preset-env')({
	browsers: 'last 2 versions',
	}),
	require('tailwindcss')('./tailwind.config.js'),
	require('postcss-extend')(),
	require('autoprefixer')(),
	...(env !== 'production'
	? []
	: [
	purgecss({
	content: ['*/.html'],
	css: ['*/.css'],
	extractors: [
	{
	extractor: purgeSvelte,
	extensions: ['svelte'],
	},
	{
	extractor: TailwindExtractor,

	// Specify the file extensions to include when scanning for
	// class names.
	extensions: ['html'],
	},
	],
	}),
	require('cssnano')({ preset: 'default' }),
	]),
	],
	};
	const defaultTheme = require('tailwindcss/defaultTheme');

	module.exports = {
	theme: {
	},
	variants: {
	// Some useful comment
	},
	plugins: [
	// Some useful comment
	],
	};
	const webpack = require('webpack');
	const config = require('sapper/config/webpack.js');
	const pkg = require('./package.json');
	const autoPreprocess = require('svelte-preprocess');
	const MiniCssExtractPlugin = require('mini-css-extract-plugin');

	const mode = process.env.NODE_ENV;
	console.log(mode);
	const dev = mode === 'development';

	const extensions = ['.mjs', '.js', '.json', '.svelte', '.html'];
	const mainFields = ['svelte', 'module', 'browser', 'main'];
	const cssConfig = {
	test: /\.(sa\|sc\|c)ss$/,
	exclude: /node_modules/,
	use: [
	'isomorphic-style-loader',
	MiniCssExtractPlugin.loader,
	'css-loader',
	'postcss-loader',
	],
	};
	const sveltPreprocess = autoPreprocess({
	postcss: true,
	scss: false,
	stylus: false,
	typescript: false,
	coffeescript: false,
	less: false,
	pug: false,
	});

	module.exports = {
	client: {
	entry: config.client.entry(),
	output: config.client.output(),
	resolve: { extensions, mainFields },
	module: {
	rules: [
	cssConfig,
	{
	test: /\.(svelte\|html)$/,
	use: {
	loader: 'svelte-loader',
	options: {
	preprocess: sveltPreprocess,
	dev,
	hydratable: true,
	hotReload: false, // pending https://github.com/sveltejs/svelte/issues/2377
	},
	},
	},
	],
	},
	mode,
	plugins: [
	// pending https://github.com/sveltejs/svelte/issues/2377
	// dev && new webpack.HotModuleReplacementPlugin(),
	new webpack.DefinePlugin({
	'process.browser': true,
	'process.env.NODE_ENV': JSON.stringify(mode),
	}),
	new MiniCssExtractPlugin({
	filename: '[name].[hash:5].css',
	chunkFilename: '[id].[hash:5].css',
	}),
	].filter(Boolean),
	devtool: dev && 'inline-source-map',
	},

	server: {
	entry: config.server.entry(),
	output: config.server.output(),
	target: 'node',
	resolve: { extensions, mainFields },
	externals: Object.keys(pkg.dependencies).concat('encoding'),
	module: {
	rules: [
	cssConfig,
	{
	test: /\.(svelte\|html)$/,
	use: {
	loader: 'svelte-loader',
	options: {
	preprocess: sveltPreprocess,
	css: false,
	generate: 'ssr',
	dev,
	},
	},
	},
	],
	},
	plugins: [
	new MiniCssExtractPlugin({
	filename: '[name].[hash:5].css',
	chunkFilename: '[id].[hash:5].css',
	}),
	].filter(Boolean),
	mode: process.env.NODE_ENV,
	performance: {
	hints: false, // it doesn't matter if server.js is large
	},
	},

	serviceworker: {
	entry: config.serviceworker.entry(),
	output: config.serviceworker.output(),
	mode: process.env.NODE_ENV,
	},
	};