From dbb98c8a84f01b0d2460c9dc224d91a73482dfa2 Mon Sep 17 00:00:00 2001 From: Martin Date: Fri, 5 Apr 2019 14:08:40 +0300 Subject: [PATCH] fix: transform css files to es6 modules (#306) - bundling without an additional setup for importing css files used to be broken - all css files are now distributed as es6 modules that export a single string - ui5-togglebutton used to override some css variables defined in the ui5-button --- packages/main/bundle.esm.js | 2 +- .../config/postcss.bundles/postcss.config.js | 2 ++ .../postcss.components/postcss.config.js | 4 +++- packages/main/lib/postcss-css-to-esm/index.js | 19 +++++++++++++++++++ packages/main/package.json | 8 ++++---- packages/main/rollup.config.js | 17 ----------------- .../base/ToggleButton-parameters.css | 4 ---- .../sap_fiori_3/ToggleButton-parameters.css | 2 -- 8 files changed, 29 insertions(+), 29 deletions(-) create mode 100644 packages/main/lib/postcss-css-to-esm/index.js diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index 4b99ec81e784..a11c664ea3d5 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -2,7 +2,7 @@ import "@ui5/webcomponents-base/src/browsersupport/Edge"; import "@ui5/webcomponents-base/src/shims/jquery-shim"; -import "./src/ThemePropertiesProvider"; +import "./dist/ThemePropertiesProvider"; import Gregorian from "@ui5/webcomponents-core/dist/sap/ui/core/date/Gregorian"; import Buddhist from "@ui5/webcomponents-core/dist/sap/ui/core/date/Buddhist"; diff --git a/packages/main/config/postcss.bundles/postcss.config.js b/packages/main/config/postcss.bundles/postcss.config.js index d12cfa9ffba8..c62b1cefcd37 100644 --- a/packages/main/config/postcss.bundles/postcss.config.js +++ b/packages/main/config/postcss.bundles/postcss.config.js @@ -1,6 +1,7 @@ const postcssImport = require('postcss-import'); const postcssAddFallback = require('../../lib/postcss-add-fallback/index.js'); const combineSelectors = require('postcss-combine-duplicated-selectors'); +const postcssCSStoESM = require('../../lib/postcss-css-to-esm/index.js'); const cssnano = require('cssnano'); module.exports = { @@ -9,5 +10,6 @@ module.exports = { postcssAddFallback(), combineSelectors({removeDuplicatedProperties: true}), cssnano(), + postcssCSStoESM(), ] }; diff --git a/packages/main/config/postcss.components/postcss.config.js b/packages/main/config/postcss.components/postcss.config.js index 4b666ce77c4f..0decb5530656 100644 --- a/packages/main/config/postcss.components/postcss.config.js +++ b/packages/main/config/postcss.components/postcss.config.js @@ -1,11 +1,13 @@ const postcssNesting = require('postcss-nesting'); const postcssAddFallback = require('../../lib/postcss-add-fallback/index.js'); +const postcssCSStoESM = require('../../lib/postcss-css-to-esm/index.js'); const cssnano = require('cssnano'); module.exports = { plugins: [ postcssNesting(), - postcssAddFallback({importFrom: "./dist/themes-next/sap_fiori_3/parameters-bundle.css"}), + postcssAddFallback({importFrom: "./dist/css/themes-next/sap_fiori_3/parameters-bundle.css"}), cssnano(), + postcssCSStoESM(), ] }; diff --git a/packages/main/lib/postcss-css-to-esm/index.js b/packages/main/lib/postcss-css-to-esm/index.js new file mode 100644 index 000000000000..eb792411ed00 --- /dev/null +++ b/packages/main/lib/postcss-css-to-esm/index.js @@ -0,0 +1,19 @@ +const postcss = require('postcss'); +const fs = require('fs'); +const path = require('path'); +const mkdirp = require('mkdirp'); + +module.exports = postcss.plugin('add css to esm transform plugin', function (opts) { + opts = opts || {}; + + return function (root) { + const css = JSON.stringify(root.toString()); + const targetFile = root.source.input.from.replace("/src/", "/dist/"); + + mkdirp.sync(path.dirname(targetFile)); + + const filePath = `${targetFile}.js`; + + fs.writeFileSync(filePath, `export default ${css}`); + } +}); diff --git a/packages/main/package.json b/packages/main/package.json index 9e2e993a3cc5..756562ba8d5b 100644 --- a/packages/main/package.json +++ b/packages/main/package.json @@ -54,10 +54,10 @@ "build:api": "jsdoc -c ../../lib/jsdoc/config.json", "build:docs": "node ../../lib/documentation/index.js", "build:styles": "npm-run-all --sequential build:styles-bundles build:styles-components", - "build:styles-bundles": "postcss src/**/parameters-bundle.css --config config/postcss.bundles --base src --dir dist/", - "build:styles-components": "postcss src/themes-next/*.css --config config/postcss.components --base src --dir dist/", - "watch:styles-bundles": "postcss src/**/parameters-bundle.css --config config/postcss.bundles --base src --dir dist/ -w", - "watch:styles-components": "postcss src/themes-next/*.css --config config/postcss.components --base src --dir dist/ -w", + "build:styles-bundles": "postcss src/**/parameters-bundle.css --config config/postcss.bundles --base src --dir dist/css/", + "build:styles-components": "postcss src/themes-next/*.css --config config/postcss.components --base src --dir dist/css/", + "watch:styles-bundles": "postcss src/**/parameters-bundle.css --config config/postcss.bundles --base src --dir dist/css/ -w", + "watch:styles-components": "postcss src/themes-next/*.css --config config/postcss.components --base src --dir dist/css/ -w", "clean": "rimraf dist src/build", "copy:src": "copy-and-watch \"src/**/*.js\" \"src/**/i18n/*.json\" dist/", "copy:i18n": "cpx \"src/i18n/*.json\" dist/i18n", diff --git a/packages/main/rollup.config.js b/packages/main/rollup.config.js index 418bba5cb25e..6f7521f9d2df 100644 --- a/packages/main/rollup.config.js +++ b/packages/main/rollup.config.js @@ -46,23 +46,6 @@ const getPlugins = ({ transpile }) => { return gzipSize; } })); - // component styles - plugins.push( - postcss({ - plugins: [postcssNesting()], - inject: false, - exclude: ["**/*.less", "**/parameters-bundle.css"], - }) - ); - // parameters bundle - plugins.push( - postcss({ - plugins: [postcssImport(), csso({comments: true})], - inject: false, - include: ["**/parameters-bundle.css"], - exclude: ["**/*.less"], - }) - ); plugins.push(ui5DevImportCheckerPlugin()); diff --git a/packages/main/src/themes-next/base/ToggleButton-parameters.css b/packages/main/src/themes-next/base/ToggleButton-parameters.css index b6bf1fadf62e..07f70b0647dd 100644 --- a/packages/main/src/themes-next/base/ToggleButton-parameters.css +++ b/packages/main/src/themes-next/base/ToggleButton-parameters.css @@ -1,8 +1,4 @@ :root { - --_ui5_button_base_min_width: 2.5rem; - --_ui5_button_base_min_compact_width: 2rem; - --_ui5_button_base_height: 2.5rem; - --_ui5_button_compact_height: 1.625rem; --_ui5_toggle_button_pressed_focussed: var(--sapUiToggleButtonPressedBorderColor); --_ui5_toggle_button_pressed_focussed_hovered: var(--sapUiToggleButtonPressedBorderColor); --_ui5_toggle_button_pressed_negative_hover: var(--sapUiButtonRejectActiveBackgroundDarken5); diff --git a/packages/main/src/themes-next/sap_fiori_3/ToggleButton-parameters.css b/packages/main/src/themes-next/sap_fiori_3/ToggleButton-parameters.css index fe64a1b0a101..7db23941ed37 100644 --- a/packages/main/src/themes-next/sap_fiori_3/ToggleButton-parameters.css +++ b/packages/main/src/themes-next/sap_fiori_3/ToggleButton-parameters.css @@ -1,8 +1,6 @@ @import "../base/ToggleButton-parameters.css"; :root { - --_ui5_button_base_min_width: 2.25rem; - --_ui5_button_base_height: 2.25rem; --_ui5_toggle_button_pressed_negative_hover: var(--sapUiButtonRejectActiveBackgroundLighten5); --_ui5_toggle_button_pressed_positive_hover: var(--sapUiButtonAcceptActiveBackgroundLighten5); } \ No newline at end of file