-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
30 changed files
with
1,185 additions
and
417 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -23,3 +23,6 @@ coverage/ | |
|
|
||
| # Storybook build files | ||
| docs/docs | ||
|
|
||
| # Generated css files | ||
| packages/react/src/styles/*.css | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| { | ||
| "modules": [ | ||
| "Breadcrumb.css", | ||
| "Container.css", | ||
| "FileCard.css", | ||
| "Footer.css", | ||
| "Header.css", | ||
| "HeaderStories.css", | ||
| "LinkList.css", | ||
| "LinkPanel.css", | ||
| "StorybookLayout.css" | ||
| ], | ||
| "global": "global.css" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| import path from 'path'; | ||
|
|
||
| /* eslint-disable no-bitwise */ | ||
| 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); | ||
| } | ||
|
|
||
| export function generateScopedName(selector, fileName) { | ||
| const componentName = path | ||
| .basename(fileName) | ||
| .replace('.module', '') | ||
| .replace('.css', ''); | ||
| return `tlp-${hashCode(`${componentName}-${selector}`)}`; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,93 @@ | ||
| import path from 'path'; | ||
|
|
||
| import postcss from 'postcss'; | ||
| import cssnano from 'cssnano'; | ||
| import postcssModules from 'postcss-modules'; | ||
| import glob from 'fast-glob'; | ||
| import fs from 'fs-extra'; | ||
|
|
||
| import { generateScopedName } from '../rollup/hash-css-name.mjs'; | ||
|
|
||
| console.log('Generating css files'); | ||
|
|
||
| console.log({ | ||
| dirPath: path.resolve(__dirname, '../src/**/*.css').replace(/\\/g, '/'), | ||
| }); | ||
|
|
||
| const files = glob.sync( | ||
| path.resolve(__dirname, '../src/**/*.css').replace(/\\/g, '/'), | ||
| ); | ||
| const modules = files.filter((file) => file.endsWith('.module.css')); | ||
| const global = files.find((file) => file.endsWith('global.css')); | ||
|
|
||
| if (typeof global !== 'string') { | ||
| throw new Error('Could not find global.css file'); | ||
| } | ||
|
|
||
| console.log({ | ||
| allCssFiles: files, | ||
| allCssModules: modules, | ||
| globalCssFile: global, | ||
| }); | ||
|
|
||
| function prepareFileName(filePath: string) { | ||
| return path.basename(filePath).replace('.module.css', '.css'); | ||
| } | ||
|
|
||
| fs.writeJsonSync( | ||
| path.join(__dirname, '../css-exports.json'), | ||
| { modules: modules.map(prepareFileName), global: prepareFileName(global) }, | ||
| { spaces: 2 }, | ||
| ); | ||
|
|
||
| const outputFolder = path.resolve(__dirname, '../src/styles'); | ||
| fs.ensureDirSync(outputFolder); | ||
|
|
||
| async function processFile( | ||
| filePath: string, | ||
| scopeBehaviour: 'local' | 'global', | ||
| ) { | ||
| const result = await postcss([ | ||
| postcssModules({ | ||
| generateScopedName, | ||
| getJSON: () => { | ||
| return; | ||
| }, | ||
| scopeBehaviour, | ||
| }), | ||
| cssnano({ preset: 'default' }), | ||
| ]).process(fs.readFileSync(filePath, 'utf-8'), { | ||
| from: path.basename(filePath), | ||
| }); | ||
|
|
||
| const fileName = prepareFileName(filePath); | ||
| return fs.writeFile(path.join(outputFolder, fileName), result.css); | ||
| } | ||
|
|
||
| async function createFiles() { | ||
| if (typeof global !== 'string') { | ||
| throw new Error('Could not find global.css file'); | ||
| } | ||
|
|
||
| await processFile(global, 'global'); | ||
| await Promise.all(modules.map((file) => processFile(file, 'local'))); | ||
| await concatIntoGlobal(); | ||
|
|
||
| console.log('Done generating css files'); | ||
| } | ||
|
|
||
| async function concatIntoGlobal() { | ||
| const cssFiles = glob.sync( | ||
| path.resolve(__dirname, '../src/styles**/*.css').replace(/\\/g, '/'), | ||
| ); | ||
| console.log({ generatedCssFiles: cssFiles }); | ||
| const cssFilesContent = cssFiles.map((file) => | ||
| fs.readFileSync(file, 'utf-8'), | ||
| ); | ||
| fs.writeFileSync( | ||
| path.join(outputFolder, 'global.css'), | ||
| cssFilesContent.join('\n'), | ||
| ); | ||
| } | ||
|
|
||
| createFiles(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.