From 2d8a0d6bd288e0fe880975155d21145c9eb9b374 Mon Sep 17 00:00:00 2001 From: reme3d2y Date: Thu, 24 Sep 2020 18:56:19 +0300 Subject: [PATCH] feat(postcss-config): add keepCssVars, revert plugin --- README.md | 3 ++- configs/app-configs.js | 6 ++++-- configs/postcss.config.js | 16 +++++++++------- package.json | 2 +- yarn.lock | 16 ++++++++-------- 5 files changed, 24 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 891a397..b97b284 100644 --- a/README.md +++ b/README.md @@ -63,7 +63,8 @@ npm install arui-scripts --save-dev - `keepPropTypes` - если `true`, пакеты с prop-types не будут удалены из production билда. - `debug` - режим отладки, в котором не выполняются некоторые нежелательные операции и выводится больше сообщений об ошибках, по умолчанию `false`. - `useTscLoader` - использовать ts-loader вместо babel-loader для обработки ts файлов. У babel-loader есть [ряд ограничений](https://blogs.msdn.microsoft.com/typescript/2018/08/27/typescript-and-babel-7/). По умолчанию `false`. -- `componentsTheme` - путь к css файлу с темой для [core-components](https://alfa-laboratory.github.io/core-components). Используется для настройки [postcss-custom-properties](https://github.com/alfa-laboratory/postcss-custom-properties#importfrom). +- `componentsTheme` - путь к css файлу с темой для [core-components](https://alfa-laboratory.github.io/core-components). Используется для настройки [postcss-custom-properties](https://github.com/postcss/postcss-custom-properties#importfrom). +- `keepCssVars` - отключает `postcss-custom-properties`, css переменные будут оставаться в бандле. В целях отладки все эти настройки можно переопределить не изменяя package.json Просто передайте необходимые настройки в environment переменной ARUI_SCRIPTS_CONFIG diff --git a/configs/app-configs.js b/configs/app-configs.js index 4d3ccdf..7b2f23c 100644 --- a/configs/app-configs.js +++ b/configs/app-configs.js @@ -70,7 +70,8 @@ let config = { hasOverrides: fs.existsSync(overridesPath), overridesPath: overridesPath, - componentsTheme: undefined + componentsTheme: undefined, + keepCssVars: true, }; /** @@ -99,7 +100,8 @@ const availablePackageSettings = [ 'serverPort', 'debug', - 'componentsTheme' + 'componentsTheme', + 'keepCssVars', ]; const packageSettings = appPackage.aruiScripts || {}; diff --git a/configs/postcss.config.js b/configs/postcss.config.js index 68e87b7..278b7e4 100644 --- a/configs/postcss.config.js +++ b/configs/postcss.config.js @@ -1,4 +1,4 @@ -const { componentsTheme } = require('./app-configs'); +const { componentsTheme, keepCssVars } = require('./app-configs'); /** * Функция для создания конфигурационного файла postcss @@ -25,7 +25,7 @@ const postcssPlugins = [ 'postcss-for', 'postcss-each', 'postcss-custom-media', - '@alfalab/postcss-custom-properties', + keepCssVars === false && 'postcss-custom-properties', 'postcss-strip-units', 'postcss-calc', 'postcss-color-function', @@ -33,7 +33,7 @@ const postcssPlugins = [ 'postcss-nested', 'autoprefixer', 'postcss-inherit', -]; +].filter(Boolean); const postcssPluginsOptions = { 'postcss-import': { @@ -69,13 +69,15 @@ const postcssPluginsOptions = { '--desktop': 'screen and (min-width: 64em)' }, }, - '@alfalab/postcss-custom-properties': { - preserve: false, - importFrom: componentsTheme, - }, 'postcss-color-mod-function': { unresolved: 'warn', }, + ...(keepCssVars === false && { + 'postcss-custom-properties': { + preserve: false, + importFrom: componentsTheme, + } + }), }; module.exports = { postcssPlugins, postcssPluginsOptions, createPostcssConfig }; diff --git a/package.json b/package.json index 34e56cc..3f669e9 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,6 @@ "arui-scripts": "./bin/index.js" }, "dependencies": { - "@alfalab/postcss-custom-properties": "^9.1.2", "@babel/core": "7.9.0", "@babel/plugin-proposal-class-properties": "7.8.3", "@babel/plugin-proposal-decorators": "7.8.3", @@ -57,6 +56,7 @@ "postcss-color-function": "^4.0.1", "postcss-color-mod-function": "^3.0.3", "postcss-custom-media": "^6.0.0", + "postcss-custom-properties": "9.2.0", "postcss-discard-comments": "^2.0.4", "postcss-each": "^0.10.0", "postcss-for": "^2.1.1", diff --git a/yarn.lock b/yarn.lock index ee8f4de..93452f3 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,14 +2,6 @@ # yarn lockfile v1 -"@alfalab/postcss-custom-properties@^9.1.2": - version "9.1.2" - resolved "https://registry.yarnpkg.com/@alfalab/postcss-custom-properties/-/postcss-custom-properties-9.1.2.tgz#1eeb1c2f3820ef4ff84fec13deb08baf71161210" - integrity sha512-eKx+09pGoZZJ1lnRwIepvFcWj4i2uFNIdv72OJ0VaLn1GDgKfe7vKYNHD4Cd5LLr6LN6eaygTJ2vDlMxtxKSPA== - dependencies: - postcss "^7.0.17" - postcss-values-parser "^3.0.5" - "@babel/code-frame@7.0.0": version "7.0.0" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0.tgz#06e2ab19bdb535385559aabb5ba59729482800f8" @@ -7829,6 +7821,14 @@ postcss-custom-media@^6.0.0: dependencies: postcss "^6.0.1" +postcss-custom-properties@9.2.0: + version "9.2.0" + resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-9.2.0.tgz#80bae0d6e0c510245ace7ede95ac527712ea24e7" + integrity sha512-IFRV7LwapFkNa3MtvFpw+MEhgyUpaVZ62VlR5EM0AbmnGbNhU9qIE8u02vgUbl1gLkHK6sterEavamVPOwdE8g== + dependencies: + postcss "^7.0.17" + postcss-values-parser "^3.0.5" + postcss-discard-comments@^2.0.4: version "2.0.4" resolved "https://registry.yarnpkg.com/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz#befe89fafd5b3dace5ccce51b76b81514be00e3d"