Fix Web Components build

City-of-Helsinki · Feb 1, 2023 · 4acf7d1 · 4acf7d1
1 parent ffb3984
commit 4acf7d1
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 103 deletions.
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -1,15 +1,17 @@
 {
   "name": "hds-web-components",
-  "private": true,
-  "version": "2.8.0",
+  "version": "2.10.0",
   "description": "Web components for the Helsinki Design System",
   "homepage": "https://github.com/City-of-Helsinki/helsinki-design-system#readme",
-  "main": "index.js",
+  "main": "./cjs/index.js",
+  "module": "index.js",
+  "types": "./index.d.ts",
   "scripts": {
-    "build": "rimraf lib/ && yarn run tcm && rollup -c",
+    "build": "rimraf lib/ && yarn run tcm src && rollup -c",
     "start": "tcm src internal --watch & yarn storybook",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
+    "prepublishOnly": "cp -r ./lib/. .",
     "test": "jest --env=jest-environment-jsdom-sixteen",
     "lint": "eslint src/index.ts"
   },
@@ -51,14 +53,14 @@
     "eslint-plugin-prettier": "^4.2.1",
     "lit-css": "^0.1.3",
     "lit-css-loader": "^2.0.0",
+    "postcss": "^8.4.21",
     "postcss-loader": "^7.0.2",
     "postcss-modules": "^6.0.0",
     "rollup": "2.67.2",
     "rollup-plugin-css-text": "^1.0.3",
     "rollup-plugin-delete": "^2.0.0",
     "rollup-plugin-includepaths": "0.2.4",
     "rollup-plugin-lit-css": "^4.0.0",
-    "rollup-plugin-postcss": "3.1.8",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-ts": "3.0.2",
     "sass-loader": "^13.2.0",
@@ -69,5 +71,8 @@
     "lit": "^2.4.0",
     "lit-html": "^2.4.0",
     "lodash": "4.17.21"
+  },
+  "resolutions": {
+    "postcss": "^8.3.6"
   }
 }
diff --git a/packages/web-components/rollup.config.js b/packages/web-components/rollup.config.js
@@ -4,23 +4,17 @@ import resolve from '@rollup/plugin-node-resolve';
 import ts from 'rollup-plugin-ts';
 import babel from '@rollup/plugin-babel';
 import commonjs from '@rollup/plugin-commonjs';
-import json from '@rollup/plugin-json';
-import postcss from 'rollup-plugin-postcss';
-import { terser } from 'rollup-plugin-terser';
-import del from 'rollup-plugin-delete';
-import cssText from 'rollup-plugin-css-text';
+import litcss from 'rollup-plugin-lit-css';
+import postcss from 'postcss';
+import postcssModules from 'postcss-modules';
 
