From d43454761c88586cc102e8ce205b13984a564937 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 14 May 2024 09:45:08 +0200 Subject: [PATCH 1/3] build: :fire: Remove deprecated css-modules build code --- packages/css/package.json | 3 - packages/react/package.json | 3 - packages/react/rollup.config.js | 16 +-- packages/react/scripts/generate-css.ts | 162 ------------------------- packages/react/scripts/name.d.ts | 5 - packages/react/scripts/name.js | 27 ----- yarn.lock | 83 +++++++------ 7 files changed, 46 insertions(+), 253 deletions(-) delete mode 100644 packages/react/scripts/generate-css.ts delete mode 100644 packages/react/scripts/name.d.ts delete mode 100644 packages/react/scripts/name.js diff --git a/packages/css/package.json b/packages/css/package.json index b11695328a..49b907cc10 100644 --- a/packages/css/package.json +++ b/packages/css/package.json @@ -38,8 +38,5 @@ "postcss-cli": "^11.0.0", "postcss-import": "^16.0.1", "rimraf": "^5.0.5" - }, - "dependencies": { - "@digdir/designsystemet-react": "workspace:^" } } diff --git a/packages/react/package.json b/packages/react/package.json index 1da97bc39a..b13a321d13 100644 --- a/packages/react/package.json +++ b/packages/react/package.json @@ -15,7 +15,6 @@ ], "scripts": { "build": "yarn run clean && tsc -p tsconfig.build.json && rollup -c --bundleConfigAsCjs", - "generate:css": "esno ./scripts/generate-css.ts", "clean": "rimraf dist && rimraf tsc-build", "copy-css-to-build": "copyfiles -u 1 ./src/**/*.css ./tsc-build/", "types": "tsc --noEmit" @@ -34,10 +33,8 @@ "@tanstack/react-virtual": "^3.2.0" }, "devDependencies": { - "@types/fs-extra": "^11.0.4", "copyfiles": "^2.4.1", "esno": "^4.7.0", - "fs-extra": "^11.2.0", "rimraf": "^5.0.5", "rollup": "^4.12.1", "typescript": "^5.4.2" diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js index 88b7f913d3..37758de62a 100644 --- a/packages/react/rollup.config.js +++ b/packages/react/rollup.config.js @@ -1,10 +1,7 @@ import resolve from '@rollup/plugin-node-resolve'; import commonjs from '@rollup/plugin-commonjs'; -import postcss from 'rollup-plugin-postcss'; import peerDepsExternal from 'rollup-plugin-peer-deps-external'; -import { generateScopedName } from './scripts/name'; - export default [ { input: './tsc-build/index.js', @@ -30,17 +27,6 @@ export default [ /@digdir\/design-system-tokens/, /@navikt\/aksel-icons/, ], - plugins: [ - peerDepsExternal(), - resolve(), - commonjs(), - postcss({ - // extract name is used in script in package.json - extract: 'react-css-modules.css', - modules: { - generateScopedName, - }, - }), - ], + plugins: [peerDepsExternal(), resolve(), commonjs()], }, ]; diff --git a/packages/react/scripts/generate-css.ts b/packages/react/scripts/generate-css.ts deleted file mode 100644 index 2db40ed3f9..0000000000 --- a/packages/react/scripts/generate-css.ts +++ /dev/null @@ -1,162 +0,0 @@ -import path from 'path'; - -import postcss from 'postcss'; -import postcssModules from 'postcss-modules'; -import glob from 'fast-glob'; -import fs from 'fs-extra'; -import * as R from 'ramda'; - -import { generateScopedName } from './name'; - -const outputFolder = path.resolve(__dirname, '../../css'); -fs.ensureDirSync(outputFolder); - -/** To exclude files when we start writing css manually */ -const ignore = ['']; -const additional = ['']; - -const findComponentName = (filePath: string) => { - let fileName = filePath.split('/src/')[1]; - - if (filePath.includes('utilities/')) { - fileName = fileName.split('utilities/')[1].split('/')[0]; - } - - if (fileName.includes('legacy/')) { - fileName = fileName.split('legacy/')[1].split('/')[0]; - } - - const name = fileName - .split('/') - .find( - (partial) => - partial[0] === partial[0].toUpperCase() || additional.includes(partial), - ); - - if (!name) { - throw new Error(`Could not make name from ${fileName} at ${filePath}`); - } - - return name; -}; - -const fileName = R.pipe(R.split('/'), R.last, R.defaultTo('')); -const fileNames = R.pipe(R.map(fileName), R.join(', ')); - -const withFileHeader = (css: string, files: string[]) => - `/** This css file was autogenerated from ${fileNames(files)} **/\n${css}`; - -const makeCss = async (filePath: string) => { - const file = fs.readFileSync(filePath, 'utf-8'); - - return await postcss([ - postcssModules({ - generateScopedName, - getJSON: () => { - return; - }, - scopeBehaviour: 'local', - }), - ]).process(file, { - from: filePath, - }); -}; - -const makeDir = (folder: string) => { - if (!fs.existsSync(folder)) { - fs.mkdirSync(folder); - } -}; - -const writeIndex = (fileName: string, cssFiles: string[]) => { - const cssFilesContent = cssFiles.map((file) => `@import url('${file}');`); - fs.writeFileSync( - path.join(outputFolder, fileName), - `@charset "UTF-8";\n${cssFilesContent.join('\n')}\n`, - ); - - return [fileName, ...cssFiles]; -}; - -async function createFiles() { - console.log('\nšŸ—ļø Started building css files...'); - - const modules = glob.sync( - path.resolve(__dirname, '../src/**/*.module.css').replace(/\\/g, '/'), - ); - const generatedComponents: string[] = []; - - // group files that are under src/components/{THIS IS THE NAME} - const componentFiles = modules.reduce<{ [key: string]: string[] }>( - (components, filePath) => { - const name = findComponentName(filePath); - - if (ignore.includes(name.toLowerCase())) { - console.log('šŸ›‘ Ignoring component ', name); - return components; - } - - components[name] = !components[name] - ? [filePath] - : [...components[name], filePath]; - - return components; - }, - {}, - ); - console.log('\nšŸ§© Found components', Object.keys(componentFiles)); - - await Promise.all( - Object.entries(componentFiles).map(async ([componentName, files]) => { - componentName = componentName.toLowerCase().split('.')[0]; - - const fileName = `${componentName}.css`; - - const results = await Promise.all( - files.map(async (filePath) => makeCss(filePath)), - ); - - const css = withFileHeader( - results.map((result) => result.css).join('\n'), - files, - ); - - let outputPath = path.join(outputFolder, fileName); - - if (files[0].includes('legacy')) { - makeDir(path.join(outputFolder, 'legacy')); - outputPath = path.join(outputFolder, 'legacy', fileName); - } - - if (files[0].includes('utilities')) { - makeDir(path.join(outputFolder, 'utilities')); - outputPath = path.join(outputFolder, 'utilities', fileName); - } - - generatedComponents.push( - outputPath.replace(/\\/g, '/').split('/css/')[1], - ); - - return fs.writeFile(outputPath, css); - }), - ).then(() => { - const [utilityFiles, componentFiles] = R.partition( - R.includes('utilities/'), - generatedComponents, - ); - - writeIndex('utilities.css', utilityFiles); - const createdFiles = writeIndex('index.css', [ - 'utilities.css', - ...componentFiles, - ]); - - console.log('\nšŸ‘· Created CSS files: \n ', createdFiles); - - return Promise.resolve(); - }); - - console.log('\nšŸ Finished building css files!'); -} - -void createFiles(); diff --git a/packages/react/scripts/name.d.ts b/packages/react/scripts/name.d.ts deleted file mode 100644 index 344a9dd497..0000000000 --- a/packages/react/scripts/name.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -export declare function generateScopedName( - name: string, - filename: string, - css: string, -): string; diff --git a/packages/react/scripts/name.js b/packages/react/scripts/name.js deleted file mode 100644 index 716b5c4820..0000000000 --- a/packages/react/scripts/name.js +++ /dev/null @@ -1,27 +0,0 @@ -import path from 'path'; - -// -export function hashCode(input) { - let hash = 0; - for (let i = 0; i < input.length; i += 1) { - const chr = input.charCodeAt(i); - hash = (hash << 5) - hash + chr; - hash |= 0; - } - return (hash + 2147483648).toString(16); -} - -/** - * @url https://github.com/madyankin/postcss-modules#generating-scoped-names - * @param {string} name - * @param {string} fileNames - * @returns - */ -export function generateScopedName(name, fileNames) { - const componentName = path.basename(fileNames, '.module.css').toLowerCase(); - - const filePaths = path.relative('.', fileNames).replace(/\\/g, '/'); - const hash = hashCode(filePaths); - - return `fds-${componentName}-${name}-${hash}`; -} diff --git a/yarn.lock b/yarn.lock index 3c8634c03d..406580e134 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2627,7 +2627,6 @@ __metadata: version: 0.0.0-use.local resolution: "@digdir/designsystemet-css@workspace:packages/css" dependencies: - "@digdir/designsystemet-react": "workspace:^" autoprefixer: "npm:^10.4.19" cssnano: "npm:^6.0.2" postcss: "npm:^8.4.35" @@ -2660,10 +2659,8 @@ __metadata: "@navikt/aksel-icons": "npm:^5.12.2" "@radix-ui/react-slot": "npm:^1.0.2" "@tanstack/react-virtual": "npm:^3.2.0" - "@types/fs-extra": "npm:^11.0.4" copyfiles: "npm:^2.4.1" esno: "npm:^4.7.0" - fs-extra: "npm:^11.2.0" rimraf: "npm:^5.0.5" rollup: "npm:^4.12.1" typescript: "npm:^5.4.2" @@ -7515,7 +7512,7 @@ __metadata: languageName: node linkType: hard -"browserslist@npm:^4.0.0, browserslist@npm:^4.16.6, browserslist@npm:^4.21.4, browserslist@npm:^4.21.9, browserslist@npm:^4.22.1": +"browserslist@npm:^4.0.0, browserslist@npm:^4.21.4, browserslist@npm:^4.21.9, browserslist@npm:^4.22.1": version: 4.22.2 resolution: "browserslist@npm:4.22.2" dependencies: @@ -8569,11 +8566,11 @@ __metadata: linkType: hard "css-declaration-sorter@npm:^6.3.1": - version: 6.3.1 - resolution: "css-declaration-sorter@npm:6.3.1" + version: 6.4.1 + resolution: "css-declaration-sorter@npm:6.4.1" peerDependencies: postcss: ^8.0.9 - checksum: 638284daf2500eb70c414e2b1742d0b696f1b484cf6758ee93cc5781730fdbe9b3895481234d8e750e2d3628d3a33da22cdf06fc02258ec59ce7d31b55086e95 + checksum: 06cbfd1f470b8accf5e235b0e658e2f82d33a1cea8c2a21b55dfef5280769b874a8979c50f2c035af9213836cf85fb7e4687748a9162d564d7638ed4a194888e languageName: node linkType: hard @@ -8672,21 +8669,21 @@ __metadata: languageName: node linkType: hard -"cssnano-preset-default@npm:^5.2.13": - version: 5.2.13 - resolution: "cssnano-preset-default@npm:5.2.13" +"cssnano-preset-default@npm:^5.2.14": + version: 5.2.14 + resolution: "cssnano-preset-default@npm:5.2.14" dependencies: css-declaration-sorter: "npm:^6.3.1" cssnano-utils: "npm:^3.1.0" postcss-calc: "npm:^8.2.3" - postcss-colormin: "npm:^5.3.0" + postcss-colormin: "npm:^5.3.1" postcss-convert-values: "npm:^5.1.3" postcss-discard-comments: "npm:^5.1.2" postcss-discard-duplicates: "npm:^5.1.0" postcss-discard-empty: "npm:^5.1.1" postcss-discard-overridden: "npm:^5.1.0" postcss-merge-longhand: "npm:^5.1.7" - postcss-merge-rules: "npm:^5.1.3" + postcss-merge-rules: "npm:^5.1.4" postcss-minify-font-values: "npm:^5.1.0" postcss-minify-gradients: "npm:^5.1.1" postcss-minify-params: "npm:^5.1.4" @@ -8701,13 +8698,13 @@ __metadata: postcss-normalize-url: "npm:^5.1.0" postcss-normalize-whitespace: "npm:^5.1.1" postcss-ordered-values: "npm:^5.1.3" - postcss-reduce-initial: "npm:^5.1.1" + postcss-reduce-initial: "npm:^5.1.2" postcss-reduce-transforms: "npm:^5.1.0" postcss-svgo: "npm:^5.1.0" postcss-unique-selectors: "npm:^5.1.1" peerDependencies: postcss: ^8.2.15 - checksum: 5b9e3c13cf85bb1f139ad675e2716b52b90963285d63db9f74648ec9683bc3f23d53582a8acf931152d5da24ca138c485a4df6ee7e048d6e164cb262a67e2b75 + checksum: 4103f879a594e24eef7b2f175cd46b59d777982be23f0d1b84e962d044e0bea2f26aa107dea59a711e6394fdd77faf313cee6ae4be61d34656fdf33ff278f69d languageName: node linkType: hard @@ -8769,15 +8766,15 @@ __metadata: linkType: hard "cssnano@npm:^5.0.1": - version: 5.1.14 - resolution: "cssnano@npm:5.1.14" + version: 5.1.15 + resolution: "cssnano@npm:5.1.15" dependencies: - cssnano-preset-default: "npm:^5.2.13" + cssnano-preset-default: "npm:^5.2.14" lilconfig: "npm:^2.0.3" yaml: "npm:^1.10.2" peerDependencies: postcss: ^8.2.15 - checksum: 3a183e5580dc306045a8e0fa4e892833cb7aa3bff50f9b7af3c6427b9470a48e9ce4bbefab2e4b5de2aafd46b8d7054858ed1b653a103637828b389276d21ce5 + checksum: 8c5acbeabd10ffc05d01c63d3a82dcd8742299ead3f6da4016c853548b687d9b392de43e6d0f682dad1c2200d577c9360d8e709711c23721509aa4e55e052fb3 languageName: node linkType: hard @@ -16848,17 +16845,17 @@ __metadata: languageName: node linkType: hard -"postcss-colormin@npm:^5.3.0": - version: 5.3.0 - resolution: "postcss-colormin@npm:5.3.0" +"postcss-colormin@npm:^5.3.1": + version: 5.3.1 + resolution: "postcss-colormin@npm:5.3.1" dependencies: - browserslist: "npm:^4.16.6" + browserslist: "npm:^4.21.4" caniuse-api: "npm:^3.0.0" colord: "npm:^2.9.1" postcss-value-parser: "npm:^4.2.0" peerDependencies: postcss: ^8.2.15 - checksum: 3d3e3cc25071407fb73d68541ca1039ebd154fceb649041461a8a3cab0400cc89b42dbb34a4eeaf573be4ba2370ce23af5e01aff5e03a8d72275f40605577212 + checksum: e5778baab30877cd1f51e7dc9d2242a162aeca6360a52956acd7f668c5bc235c2ccb7e4df0370a804d65ebe00c5642366f061db53aa823f9ed99972cebd16024 languageName: node linkType: hard @@ -17052,9 +17049,9 @@ __metadata: languageName: node linkType: hard -"postcss-merge-rules@npm:^5.1.3": - version: 5.1.3 - resolution: "postcss-merge-rules@npm:5.1.3" +"postcss-merge-rules@npm:^5.1.4": + version: 5.1.4 + resolution: "postcss-merge-rules@npm:5.1.4" dependencies: browserslist: "npm:^4.21.4" caniuse-api: "npm:^3.0.0" @@ -17062,7 +17059,7 @@ __metadata: postcss-selector-parser: "npm:^6.0.5" peerDependencies: postcss: ^8.2.15 - checksum: 4aed5355a5a44c9c55487db19e92a4ba21c6e24b076a75e4c8a760c0def3b5e9a0045e474321ea8392076f635d2080a09849585cf2f0bccafeeafa34641acef5 + checksum: 659c3eaff9d573f07c227a7e4811159898f49a89b02bbd3a65a0ed7aaa434264443ab539bcbc273bf08986e6a185bd62af0847c9836f9e2901c5f07937c14f3f languageName: node linkType: hard @@ -17186,15 +17183,15 @@ __metadata: linkType: hard "postcss-modules-local-by-default@npm:^4.0.0": - version: 4.0.0 - resolution: "postcss-modules-local-by-default@npm:4.0.0" + version: 4.0.5 + resolution: "postcss-modules-local-by-default@npm:4.0.5" dependencies: icss-utils: "npm:^5.0.0" postcss-selector-parser: "npm:^6.0.2" postcss-value-parser: "npm:^4.1.0" peerDependencies: postcss: ^8.1.0 - checksum: 94670d17bdc545ef4054724224597cb321fdf6086de56ecf6b7f809d0fb6f63d493badd5856cb05122bbc81a5a6684b4e15bc7686004ac3097c0ea916f57dad2 + checksum: b08b01aa7f3d1a80bb1a5508ba3a208578fdd2fb6e54e5613fac244a4e014aa7ca639a614859fec93b399e5a6f86938f7690ca60f7e57c4e35b75621d3c07734 languageName: node linkType: hard @@ -17212,13 +17209,13 @@ __metadata: linkType: hard "postcss-modules-scope@npm:^3.0.0": - version: 3.0.0 - resolution: "postcss-modules-scope@npm:3.0.0" + version: 3.2.0 + resolution: "postcss-modules-scope@npm:3.2.0" dependencies: postcss-selector-parser: "npm:^6.0.4" peerDependencies: postcss: ^8.1.0 - checksum: cc36b8111c6160a1c21ca0e82de9daf0147be95f3b5403aedd83bcaee44ee425cb62b77f677fc53d0c8d51f7981018c1c8f0a4ad3d6f0138b09326ac48c2b297 + checksum: 17c293ad13355ba456498aa5815ddb7a4a736f7b781d89b294e1602a53b8d0e336131175f82460e290a0d672642f9039540042edc361d9000b682c44e766925b languageName: node linkType: hard @@ -17483,15 +17480,15 @@ __metadata: languageName: node linkType: hard -"postcss-reduce-initial@npm:^5.1.1": - version: 5.1.1 - resolution: "postcss-reduce-initial@npm:5.1.1" +"postcss-reduce-initial@npm:^5.1.2": + version: 5.1.2 + resolution: "postcss-reduce-initial@npm:5.1.2" dependencies: browserslist: "npm:^4.21.4" caniuse-api: "npm:^3.0.0" peerDependencies: postcss: ^8.2.15 - checksum: 287bc1c0d8a2485086be27bd896d350b58a6d9e5be4b731c43571d7379c0c813910019bcbe43d5b4d73c8f6a271c7dbbd5e48d66a3dac18123a56dfa4b05c987 + checksum: 6234a85dab32cc3ece384f62c761c5c0dd646e2c6a419d93ee7cdb78b657e43381df39bd4620dfbdc2157e44b51305e4ebe852259d12c8b435f1aa534548db3e languageName: node linkType: hard @@ -17557,7 +17554,7 @@ __metadata: languageName: node linkType: hard -"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5, postcss-selector-parser@npm:^6.0.9": +"postcss-selector-parser@npm:^6.0.11, postcss-selector-parser@npm:^6.0.13, postcss-selector-parser@npm:^6.0.2, postcss-selector-parser@npm:^6.0.4, postcss-selector-parser@npm:^6.0.5": version: 6.0.13 resolution: "postcss-selector-parser@npm:6.0.13" dependencies: @@ -17567,6 +17564,16 @@ __metadata: languageName: node linkType: hard +"postcss-selector-parser@npm:^6.0.9": + version: 6.0.16 + resolution: "postcss-selector-parser@npm:6.0.16" + dependencies: + cssesc: "npm:^3.0.0" + util-deprecate: "npm:^1.0.2" + checksum: 9324f63992c6564d392f9f6b16c56c05f157256e3be2d55d1234f7728252257dfd6b870a65a5d04ee3ceb9d9e7b78c043f630a58c9869b4b0481d6e064edc2cf + languageName: node + linkType: hard + "postcss-svgo@npm:^5.1.0": version: 5.1.0 resolution: "postcss-svgo@npm:5.1.0" From 51057c07d2f4af7daa0abe33798b1c45ac6dbfca Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 14 May 2024 09:50:32 +0200 Subject: [PATCH 2/3] remove react-css-modules.css --- packages/css/index.css | 1 - packages/css/react-css-modules.css | 388 ----------------------------- 2 files changed, 389 deletions(-) delete mode 100644 packages/css/react-css-modules.css diff --git a/packages/css/index.css b/packages/css/index.css index 4723f3d418..b49b40fe00 100644 --- a/packages/css/index.css +++ b/packages/css/index.css @@ -3,7 +3,6 @@ @layer fds.typography, fds.utils, fds.btn; /** Import order defines ordinal specificity for layers */ -@import url('./react-css-modules.css'); @import url('./button.css'); @import url('./utils.css'); @import url('./box.css'); diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css deleted file mode 100644 index 24d1f6c708..0000000000 --- a/packages/css/react-css-modules.css +++ /dev/null @@ -1,388 +0,0 @@ -@layer fds.combobox-option { - .fds-option-option-e45d3bd6 { - width: 100%; - display: grid; - grid-template-columns: 1.2em 1fr; - padding: var(--fds-spacing-2) var(--fds-spacing-3); - padding-left: var(--fds-spacing-1); - border: none; - border-left: 5px solid transparent; - border-radius: var(--fds-border_radius-interactive); - justify-content: start; - background: none; - text-align: left; - height: auto; - cursor: pointer; - font: var(--fds-typography-label-medium); - font-family: inherit; - } - - .fds-option-option-e45d3bd6.fds-option-active-e45d3bd6 { - background: var(--fds-semantic-surface-action-first-no_fill-hover); - border-left: 5px solid var(--fds-semantic-border-input-hover); - } - - .fds-option-option-e45d3bd6 > div { - align-self: flex-start; - } - - .fds-option-option-e45d3bd6.fds-option-multiple-e45d3bd6 { - grid-template-columns: auto 1fr; - gap: var(--fds-spacing-2); - } - - .fds-option-optionText-e45d3bd6 { - margin: auto 0; - display: flex; - flex-direction: column; - flex-wrap: wrap; - cursor: pointer; - gap: var(--fds-spacing-1); - color: var(--fds-semantic-text-neutral-default); - } - - .fds-option-active-e45d3bd6 .fds-option-optionText-e45d3bd6 { - color: var(--fds-semantic-text-action-hover); - } - - .fds-option-checkbox-e45d3bd6 { - min-width: unset; - min-height: unset; - aspect-ratio: 1 / 1; - line-height: 0 !important; - } - - .fds-option-checkbox-e45d3bd6 input { - min-width: unset; - min-height: unset; - } - - .fds-option-checkbox-e45d3bd6 > span { - position: relative; - min-width: unset; - min-height: unset; - height: unset; - width: unset; - } - - .fds-option-selectIconWrapper-e45d3bd6 { - width: var(--fds-spacing-6); - aspect-ratio: 1 / 1; - border: 2px solid var(--fds-semantic-border-input-default); - border-radius: var(--fds-border_radius-interactive); - background-color: white; - display: grid; - place-items: center; - } - - .fds-option-small-e45d3bd6 .fds-option-selectIconWrapper-e45d3bd6 { - width: var(--fds-spacing-5); - } - - .fds-option-medium-e45d3bd6 .fds-option-selectIconWrapper-e45d3bd6 { - width: var(--fds-spacing-6); - } - - .fds-option-large-e45d3bd6 .fds-option-selectIconWrapper-e45d3bd6 { - width: var(--fds-spacing-7); - } - - .fds-option-selectIconWrapper-e45d3bd6.fds-option-selected-e45d3bd6 { - border-color: var(--fds-semantic-border-input-hover); - background-color: var(--fds-semantic-border-input-hover); - } - - .fds-option-selectIcon-e45d3bd6 { - box-sizing: border-box; - padding-top: 0.2em; - transform: scale(1.4); - stroke: var(--fds-semantic-text-neutral-default); - color: var(--fds-semantic-text-neutral-default); - } - - .fds-option-selectIconWrapper-e45d3bd6 .fds-option-selectIcon-e45d3bd6 { - padding-top: 0; - } - - .fds-option-active-e45d3bd6 .fds-option-selectIcon-e45d3bd6 { - stroke: var(--fds-semantic-text-action-hover); - color: var(--fds-semantic-text-action-hover); - } - - .fds-option-active-e45d3bd6 .fds-option-selectIconWrapper-e45d3bd6 { - border-color: var(--fds-semantic-border-input-hover); - } - - .fds-option-selectIconWrapper-e45d3bd6.fds-option-selected-e45d3bd6 .fds-option-selectIcon-e45d3bd6 { - color: white; - stroke: white; - } -} - -@layer fds.combobox-option-description { - .fds-description-description-2f709a8a { - display: flex; - flex-direction: column; - flex-wrap: wrap; - gap: var(--fds-spacing-1); - color: var(--fds-semantic-text-neutral-subtle); - font: inherit; - font-family: inherit; - } -} - -@layer fds.combobox-custom { - .fds-custom-custom-b0827f56 { - padding: var(--fds-spacing-2) var(--fds-spacing-3); - } - - .fds-custom-large-b0827f56 { - font: var(--fds-typography-label-large); - font-family: inherit; - font-weight: 400; - } - - .fds-custom-medium-b0827f56 { - font: var(--fds-typography-label-medium); - font-family: inherit; - font-weight: 400; - } - - .fds-custom-small-b0827f56 { - font: var(--fds-typography-label-small); - font-family: inherit; - font-weight: 400; - } -} - -@layer fds.combobox { - .fds-combobox-combobox-249a725c { - display: grid; - background-color: transparent; - gap: var(--fds-spacing-2); - } - - .fds-combobox-optionsWrapper-249a725c { - padding: var(--fds-spacing-2); - background: var(--fds-semantic-background-default); - overflow-y: auto; - z-index: 1600; - } - - .fds-combobox-readOnly-249a725c input { - pointer-events: none; - } - - .fds-combobox-inputWrapper-249a725c { - display: flex; - align-items: center; - position: relative; - gap: var(--fds-spacing-1); - cursor: text; - padding: var(--fds-spacing-2); - width: 100%; - height: auto; - justify-content: space-between; - font: var(--fds-typography-paragraph-medium); - font-family: inherit; - } - - .fds-combobox-inputWrapper-249a725c input { - height: 100%; - min-width: 50px; - flex-grow: 1; - appearance: none; - border: none; - background-color: transparent; - } - - .fds-combobox-inputWrapper-249a725c.fds-combobox-small-249a725c { - min-height: var(--fds-sizing-10); - font: var(--fds-typography-paragraph-small); - font-family: inherit; - padding: 5px var(--fds-spacing-2); - } - - .fds-combobox-inputWrapper-249a725c.fds-combobox-small-249a725c input { - font: var(--fds-typography-paragraph-small); - font-family: inherit; - } - - .fds-combobox-inputWrapper-249a725c.fds-combobox-medium-249a725c { - min-height: var(--fds-sizing-12); - font: var(--fds-typography-paragraph-medium); - font-family: inherit; - padding: 7px var(--fds-spacing-3); - } - - .fds-combobox-inputWrapper-249a725c.fds-combobox-medium-249a725c input { - font: var(--fds-typography-paragraph-medium); - font-family: inherit; - } - - .fds-combobox-inputWrapper-249a725c.fds-combobox-large-249a725c { - min-height: var(--fds-sizing-14); - font: var(--fds-typography-paragraph-large); - font-family: inherit; - padding: 7px var(--fds-spacing-4); - } - - .fds-combobox-inputWrapper-249a725c.fds-combobox-large-249a725c input { - font: var(--fds-typography-paragraph-large); - font-family: inherit; - } - - .fds-combobox-inputWrapper-249a725c input:focus { - outline: none; - } - - .fds-combobox-inputWrapper-249a725c.fds-combobox-error-249a725c { - border-color: var(--fds-semantic-border-danger-default); - border-width: 2px; - } - - .fds-combobox-chipAndInput-249a725c { - display: flex; - flex-wrap: wrap; - width: 100%; - gap: var(--fds-spacing-2); - align-items: center; - background-color: transparent; - } - - .fds-combobox-chips-249a725c { - display: flex; - flex-wrap: wrap; - gap: var(--fds-spacing-1); - align-items: center; - background-color: transparent; - } - - .fds-combobox-arrow-249a725c { - display: grid; - place-items: center; - cursor: pointer; - } - - .fds-combobox-inputWrapper-249a725c.fds-combobox-readonly-249a725c { - background: var(--fds-semantic-surface-neutral-subtle); - border-color: var(--fds-semantic-border-neutral-default); - } - - .fds-combobox-label-249a725c { - min-width: min-content; - display: inline-flex; - flex-direction: row; - gap: var(--fds-spacing-1); - align-items: center; - } - - .fds-combobox-description-249a725c { - color: var(--fds-semantic-text-neutral-subtle); - margin-top: calc(var(--fds-spacing-2) * -1); - } - - .fds-combobox-clearButton-249a725c { - display: grid; - place-items: center; - cursor: pointer; - background-color: transparent; - color: var(--fds-semantic-text-neutral-default); - border: none; - padding: 0; - border-radius: var(--fds-spacing-1); - height: 29px; - width: 29px; - aspect-ratio: 1; - } - - .fds-combobox-clearButton-249a725c.fds-combobox-small-249a725c { - height: 25px; - width: 25px; - } - - .fds-combobox-clearButton-249a725c.fds-combobox-medium-249a725c { - height: 29px; - width: 29px; - } - - .fds-combobox-clearButton-249a725c.fds-combobox-large-249a725c { - height: 31px; - width: 31px; - } - - .fds-combobox-clearButton-249a725c:not(.fds-combobox-disabled-249a725c):hover { - background-color: var(--fds-semantic-surface-info-subtle-hover); - } - - .fds-combobox-disabled-249a725c { - opacity: var(--fds-opacity-disabled); - } - - .fds-combobox-disabled-249a725c * { - cursor: not-allowed; - } - - .fds-combobox-padlock-249a725c { - height: 1.2em; - width: 1.2em; - } - - .fds-combobox-errorMessage-249a725c { - margin-top: var(--fds-spacing-2); - } - - .fds-combobox-errorMessage-249a725c:empty { - display: none; - } - - .fds-combobox-loading-249a725c { - display: flex; - gap: var(--fds-spacing-2); - align-content: center; - } - - /** - * Apply a focus outline on an element when it is focused with keyboard - */ - .fds-combobox-inputWrapper-249a725c:has(input:focus) { - --fds-focus-border-width: 3px; - - outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline); - outline-offset: var(--fds-focus-border-width); - box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow) !important; - } - - .fds-combobox-showChecked-249a725c path { - display: inline !important; - } - - .fds-combobox-showChecked-249a725c rect { - stroke: var(--fds-semantic-border-input-hover) !important; - fill: var(--fds-semantic-border-input-hover) !important; - } -} - -@layer fds.combobox-empty { - .fds-empty-empty-81c5195a { - padding: var(--fds-spacing-2) var(--fds-spacing-3); - } - - .fds-empty-large-81c5195a { - font: var(--fds-typography-label-large); - font-family: inherit; - font-weight: 400; - } - - .fds-empty-medium-81c5195a { - font: var(--fds-typography-label-medium); - font-family: inherit; - font-weight: 400; - } - - .fds-empty-small-81c5195a { - font: var(--fds-typography-label-small); - font-family: inherit; - font-weight: 400; - } -} From 4cbb9129d03cbcdbb7a5e315c929561475d00476 Mon Sep 17 00:00:00 2001 From: Michael Marszalek Date: Tue, 14 May 2024 09:51:28 +0200 Subject: [PATCH 3/3] update configs with removal --- .stylelintignore | 1 - .vscode/settings.json | 1 - 2 files changed, 2 deletions(-) diff --git a/.stylelintignore b/.stylelintignore index ecb745e9e5..24ad00e426 100644 --- a/.stylelintignore +++ b/.stylelintignore @@ -1,4 +1,3 @@ **/dist/**/*.css packages/theme/brand/**/*.css packages/css/dist/**/*.css -react-css-modules.css diff --git a/.vscode/settings.json b/.vscode/settings.json index 33e8ba9f4d..89e1fb3e85 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -21,7 +21,6 @@ "mdx" ], "html-css-class-completion.includeGlobPattern": "packages/css/**/*.{css,html}", - "html-css-class-completion.excludeGlobPattern": "**/react-css-modules.css", "cSpell.words": ["altinn", "brreg", "designsystemet", "digdir"], "cSpell.language": "en,nb", "cSpell.ignorePaths": ["**/node_modules/**", "**/package.json", "yarn.lock"],