-const insertCssEsm = () => {
-  return {
-    name: 'insert-css-esm',
-    buildEnd: () => {
-      fs.appendFileSync(
-        `${__dirname}/lib/index.js`,
-        `import CSS_TEXT from './index.css-text'; export { CSS_TEXT as hdsStyles };`,
-      );
-    },
-  };
-};
+const processor = postcss(
+  postcssModules({
+    global: true,
+    generateScopedName: '[local]',
+    getJSON: () => {},
+  }),
+);
 
 const insertCssCjs = () => {
   return {
@@ -34,33 +28,12 @@ const insertCssCjs = () => {
   };
 };
 
-const moveCss = () => {
-  return {
-    name: 'move-css',
-    closeBundle: () => {
-      fs.renameSync(`${__dirname}/lib/tmp/index.css`, `${__dirname}/lib/index.css`);
-      fs.renameSync(`${__dirname}/lib/tmp/index.css-text.d.ts`, `${__dirname}/lib/index.css-text.d.ts`);
-      fs.renameSync(`${__dirname}/lib/tmp/index.css-text.js`, `${__dirname}/lib/index.css-text.js`);
-    },
-  };
-};
-
 const extensions = ['.js', '.ts'];
-const external = [
-  'crc-32',
-  'kashe',
-  'memoize-one',
-  'postcss',
-  'lodash.uniqueid',
-  'lodash.isequal',
-  'lodash.isfunction',
-  '@juggle/resize-observer',
-  '@popperjs/core',
-];
+const external = ['postcss', 'lodash.uniqueid', 'lodash.isequal', 'lodash.isfunction', 'lodash.toString'];
 
 const getExternal = (format) => (format === 'esm' ? [...external, /@babel\/runtime/] : external);
 
-const getPlugins = (format, extractCSS) => {
+const getPlugins = (format) => {
   const babelPlugin =
     format === 'esm' &&
     babel({
@@ -69,47 +42,22 @@ const getPlugins = (format, extractCSS) => {
       extensions,
     });
 
-  const postCssPlugin = postcss({
-    extract: extractCSS ? 'index.css' : undefined,
-    modules: true,
-    use: ['sass'],
-    minimize: {
-      preset: [
-        'default',
-        {
-          calc: false,
-          discardUnused: true,
-          mergeIdents: true,
-          reduceIdents: true,
-        },
-      ],
-    },
-  });
-
   const plugins = [
     includePaths({ paths: ['src'], extensions }),
     resolve(),
     ts(),
     babelPlugin,
     commonjs({ include: ['../../node_modules/**', 'node_modules/**'] }),
-    json(),
-    postCssPlugin,
-    terser(),
+    litcss({
+      include: ['/**/*.css', '/**/*.scss'],
+      transform: (css, { filePath }) => processor.process(css, { from: filePath }).then((res) => res.css),
+    }),
   ];
 
-  if (extractCSS) {
-    plugins.push(
-      cssText(),
-      moveCss(),
-      insertCssEsm(),
-      del({
-        targets: 'lib/tmp',
-        hook: 'closeBundle',
-      }),
-    );
+  if (format === 'cjs') {
+    plugins.push(insertCssCjs());
   }
 
-  if (format === 'cjs') plugins.push(insertCssCjs());
   return plugins;
 };
 
@@ -118,37 +66,25 @@ const getConfig = (format, extractCSS) => ({
   external: getExternal(format),
 });
 
-const esmInput = {
-  index: 'src/index.ts',
-  'components/index': 'src/components/index.ts',
-  'icons/index': 'src/icons/index.ts',
-  'components/Accordion/index': 'src/components/accordion/index.ts',
-};
-
 export default [
   {
-    input: esmInput,
+    input: {
+      index: 'src/index.ts',
+      'components/index': 'src/components/index.ts',
+      'icons/index': 'src/icons/index.ts',
+      'components/Accordion/index': 'src/components/accordion/index.ts',
+    },
     output: [
       {
         dir: 'lib',
         format: 'esm',
-      },
-    ],
-    ...getConfig('esm', false),
-  },
-  {
-    input: esmInput,
-    output: [
-      {
-        dir: 'lib/tmp',
-        format: 'esm',
         exports: 'named',
       },
     ],
-    ...getConfig('esm', true),
+    ...getConfig('esm'),
   },
   {
-    input: ['src/index.ts', 'lib/index.css-text.js'],
+    input: ['src/index.ts'],
     output: [
       {
         dir: 'lib/cjs',

diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
@@ -1 +1,2 @@
+export * from './icons';
 export * from './components';
diff --git a/packages/web-components/tsconfig.json b/packages/web-components/tsconfig.json
@@ -1,10 +1,10 @@
 {
   "compilerOptions": {
     "experimentalDecorators": true,
-    "module": "ES2015",
-    "moduleResolution": "Node",
-    "target": "es6",
-    "lib": ["es6", "dom", "dom.iterable"],
+    "module": "es2015",
+    "moduleResolution": "node",
+    "target": "es2017",
+    "lib": ["es2017", "dom"],
     "outDir": "lib",
     "allowSyntheticDefaultImports": true,
     "forceConsistentCasingInFileNames": true,

diff --git a/yarn.lock b/yarn.lock
@@ -24105,10 +24105,10 @@ [email protected], postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17,
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@8, postcss@^8.2.15, postcss@^8.2.9, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.17, postcss@^8.4.4, postcss@^8.4.7:
-  version "8.4.18"
-  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.18.tgz#6d50046ea7d3d66a85e0e782074e7203bc7fbca2"
-  integrity sha512-Wi8mWhncLJm11GATDaQKobXSNEYGUHeQLiQqDFG1qQ5UTDPTEvKw0Xt5NsTpktGTwLps3ByrWsBrG0rB8YQ9oA==
+postcss@8, postcss@^8.2.15, postcss@^8.2.9, postcss@^8.3.11, postcss@^8.3.5, postcss@^8.4.17, postcss@^8.4.21, postcss@^8.4.4, postcss@^8.4.7:
+  version "8.4.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
+  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
   dependencies:
     nanoid "^3.3.4"
     picocolors "^1.0.0"