diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index 93644cb3..f7b237c6 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -15,4 +15,4 @@ jobs: node-version: 'lts/*' cache: 'yarn' - run: yarn install --frozen-lockfile - # - run: yarn test + - run: yarn test diff --git a/.gitignore b/.gitignore index 44228e6b..680f9f8f 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,4 @@ lib .cache/ public/ example/build/ +test/output/ \ No newline at end of file diff --git a/package.json b/package.json index 5aa5f4ee..e6869f01 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,7 @@ "types": "lib/esm/index.d.ts", "scripts": { "lint": "tsc -p . --noEmit && eslint src", - "test": "yarn test:ts && jest --detectOpenHandles", + "test": "yarn test:ts && jest --detectOpenHandles --runInBand", "test:ts": "yarn eslint types --ext .tsx --ext .ts", "tdd": "jest --watch", "prepublishOnly": "yarn build", @@ -30,10 +30,8 @@ "bin": { "astroturf": "./cli.js" }, - "husky": { - "hooks": { - "pre-commit": "lint-staged" - } + "gitHooks": { + "pre-commit": "lint-staged" }, "lint-staged": { "!(__file_snapshots__/)*.js": [ @@ -58,6 +56,7 @@ ], "watchPathIgnorePatterns": [ "build", + "output", "__file_snapshots__" ] }, @@ -68,29 +67,22 @@ }, "homepage": "https://github.com/4Catalyzer/astroturf#readme", "dependencies": { - "@babel/code-frame": "^7.12.13", - "@babel/core": "^7.13.10", - "@babel/generator": "^7.13.9", - "@babel/helper-module-imports": "^7.12.13", - "@babel/plugin-transform-react-jsx": "^7.12.17", - "@babel/template": "^7.12.13", - "@babel/traverse": "^7.13.0", - "@babel/types": "^7.13.0", - "@modular-css/processor": "^26.0.0", - "@types/common-tags": "^1.8.0", - "@types/fs-extra": "^9.0.8", - "@types/loader-utils": "^2.0.1", - "@types/resolve": "^1.20.0", - "@types/webpack": "^4.41.26", - "common-tags": "^1.8.0", - "cosmiconfig": "^7.0.0", + "@babel/code-frame": "^7.16.0", + "@babel/core": "^7.16.5", + "@babel/generator": "^7.16.5", + "@babel/helper-module-imports": "^7.16.0", + "@babel/plugin-transform-react-jsx": "^7.16.5", + "@babel/template": "^7.16.0", + "@babel/traverse": "^7.16.5", + "@babel/types": "^7.16.0", + "@modular-css/processor": "^27.0.3", + "common-tags": "^1.8.2", + "cosmiconfig": "^7.0.1", "css-loader": "^5.1.3", "fast-levenshtein": "^3.0.0", - "find-cache-dir": "^3.3.1", - "fs-extra": "^9.1.0", + "find-cache-dir": "^3.3.2", "globby": "^11.0.0", "json5": "^2.2.0", - "loader-utils": "^2.0.0", "lodash": "^4.17.21", "magic-string": "^0.25.7", "picocolors": "^1.0.0", @@ -99,10 +91,10 @@ "postcss-scss": "^4.0.2", "resolve": "^1.20.0", "webpack-virtual-modules": "^0.3.2", - "yargs": "^17.2.1" + "yargs": "^17.3.0" }, "peerDependencies": { - "webpack": ">=2" + "webpack": ">=5" }, "devDependencies": { "@4c/babel-preset": "^8.1.1", @@ -113,9 +105,14 @@ "@babel/preset-env": "^7.15.0", "@babel/preset-react": "^7.14.5", "@babel/preset-typescript": "^7.15.0", + "@types/common-tags": "^1.8.1", + "@types/fs-extra": "^9.0.13", + "@types/loader-utils": "^2.0.3", "@types/lodash": "^4.14.172", "@types/react": "^17.0.18", "@types/react-dom": "^17.0.9", + "@types/resolve": "^1.20.1", + "@types/webpack": "^5.28.0", "@typescript-eslint/eslint-plugin": "^4.29.1", "@typescript-eslint/parser": "^4.29.1", "autoprefixer": "^10.3.1", @@ -140,7 +137,9 @@ "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0", "eslint-plugin-ts-expect": "^2.0.0", + "fs-extra": "^10.0.0", "gh-pages": "^3.2.3", + "hookem": "^2.0.1", "html-webpack-plugin": "^5.3.2", "husky": "^4.3.8", "jest": "^26.6.3", diff --git a/src/cli.ts b/src/cli.ts index 373cfc3c..1d8e2018 100644 --- a/src/cli.ts +++ b/src/cli.ts @@ -7,7 +7,7 @@ import path from 'path'; import Processor from '@modular-css/processor'; import Output from '@modular-css/processor/lib/output'; import globby from 'globby'; -import { PluginCreator } from 'postcss'; +import { AtRule, PluginCreator, Result, Rule } from 'postcss'; import postcssScss from 'postcss-scss'; import resolve from 'resolve'; import yargs from 'yargs'; @@ -20,7 +20,7 @@ import type { Style, } from './types'; import createFilename from './utils/createFilename'; -import { collectStyles, replaceStyleTemplates } from './utils/loaders.js'; +import { collectStyles, replaceStyleTemplates } from './utils/loaders'; /** * use comma seperators for composes classes @@ -39,6 +39,40 @@ function composesPlugin(css: any) { composesPlugin.postcssPlugin = 'compat-composes-delimiter'; +const exportPlugin: PluginCreator = () => { + function collect(rule: Rule | AtRule, result: Result) { + const exported = Object.create(null); + + rule.walkDecls((decl) => { + exported[decl.prop] = decl.value; + }); + + rule.remove(); + + result.messages.push({ + type: 'css-module-loader', + plugin: 'modular-css-export-icss', + exports: exported, + }); + } + + return { + postcssPlugin: 'astroturf/icss-export', + AtRule: { + export: (rule, { result }) => { + collect(rule, result); + }, + }, + Rule(rule, { result }) { + if (rule.selector === ':export') { + collect(rule, result); + } + }, + }; +}; + +exportPlugin.postcss = true; + const stripInlineComments: PluginCreator = () => { return { postcssPlugin: 'astroturf/strip-inline-comments', @@ -49,6 +83,185 @@ const stripInlineComments: PluginCreator = () => { }; stripInlineComments.postcss = true; +export async function handler({ files, outFile, configFile }) { + const styles = new Map(); + const outFiles: Array<{ value: string; absoluteFilePath: string }> = []; + const options = configFile ? await config.load(configFile) : null; + + const deps = new Map(); + + const dependencyResolver = ( + { request, identifier }: ResolvedImport, + localStyle: Style, + ) => { + const source = resolve.sync(request, { + basedir: path.dirname(localStyle.absoluteFilePath), + }); + + let styleFile = createFilename( + request, + { extension: '.css' } as any, + identifier, + ); + styleFile = path.resolve( + path.dirname(localStyle.absoluteFilePath), + styleFile, + ); + deps.set(styleFile, source); + return { source: styleFile }; + }; + + async function runAstroturf(content: string, file: string) { + const existing = styles.get(file); + + if (existing) return existing; + + const fileOptions = options || (await config.search(file)); + + const result = collectStyles(content, file, dependencyResolver, { + ...fileOptions?.config, + writeFiles: false, + extension: '.css', + generateInterpolations: true, + experiments: { + modularCssExternals: true, + }, + }); + styles.set(file, result); + + return result; + } + + const processor = new Processor({ + before: [composesPlugin], + processing: [exportPlugin], + after: [stripInlineComments], + resolvers: [(src, file) => path.resolve(path.dirname(src), file)], + postcss: { syntax: postcssScss }, + loadFile: async (src) => { + if (deps.has(src)) { + const hostFile = deps.get(src)!; + const result = await runAstroturf( + await readFile(hostFile, 'utf-8'), + hostFile, + ); + + const style = result?.styles.find((s) => s.absoluteFilePath === src); + + if (style?.value) { + return style.value; + } + } + + return readFile(src, 'utf-8'); + }, + }); + + for (const file of files) { + const content = await readFile(file, 'utf-8'); + const astroturf = await runAstroturf(content, file); + + if (!astroturf || !astroturf.styles.length) { + continue; + } + + const changeset: Partial[] = []; + const emptyCss: RegExp[] = []; + + await Promise.all( + astroturf.styles.map((s) => + processor.string(s.absoluteFilePath, s.value), + ), + ).then((processed) => { + processed.forEach((r, idx) => { + const style = astroturf.styles[idx]; + const isEmpty = !r.details.result.css.trim(); + + if (!outFile) { + if (isEmpty) { + emptyCss.push( + new RegExp( + `(import )(.+?from\\s+)["'](${style.requirePath.replace( + /[-[\]{}()*+!<=:?./\\^$|#\s,]/g, + '\\$&', + )})["'];?`, + 'g', + ), + ); + } else { + outFiles.push({ + absoluteFilePath: style.absoluteFilePath, + value: r.details.result.css, + }); + } + } + + changeset.push(style); + + if (style.code) { + changeset.push({ + start: 0, + end: 0, + code: `\nconst ${style.importIdentifier} = ${JSON.stringify( + { + ...Object.fromEntries( + Object.entries(r.details.values).map(([k, v]: any) => [ + `@${k}`, + v.value, + ]), + ), + ...r.details.exported, + ...Output.fileCompositions(r.details, processor, { + joined: true, + }), + }, + null, + 2, + )};\n`, + }); + } + }); + }); + + for (const change of astroturf.changeset) { + if (astroturf.styles.includes(change as any)) { + continue; + } + if (change.type === 'style-imports') { + changeset.push({ + ...change, + code: !outFile + ? emptyCss + .reduce((code, exp) => code?.replace(exp, ''), change.code!) + .replace(/(import )(.+?from\s+)(.*)/g, '$1$3') + : '', + }); + continue; + } + changeset.push(change); + } + + await writeFile( + file, + replaceStyleTemplates({}, file, content, changeset).code, + ); + } + + if (outFile) { + outFiles.push({ + absoluteFilePath: path.isAbsolute(outFile) + ? outFile + : path.resolve(process.cwd(), outFile), + value: (await processor.output()).css, + }); + } + + await Promise.all( + outFiles.map((style) => + writeFile(style.absoluteFilePath, style.value, 'utf-8'), + ), + ); +} // eslint-disable-next-line @typescript-eslint/no-unused-expressions yargs .help() @@ -68,155 +281,7 @@ yargs async ({ _, 'css-out-file': cssOutFile, config: configFile }) => { const files = await globby(_); - const styles = new Map(); - const outFiles: Array<{ value: string; absoluteFilePath: string }> = []; - const options = configFile ? await config.load(configFile) : null; - - const deps = new Map(); - - const dependencyResolver = ( - { request, identifier }: ResolvedImport, - localStyle: Style, - ) => { - const source = resolve.sync(request, { - basedir: path.dirname(localStyle.absoluteFilePath), - }); - - let styleFile = createFilename( - request, - { extension: '.css' } as any, - identifier, - ); - styleFile = path.resolve( - path.dirname(localStyle.absoluteFilePath), - styleFile, - ); - deps.set(styleFile, source); - return { source: styleFile }; - }; - - async function runAstroturf(content: string, file: string) { - const existing = styles.get(file); - - if (existing) return existing; - - const fileOptions = options || (await config.search(file)); - - const result = collectStyles(content, file, dependencyResolver, { - ...fileOptions?.config, - writeFiles: false, - extension: '.css', - generateInterpolations: true, - experiments: { - modularCssExternals: true, - }, - }); - styles.set(file, result); - - return result; - } - - const processor = new Processor({ - before: [composesPlugin], - after: [stripInlineComments], - resolvers: [(src, file) => path.resolve(path.dirname(src), file)], - postcss: { syntax: postcssScss }, - loadFile: async (src) => { - if (deps.has(src)) { - const hostFile = deps.get(src)!; - const result = await runAstroturf( - await readFile(hostFile, 'utf-8'), - hostFile, - ); - - const style = result?.styles.find( - (s) => s.absoluteFilePath === src, - ); - - if (style?.value) { - return style.value; - } - } - - return readFile(src, 'utf-8'); - }, - }); - - for (const file of files) { - const content = await readFile(file, 'utf-8'); - const astroturf = await runAstroturf(content, file); - - if (!astroturf || !astroturf.styles.length) { - continue; - } - - const changeset: Partial[] = []; - - await Promise.all( - astroturf.styles.map((s) => - processor.string(s.absoluteFilePath, s.value), - ), - ).then((processed) => { - processed.forEach((r, idx) => { - const style = astroturf.styles[idx]; - - if (!cssOutFile) - outFiles.push({ - absoluteFilePath: style.absoluteFilePath, - value: r.details.result.css, - }); - - changeset.push(style); - - if (style.code) { - changeset.push({ - start: 0, - end: 0, - code: `\nconst ${style.importIdentifier} = ${JSON.stringify( - Output.fileCompositions(r.details, processor, { - joined: true, - }), - null, - 2, - )};\n`, - }); - } - }); - }); - - for (const change of astroturf.changeset) { - if (astroturf.styles.includes(change as any)) { - continue; - } - if (!cssOutFile && change.type === 'style-imports') { - changeset.push({ - ...change, - code: change.code!.replace(/(import )(.+?from\s+)(.*)/g, '$1$3'), - }); - continue; - } - changeset.push(change); - } - - await writeFile( - file, - replaceStyleTemplates({}, file, content, changeset).code, - ); - } - - if (cssOutFile) { - outFiles.push({ - absoluteFilePath: path.isAbsolute(cssOutFile) - ? cssOutFile - : path.resolve(process.cwd(), cssOutFile), - value: (await processor.output()).css, - }); - } - await Promise.all( - outFiles.map((style) => - writeFile(style.absoluteFilePath, style.value, 'utf-8'), - ), - ); + await handler({ files, outFile: cssOutFile, configFile }); }, ).argv; diff --git a/src/inline-loader.ts b/src/inline-loader.ts index ef488897..a0d4c55c 100644 --- a/src/inline-loader.ts +++ b/src/inline-loader.ts @@ -6,7 +6,6 @@ import { deserialize, serialize } from 'v8'; import { Expression } from '@babel/types'; import findCacheDir from 'find-cache-dir'; -import loaderUtils from 'loader-utils'; import type { ResolvedImport, Style } from './types'; import { @@ -61,7 +60,7 @@ module.exports = async function loader( meta?: any, ) { const { resourcePath } = this; - const loaderOpts = loaderUtils.getOptions(this) || {}; + const loaderOpts = this.getOptions() || {}; const cb = this.async(); const loadModule = util.promisify((request: string, done: any) => @@ -96,7 +95,7 @@ module.exports = async function loader( function getLoaderRequest(from: string, to: string, id: string) { const cssBase = basename(to); - const file = `${cssBase}!=!astroturf/inline-loader?style!${from}?${id}`; + const file = `${cssBase}!=!astroturf/inline-loader?style=1!${from}?${id}`; return file; } diff --git a/src/loader.ts b/src/loader.ts index a667673a..f2f873a3 100644 --- a/src/loader.ts +++ b/src/loader.ts @@ -1,9 +1,7 @@ /* eslint-disable global-require */ -import loaderUtils from 'loader-utils'; - module.exports = function astroturfLoader(...args) { - const { useAltLoader = false } = loaderUtils.getOptions(this) || {}; + const { useAltLoader = false } = (this as any).getOptions() || {}; const loader = useAltLoader ? require('./inline-loader') diff --git a/src/plugin.ts b/src/plugin.ts index 5c6eaf91..bff7f3a7 100644 --- a/src/plugin.ts +++ b/src/plugin.ts @@ -1,10 +1,12 @@ +import { mkdirSync, writeFileSync } from 'fs'; +import { dirname } from 'path'; + import { PluginObj } from '@babel/core'; import generate from '@babel/generator'; // @ts-ignore import { NodePath, visitors } from '@babel/traverse'; import * as t from '@babel/types'; import { stripIndent } from 'common-tags'; -import { outputFileSync } from 'fs-extra'; import defaults from 'lodash/defaults'; import cssProp from './features/css-prop'; @@ -47,7 +49,8 @@ export default function plugin(): PluginObj { if (opts.writeFiles !== false) { styles.forEach(({ absoluteFilePath, value }) => { // @ts-ignore - outputFileSync(absoluteFilePath, stripIndent([value])); + mkdirSync(dirname(absoluteFilePath), { recursive: true }); + writeFileSync(absoluteFilePath, stripIndent([value] as any)); }); } }, diff --git a/src/utils/loaders.ts b/src/utils/loaders.ts index 81b9fccd..96e134b7 100644 --- a/src/utils/loaders.ts +++ b/src/utils/loaders.ts @@ -1,7 +1,6 @@ import { codeFrameColumns } from '@babel/code-frame'; import { SourceLocation } from '@babel/types'; import levenshtein from 'fast-levenshtein'; -import loaderUtils from 'loader-utils'; import sortBy from 'lodash/sortBy'; import MagicString from 'magic-string'; import pico from 'picocolors'; @@ -180,7 +179,7 @@ export function replaceStyleTemplates( export async function resolveOptions( loaderContext: any, ): Promise> { - const loaderOpts = loaderUtils.getOptions(loaderContext) || {}; + const loaderOpts = loaderContext.getOptions() || {}; if (loaderOpts.config === false) { return loaderOpts; diff --git a/test/__file_snapshots__/cli__no-out-file__typescript-Button.css b/test/__file_snapshots__/cli__no-out-file__typescript-Button.css new file mode 100644 index 00000000..1cbf4d2b --- /dev/null +++ b/test/__file_snapshots__/cli__no-out-file__typescript-Button.css @@ -0,0 +1,10 @@ +.mc17ec701a_cls1 { /*!*/ } +.mc17ec701a_cls2 { +color: red; +} +.mc17ec701a_cls2.mc17ec701a_variant-primary { +background: white; +} +.mc17ec701a_cls2.mc17ec701a_variant-secondary { +background: black; +} \ No newline at end of file diff --git a/test/__file_snapshots__/cli__no-out-file__typescript-CssProp1_Button.css b/test/__file_snapshots__/cli__no-out-file__typescript-CssProp1_Button.css new file mode 100644 index 00000000..e5349d3f --- /dev/null +++ b/test/__file_snapshots__/cli__no-out-file__typescript-CssProp1_Button.css @@ -0,0 +1,4 @@ +.mc4c29ab1f_cls1 { /*!*/ } +.mc4c29ab1f_cls2 { +color: red !important; +} \ No newline at end of file diff --git a/test/__file_snapshots__/cli__no-out-file__typescript-CssProp2_Button.css b/test/__file_snapshots__/cli__no-out-file__typescript-CssProp2_Button.css new file mode 100644 index 00000000..df8ad4de --- /dev/null +++ b/test/__file_snapshots__/cli__no-out-file__typescript-CssProp2_Button.css @@ -0,0 +1,4 @@ +.mc2fdd70ce_cls1 { /*!*/ } +.mc2fdd70ce_cls2 { +color: red !important; +} \ No newline at end of file diff --git a/test/__file_snapshots__/cli__no-out-file__typescript-styles.css b/test/__file_snapshots__/cli__no-out-file__typescript-styles.css new file mode 100644 index 00000000..69b6fde9 --- /dev/null +++ b/test/__file_snapshots__/cli__no-out-file__typescript-styles.css @@ -0,0 +1,9 @@ +.mcd8ce0bb3_foo { + color: red; + width: 75px; + } + + .mcd8ce0bb3_bar { + font-weight: bold; + font-style: italic; + } \ No newline at end of file diff --git a/test/__file_snapshots__/cli__no-out-file__typescript.tsx b/test/__file_snapshots__/cli__no-out-file__typescript.tsx new file mode 100644 index 00000000..c13f0ad5 --- /dev/null +++ b/test/__file_snapshots__/cli__no-out-file__typescript.tsx @@ -0,0 +1,75 @@ + +const _styles = { + "foo": "mcd8ce0bb3_foo", + "bar": "mcd8ce0bb3_foo mcd8ce0bb3_bar" +}; + +const _Button = { + "cls1": "mc17ec701a_cls1", + "cls2": "mc17ec701a_cls1 mc17ec701a_cls2", + "variant-primary": "mc17ec701a_variant-primary", + "variant-secondary": "mc17ec701a_variant-secondary" +}; + +const _CssProp1_Button = { + "cls1": "mc4c29ab1f_cls1", + "cls2": "mc4c29ab1f_cls1 mc4c29ab1f_cls2" +}; + +const _CssProp2_Button = { + "cls1": "mc2fdd70ce_cls1", + "cls2": "mc2fdd70ce_cls1 mc2fdd70ce_cls2" +}; +/** @jsxRuntime classic*/ +/** @jsx _j */ +/** @jsxFrag _j.F */ + +import _j from "astroturf/jsx"; +import styled from 'astroturf/react' +import React from 'react'; +import "./typescript-styles.css"; +import "./typescript-Button.css"; +import "./typescript-CssProp1_Button.css"; +import "./typescript-CssProp2_Button.css"; + + +const SIZE = 75; + +const styles = _styles; + +interface PropsType { + children: JSX.Element; + name: string; +} + +function someMath(obj: T): T { + console.log(Math.abs(obj.x)); + return obj as T; +} + +const Button = /*#__PURE__*/styled('button', null, { + displayName: "Button", + styles: _Button +}); + +class Component extends React.Component { + render() { + return ( + <> +

{this.props.children}

+ + + + ); + } +} diff --git a/test/__file_snapshots__/cli__out.css b/test/__file_snapshots__/cli__out.css new file mode 100644 index 00000000..e92733f9 --- /dev/null +++ b/test/__file_snapshots__/cli__out.css @@ -0,0 +1,30 @@ +/*test/output/typescript-Button.css*/ +.mc17ec701a_cls1 { /*!*/ } +.mc17ec701a_cls2 { +color: red; +} +.mc17ec701a_cls2.mc17ec701a_variant-primary { +background: white; +} +.mc17ec701a_cls2.mc17ec701a_variant-secondary { +background: black; +} +/*test/output/typescript-CssProp1_Button.css*/ +.mc4c29ab1f_cls1 { /*!*/ } +.mc4c29ab1f_cls2 { +color: red !important; +} +/*test/output/typescript-CssProp2_Button.css*/ +.mc2fdd70ce_cls1 { /*!*/ } +.mc2fdd70ce_cls2 { +color: red !important; +} +/*test/output/typescript-styles.css*/ +.mcd8ce0bb3_foo { + color: red; + width: 75px; + } +.mcd8ce0bb3_bar { + font-weight: bold; + font-style: italic; + } \ No newline at end of file diff --git a/test/__file_snapshots__/cli__out_file__out.css b/test/__file_snapshots__/cli__out_file__out.css new file mode 100644 index 00000000..e92733f9 --- /dev/null +++ b/test/__file_snapshots__/cli__out_file__out.css @@ -0,0 +1,30 @@ +/*test/output/typescript-Button.css*/ +.mc17ec701a_cls1 { /*!*/ } +.mc17ec701a_cls2 { +color: red; +} +.mc17ec701a_cls2.mc17ec701a_variant-primary { +background: white; +} +.mc17ec701a_cls2.mc17ec701a_variant-secondary { +background: black; +} +/*test/output/typescript-CssProp1_Button.css*/ +.mc4c29ab1f_cls1 { /*!*/ } +.mc4c29ab1f_cls2 { +color: red !important; +} +/*test/output/typescript-CssProp2_Button.css*/ +.mc2fdd70ce_cls1 { /*!*/ } +.mc2fdd70ce_cls2 { +color: red !important; +} +/*test/output/typescript-styles.css*/ +.mcd8ce0bb3_foo { + color: red; + width: 75px; + } +.mcd8ce0bb3_bar { + font-weight: bold; + font-style: italic; + } \ No newline at end of file diff --git a/test/__file_snapshots__/cli__out_file__typescript.tsx b/test/__file_snapshots__/cli__out_file__typescript.tsx new file mode 100644 index 00000000..02d332c3 --- /dev/null +++ b/test/__file_snapshots__/cli__out_file__typescript.tsx @@ -0,0 +1,70 @@ + +const _styles = { + "foo": "mcd8ce0bb3_foo", + "bar": "mcd8ce0bb3_foo mcd8ce0bb3_bar" +}; + +const _Button = { + "cls1": "mc17ec701a_cls1", + "cls2": "mc17ec701a_cls1 mc17ec701a_cls2", + "variant-primary": "mc17ec701a_variant-primary", + "variant-secondary": "mc17ec701a_variant-secondary" +}; + +const _CssProp1_Button = { + "cls1": "mc4c29ab1f_cls1", + "cls2": "mc4c29ab1f_cls1 mc4c29ab1f_cls2" +}; + +const _CssProp2_Button = { + "cls1": "mc2fdd70ce_cls1", + "cls2": "mc2fdd70ce_cls1 mc2fdd70ce_cls2" +}; +/** @jsxRuntime classic*/ +/** @jsx _j */ +/** @jsxFrag _j.F */ + +import _j from "astroturf/jsx"; +import styled from 'astroturf/react' +import React from 'react'; + +const SIZE = 75; + +const styles = _styles; + +interface PropsType { + children: JSX.Element; + name: string; +} + +function someMath(obj: T): T { + console.log(Math.abs(obj.x)); + return obj as T; +} + +const Button = /*#__PURE__*/styled('button', null, { + displayName: "Button", + styles: _Button +}); + +class Component extends React.Component { + render() { + return ( + <> +

{this.props.children}

+ + + + ); + } +} diff --git a/test/__file_snapshots__/cli__typescript-Button.css b/test/__file_snapshots__/cli__typescript-Button.css new file mode 100644 index 00000000..1cbf4d2b --- /dev/null +++ b/test/__file_snapshots__/cli__typescript-Button.css @@ -0,0 +1,10 @@ +.mc17ec701a_cls1 { /*!*/ } +.mc17ec701a_cls2 { +color: red; +} +.mc17ec701a_cls2.mc17ec701a_variant-primary { +background: white; +} +.mc17ec701a_cls2.mc17ec701a_variant-secondary { +background: black; +} \ No newline at end of file diff --git a/test/__file_snapshots__/cli__typescript-CssProp1_Button.css b/test/__file_snapshots__/cli__typescript-CssProp1_Button.css new file mode 100644 index 00000000..e5349d3f --- /dev/null +++ b/test/__file_snapshots__/cli__typescript-CssProp1_Button.css @@ -0,0 +1,4 @@ +.mc4c29ab1f_cls1 { /*!*/ } +.mc4c29ab1f_cls2 { +color: red !important; +} \ No newline at end of file diff --git a/test/__file_snapshots__/cli__typescript-CssProp2_Button.css b/test/__file_snapshots__/cli__typescript-CssProp2_Button.css new file mode 100644 index 00000000..df8ad4de --- /dev/null +++ b/test/__file_snapshots__/cli__typescript-CssProp2_Button.css @@ -0,0 +1,4 @@ +.mc2fdd70ce_cls1 { /*!*/ } +.mc2fdd70ce_cls2 { +color: red !important; +} \ No newline at end of file diff --git a/test/__file_snapshots__/cli__typescript-styles.css b/test/__file_snapshots__/cli__typescript-styles.css new file mode 100644 index 00000000..69b6fde9 --- /dev/null +++ b/test/__file_snapshots__/cli__typescript-styles.css @@ -0,0 +1,9 @@ +.mcd8ce0bb3_foo { + color: red; + width: 75px; + } + + .mcd8ce0bb3_bar { + font-weight: bold; + font-style: italic; + } \ No newline at end of file diff --git a/test/__file_snapshots__/cli__typescript.tsx b/test/__file_snapshots__/cli__typescript.tsx new file mode 100644 index 00000000..02d332c3 --- /dev/null +++ b/test/__file_snapshots__/cli__typescript.tsx @@ -0,0 +1,70 @@ + +const _styles = { + "foo": "mcd8ce0bb3_foo", + "bar": "mcd8ce0bb3_foo mcd8ce0bb3_bar" +}; + +const _Button = { + "cls1": "mc17ec701a_cls1", + "cls2": "mc17ec701a_cls1 mc17ec701a_cls2", + "variant-primary": "mc17ec701a_variant-primary", + "variant-secondary": "mc17ec701a_variant-secondary" +}; + +const _CssProp1_Button = { + "cls1": "mc4c29ab1f_cls1", + "cls2": "mc4c29ab1f_cls1 mc4c29ab1f_cls2" +}; + +const _CssProp2_Button = { + "cls1": "mc2fdd70ce_cls1", + "cls2": "mc2fdd70ce_cls1 mc2fdd70ce_cls2" +}; +/** @jsxRuntime classic*/ +/** @jsx _j */ +/** @jsxFrag _j.F */ + +import _j from "astroturf/jsx"; +import styled from 'astroturf/react' +import React from 'react'; + +const SIZE = 75; + +const styles = _styles; + +interface PropsType { + children: JSX.Element; + name: string; +} + +function someMath(obj: T): T { + console.log(Math.abs(obj.x)); + return obj as T; +} + +const Button = /*#__PURE__*/styled('button', null, { + displayName: "Button", + styles: _Button +}); + +class Component extends React.Component { + render() { + return ( + <> +

{this.props.children}

+ + + + ); + } +} diff --git a/test/__file_snapshots__/integration-js.js b/test/__file_snapshots__/integration-js.js index eb7ea24b..5fdb741a 100644 --- a/test/__file_snapshots__/integration-js.js +++ b/test/__file_snapshots__/integration-js.js @@ -13,15 +13,15 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var astroturf_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! astroturf/react */ "../src/runtime/react.js"); -/* harmony import */ var Button_styles_module_css_astroturf_inline_loader_style_integration_Button_js_styles__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! Button-styles.module.css!=!astroturf/inline-loader?style!./integration/Button.js?styles */ "Button-styles.module.css!=!../src/inline-loader.ts?style!./integration/Button.js?styles"); -/* harmony import */ var Button_module_css_astroturf_inline_loader_style_integration_Button_js_Button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! Button.module.css!=!astroturf/inline-loader?style!./integration/Button.js?Button */ "Button.module.css!=!../src/inline-loader.ts?style!./integration/Button.js?Button"); +/* harmony import */ var Button_styles_module_css_astroturf_inline_loader_style_1_integration_Button_js_styles__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! Button-styles.module.css!=!astroturf/inline-loader?style=1!./integration/Button.js?styles */ "Button-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styles"); +/* harmony import */ var Button_module_css_astroturf_inline_loader_style_1_integration_Button_js_Button__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! Button.module.css!=!astroturf/inline-loader?style=1!./integration/Button.js?Button */ "Button.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?Button"); -const styles = Button_styles_module_css_astroturf_inline_loader_style_integration_Button_js_styles__WEBPACK_IMPORTED_MODULE_1__.default; -const Button = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__.default)('button', null, { +const styles = Button_styles_module_css_astroturf_inline_loader_style_1_integration_Button_js_styles__WEBPACK_IMPORTED_MODULE_1__["default"]; +const Button = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__["default"])('button', null, { displayName: "Button", - styles: Button_module_css_astroturf_inline_loader_style_integration_Button_js_Button__WEBPACK_IMPORTED_MODULE_2__.default + styles: Button_module_css_astroturf_inline_loader_style_1_integration_Button_js_Button__WEBPACK_IMPORTED_MODULE_2__["default"] }); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Button); @@ -44,11 +44,11 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var widget__WEBPACK_IMPORTED_MODULE_3__ = __webpack_require__(/*! widget */ "./integration/shared/widget/index.js"); /* harmony import */ var withConfig__WEBPACK_IMPORTED_MODULE_4__ = __webpack_require__(/*! withConfig */ "./integration/shared/withConfig/index.js"); /* harmony import */ var _Button__WEBPACK_IMPORTED_MODULE_5__ = __webpack_require__(/*! ./Button */ "./integration/Button.js"); -/* harmony import */ var main_styles_module_css_astroturf_inline_loader_style_integration_main_js_styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! main-styles.module.css!=!astroturf/inline-loader?style!./integration/main.js?styles */ "main-styles.module.css!=!../src/inline-loader.ts?style!./integration/main.js?styles"); -/* harmony import */ var main_FancyBox_module_css_astroturf_inline_loader_style_integration_main_js_FancyBox__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! main-FancyBox.module.css!=!astroturf/inline-loader?style!./integration/main.js?FancyBox */ "main-FancyBox.module.css!=!../src/inline-loader.ts?style!./integration/main.js?FancyBox"); -/* harmony import */ var main_FancierBox_module_css_astroturf_inline_loader_style_integration_main_js_FancierBox__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! main-FancierBox.module.css!=!astroturf/inline-loader?style!./integration/main.js?FancierBox */ "main-FancierBox.module.css!=!../src/inline-loader.ts?style!./integration/main.js?FancierBox"); -/* harmony import */ var main_CssProp1_div_module_css_astroturf_inline_loader_style_integration_main_js_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! main-CssProp1_div.module.css!=!astroturf/inline-loader?style!./integration/main.js?CssProp1_div */ "main-CssProp1_div.module.css!=!../src/inline-loader.ts?style!./integration/main.js?CssProp1_div"); -/* harmony import */ var main_CssProp2_span_module_css_astroturf_inline_loader_style_integration_main_js_CssProp2_span__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! main-CssProp2_span.module.css!=!astroturf/inline-loader?style!./integration/main.js?CssProp2_span */ "main-CssProp2_span.module.css!=!../src/inline-loader.ts?style!./integration/main.js?CssProp2_span"); +/* harmony import */ var main_styles_module_css_astroturf_inline_loader_style_1_integration_main_js_styles__WEBPACK_IMPORTED_MODULE_6__ = __webpack_require__(/*! main-styles.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?styles */ "main-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styles"); +/* harmony import */ var main_FancyBox_module_css_astroturf_inline_loader_style_1_integration_main_js_FancyBox__WEBPACK_IMPORTED_MODULE_7__ = __webpack_require__(/*! main-FancyBox.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?FancyBox */ "main-FancyBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancyBox"); +/* harmony import */ var main_FancierBox_module_css_astroturf_inline_loader_style_1_integration_main_js_FancierBox__WEBPACK_IMPORTED_MODULE_8__ = __webpack_require__(/*! main-FancierBox.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?FancierBox */ "main-FancierBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancierBox"); +/* harmony import */ var main_CssProp1_div_module_css_astroturf_inline_loader_style_1_integration_main_js_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__ = __webpack_require__(/*! main-CssProp1_div.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?CssProp1_div */ "main-CssProp1_div.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp1_div"); +/* harmony import */ var main_CssProp2_span_module_css_astroturf_inline_loader_style_1_integration_main_js_CssProp2_span__WEBPACK_IMPORTED_MODULE_10__ = __webpack_require__(/*! main-CssProp2_span.module.css!=!astroturf/inline-loader?style=1!./integration/main.js?CssProp2_span */ "main-CssProp2_span.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp2_span"); /** @jsxRuntime classic*/ /** @jsx _j */ @@ -67,20 +67,20 @@ __webpack_require__.r(__webpack_exports__); const width = 75; -const styles = main_styles_module_css_astroturf_inline_loader_style_integration_main_js_styles__WEBPACK_IMPORTED_MODULE_6__.default; -const FancyBox = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_1__.default)('div', null, { +const styles = main_styles_module_css_astroturf_inline_loader_style_1_integration_main_js_styles__WEBPACK_IMPORTED_MODULE_6__["default"]; +const FancyBox = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_1__["default"])('div', null, { displayName: "FancyBox", - styles: main_FancyBox_module_css_astroturf_inline_loader_style_integration_main_js_FancyBox__WEBPACK_IMPORTED_MODULE_7__.default + styles: main_FancyBox_module_css_astroturf_inline_loader_style_1_integration_main_js_FancyBox__WEBPACK_IMPORTED_MODULE_7__["default"] }); -const FancierBox = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_1__.default)('div', null, { +const FancierBox = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_1__["default"])('div', null, { displayName: "FancierBox", - styles: main_FancierBox_module_css_astroturf_inline_loader_style_integration_main_js_FancierBox__WEBPACK_IMPORTED_MODULE_8__.default + styles: main_FancierBox_module_css_astroturf_inline_loader_style_1_integration_main_js_FancierBox__WEBPACK_IMPORTED_MODULE_8__["default"] }); function MyComponent() { - return (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__.default)(astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__.default.F, null, (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__.default)("div", { - css: [main_CssProp1_div_module_css_astroturf_inline_loader_style_integration_main_js_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__.default, null, [foo && main_CssProp1_div_module_css_astroturf_inline_loader_style_integration_main_js_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__.default.cssProp1DivVariant0]] - }, (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__.default)("div", null, "hey "), (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__.default)("span", { - css: [main_CssProp2_span_module_css_astroturf_inline_loader_style_integration_main_js_CssProp2_span__WEBPACK_IMPORTED_MODULE_10__.default] + return (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__["default"])(astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__["default"].F, null, (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__["default"])("div", { + css: [main_CssProp1_div_module_css_astroturf_inline_loader_style_1_integration_main_js_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__["default"], null, [foo && main_CssProp1_div_module_css_astroturf_inline_loader_style_1_integration_main_js_CssProp1_div__WEBPACK_IMPORTED_MODULE_9__["default"].cssProp1DivVariant0]] + }, (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__["default"])("div", null, "hey "), (0,astroturf_jsx__WEBPACK_IMPORTED_MODULE_0__["default"])("span", { + css: [main_CssProp2_span_module_css_astroturf_inline_loader_style_1_integration_main_js_CssProp2_span__WEBPACK_IMPORTED_MODULE_10__["default"]] }, "yo"))); } /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (FancierBox); @@ -98,12 +98,12 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var astroturf_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! astroturf/react */ "../src/runtime/react.js"); -/* harmony import */ var Widget_module_css_astroturf_inline_loader_style_integration_shared_widget_index_js_Widget__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! Widget.module.css!=!astroturf/inline-loader?style!./integration/shared/widget/index.js?Widget */ "Widget.module.css!=!../src/inline-loader.ts?style!./integration/shared/widget/index.js?Widget"); +/* harmony import */ var Widget_module_css_astroturf_inline_loader_style_1_integration_shared_widget_index_js_Widget__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! Widget.module.css!=!astroturf/inline-loader?style=1!./integration/shared/widget/index.js?Widget */ "Widget.module.css!=!../src/inline-loader.ts?style=1!./integration/shared/widget/index.js?Widget"); -const Widget = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__.default)('div', null, { +const Widget = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__["default"])('div', null, { displayName: "Widget", - styles: Widget_module_css_astroturf_inline_loader_style_integration_shared_widget_index_js_Widget__WEBPACK_IMPORTED_MODULE_1__.default + styles: Widget_module_css_astroturf_inline_loader_style_1_integration_shared_widget_index_js_Widget__WEBPACK_IMPORTED_MODULE_1__["default"] }); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Widget); @@ -120,21 +120,21 @@ __webpack_require__.r(__webpack_exports__); /* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__) /* harmony export */ }); /* harmony import */ var astroturf_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! astroturf/react */ "../src/runtime/react.js"); -/* harmony import */ var index_Doodad_module_scss_astroturf_inline_loader_style_integration_shared_withConfig_index_js_Doodad__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! index-Doodad.module.scss!=!astroturf/inline-loader?style!./integration/shared/withConfig/index.js?Doodad */ "index-Doodad.module.scss!=!../src/inline-loader.ts?style!./integration/shared/withConfig/index.js?Doodad"); +/* harmony import */ var index_Doodad_module_scss_astroturf_inline_loader_style_1_integration_shared_withConfig_index_js_Doodad__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! index-Doodad.module.scss!=!astroturf/inline-loader?style=1!./integration/shared/withConfig/index.js?Doodad */ "index-Doodad.module.scss!=!../src/inline-loader.ts?style=1!./integration/shared/withConfig/index.js?Doodad"); -const Doodad = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__.default)('div', null, { +const Doodad = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__["default"])('div', null, { displayName: "Doodad", - styles: index_Doodad_module_scss_astroturf_inline_loader_style_integration_shared_withConfig_index_js_Doodad__WEBPACK_IMPORTED_MODULE_1__.default + styles: index_Doodad_module_scss_astroturf_inline_loader_style_1_integration_shared_withConfig_index_js_Doodad__WEBPACK_IMPORTED_MODULE_1__["default"] }); /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Doodad); /***/ }), -/***/ "Button.module.css!=!../src/inline-loader.ts?style!./integration/Button.js?Button": -/*!****************************************************************************************!*\ - !*** Button.module.css!=!../src/inline-loader.ts?style!./integration/Button.js?Button ***! - \****************************************************************************************/ +/***/ "Button.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?Button": +/*!******************************************************************************************!*\ + !*** Button.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?Button ***! + \******************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -146,10 +146,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "Button-styles.module.css!=!../src/inline-loader.ts?style!./integration/Button.js?styles": -/*!***********************************************************************************************!*\ - !*** Button-styles.module.css!=!../src/inline-loader.ts?style!./integration/Button.js?styles ***! - \***********************************************************************************************/ +/***/ "Button-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styles": +/*!*************************************************************************************************!*\ + !*** Button-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/Button.js?styles ***! + \*************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -161,10 +161,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "main-CssProp1_div.module.css!=!../src/inline-loader.ts?style!./integration/main.js?CssProp1_div": -/*!*******************************************************************************************************!*\ - !*** main-CssProp1_div.module.css!=!../src/inline-loader.ts?style!./integration/main.js?CssProp1_div ***! - \*******************************************************************************************************/ +/***/ "main-CssProp1_div.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp1_div": +/*!*********************************************************************************************************!*\ + !*** main-CssProp1_div.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp1_div ***! + \*********************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -176,10 +176,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "main-CssProp2_span.module.css!=!../src/inline-loader.ts?style!./integration/main.js?CssProp2_span": -/*!*********************************************************************************************************!*\ - !*** main-CssProp2_span.module.css!=!../src/inline-loader.ts?style!./integration/main.js?CssProp2_span ***! - \*********************************************************************************************************/ +/***/ "main-CssProp2_span.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp2_span": +/*!***********************************************************************************************************!*\ + !*** main-CssProp2_span.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?CssProp2_span ***! + \***********************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -191,10 +191,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "main-FancierBox.module.css!=!../src/inline-loader.ts?style!./integration/main.js?FancierBox": -/*!***************************************************************************************************!*\ - !*** main-FancierBox.module.css!=!../src/inline-loader.ts?style!./integration/main.js?FancierBox ***! - \***************************************************************************************************/ +/***/ "main-FancierBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancierBox": +/*!*****************************************************************************************************!*\ + !*** main-FancierBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancierBox ***! + \*****************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -206,10 +206,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "main-FancyBox.module.css!=!../src/inline-loader.ts?style!./integration/main.js?FancyBox": -/*!***********************************************************************************************!*\ - !*** main-FancyBox.module.css!=!../src/inline-loader.ts?style!./integration/main.js?FancyBox ***! - \***********************************************************************************************/ +/***/ "main-FancyBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancyBox": +/*!*************************************************************************************************!*\ + !*** main-FancyBox.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?FancyBox ***! + \*************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -221,10 +221,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "main-styles.module.css!=!../src/inline-loader.ts?style!./integration/main.js?styles": -/*!*******************************************************************************************!*\ - !*** main-styles.module.css!=!../src/inline-loader.ts?style!./integration/main.js?styles ***! - \*******************************************************************************************/ +/***/ "main-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styles": +/*!*********************************************************************************************!*\ + !*** main-styles.module.css!=!../src/inline-loader.ts?style=1!./integration/main.js?styles ***! + \*********************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -236,10 +236,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "Widget.module.css!=!../src/inline-loader.ts?style!./integration/shared/widget/index.js?Widget": -/*!*****************************************************************************************************!*\ - !*** Widget.module.css!=!../src/inline-loader.ts?style!./integration/shared/widget/index.js?Widget ***! - \*****************************************************************************************************/ +/***/ "Widget.module.css!=!../src/inline-loader.ts?style=1!./integration/shared/widget/index.js?Widget": +/*!*******************************************************************************************************!*\ + !*** Widget.module.css!=!../src/inline-loader.ts?style=1!./integration/shared/widget/index.js?Widget ***! + \*******************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -251,10 +251,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "index-Doodad.module.scss!=!../src/inline-loader.ts?style!./integration/shared/withConfig/index.js?Doodad": -/*!****************************************************************************************************************!*\ - !*** index-Doodad.module.scss!=!../src/inline-loader.ts?style!./integration/shared/withConfig/index.js?Doodad ***! - \****************************************************************************************************************/ +/***/ "index-Doodad.module.scss!=!../src/inline-loader.ts?style=1!./integration/shared/withConfig/index.js?Doodad": +/*!******************************************************************************************************************!*\ + !*** index-Doodad.module.scss!=!../src/inline-loader.ts?style=1!./integration/shared/withConfig/index.js?Doodad ***! + \******************************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); diff --git a/test/__file_snapshots__/issue-365-js.js b/test/__file_snapshots__/issue-365-js.js index 95bfced9..9b409cdd 100644 --- a/test/__file_snapshots__/issue-365-js.js +++ b/test/__file_snapshots__/issue-365-js.js @@ -9,26 +9,26 @@ __webpack_require__.r(__webpack_exports__); /* harmony import */ var astroturf_react__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! astroturf/react */ "../src/runtime/react.js"); -/* harmony import */ var issue_365_mixins_module_css_astroturf_inline_loader_style_Users_jquense_src_astroturf_test_integration_issue_365_js_mixins__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! issue-365-mixins.module.css!=!astroturf/inline-loader?style!./integration/issue-365.js?mixins */ "issue-365-mixins.module.css!=!../src/inline-loader.ts?style!./integration/issue-365.js?mixins"); -/* harmony import */ var issue_365_BlockStyled_module_css_astroturf_inline_loader_style_Users_jquense_src_astroturf_test_integration_issue_365_js_BlockStyled__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! issue-365-BlockStyled.module.css!=!astroturf/inline-loader?style!./integration/issue-365.js?BlockStyled */ "issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style!./integration/issue-365.js?BlockStyled"); +/* harmony import */ var issue_365_mixins_module_css_astroturf_inline_loader_style_1_Users_jquense_src_astroturf_test_integration_issue_365_js_mixins__WEBPACK_IMPORTED_MODULE_1__ = __webpack_require__(/*! issue-365-mixins.module.css!=!astroturf/inline-loader?style=1!./integration/issue-365.js?mixins */ "issue-365-mixins.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?mixins"); +/* harmony import */ var issue_365_BlockStyled_module_css_astroturf_inline_loader_style_1_Users_jquense_src_astroturf_test_integration_issue_365_js_BlockStyled__WEBPACK_IMPORTED_MODULE_2__ = __webpack_require__(/*! issue-365-BlockStyled.module.css!=!astroturf/inline-loader?style=1!./integration/issue-365.js?BlockStyled */ "issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?BlockStyled"); -const mixins = issue_365_mixins_module_css_astroturf_inline_loader_style_Users_jquense_src_astroturf_test_integration_issue_365_js_mixins__WEBPACK_IMPORTED_MODULE_1__.default.cls2; +const mixins = issue_365_mixins_module_css_astroturf_inline_loader_style_1_Users_jquense_src_astroturf_test_integration_issue_365_js_mixins__WEBPACK_IMPORTED_MODULE_1__["default"].cls2; const Block = /*#__PURE__*/React.createElement(BlockStyled, { active: false }); -const BlockStyled = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__.default)("div", null, { +const BlockStyled = /*#__PURE__*/(0,astroturf_react__WEBPACK_IMPORTED_MODULE_0__["default"])("div", null, { displayName: "BlockStyled", - styles: issue_365_BlockStyled_module_css_astroturf_inline_loader_style_Users_jquense_src_astroturf_test_integration_issue_365_js_BlockStyled__WEBPACK_IMPORTED_MODULE_2__.default + styles: issue_365_BlockStyled_module_css_astroturf_inline_loader_style_1_Users_jquense_src_astroturf_test_integration_issue_365_js_BlockStyled__WEBPACK_IMPORTED_MODULE_2__["default"] }); /***/ }), -/***/ "issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style!./integration/issue-365.js?BlockStyled": -/*!***************************************************************************************************************!*\ - !*** issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style!./integration/issue-365.js?BlockStyled ***! - \***************************************************************************************************************/ +/***/ "issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?BlockStyled": +/*!*****************************************************************************************************************!*\ + !*** issue-365-BlockStyled.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?BlockStyled ***! + \*****************************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); @@ -40,10 +40,10 @@ __webpack_require__.r(__webpack_exports__); /***/ }), -/***/ "issue-365-mixins.module.css!=!../src/inline-loader.ts?style!./integration/issue-365.js?mixins": -/*!*****************************************************************************************************!*\ - !*** issue-365-mixins.module.css!=!../src/inline-loader.ts?style!./integration/issue-365.js?mixins ***! - \*****************************************************************************************************/ +/***/ "issue-365-mixins.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?mixins": +/*!*******************************************************************************************************!*\ + !*** issue-365-mixins.module.css!=!../src/inline-loader.ts?style=1!./integration/issue-365.js?mixins ***! + \*******************************************************************************************************/ /***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => { __webpack_require__.r(__webpack_exports__); diff --git a/test/__file_snapshots__/loader__css-prop.js b/test/__file_snapshots__/loader__css-prop.js index f5695e82..99da6903 100644 --- a/test/__file_snapshots__/loader__css-prop.js +++ b/test/__file_snapshots__/loader__css-prop.js @@ -3,11 +3,11 @@ /** @jsxFrag _j.F */ import _j from "astroturf/jsx"; import React from "react"; -import _CssProp1_button from "css-prop-CssProp1_button.module.css!=!astroturf/inline-loader?style!/fixtures/css-prop.js?CssProp1_button"; -import _CssProp2_button from "css-prop-CssProp2_button.module.css!=!astroturf/inline-loader?style!/fixtures/css-prop.js?CssProp2_button"; -import _CssProp3_button from "css-prop-CssProp3_button.module.css!=!astroturf/inline-loader?style!/fixtures/css-prop.js?CssProp3_button"; -import _CssProp4_button from "css-prop-CssProp4_button.module.css!=!astroturf/inline-loader?style!/fixtures/css-prop.js?CssProp4_button"; -import _CssProp5_span from "css-prop-CssProp5_span.module.css!=!astroturf/inline-loader?style!/fixtures/css-prop.js?CssProp5_span"; +import _CssProp1_button from "css-prop-CssProp1_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?CssProp1_button"; +import _CssProp2_button from "css-prop-CssProp2_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?CssProp2_button"; +import _CssProp3_button from "css-prop-CssProp3_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?CssProp3_button"; +import _CssProp4_button from "css-prop-CssProp4_button.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?CssProp4_button"; +import _CssProp5_span from "css-prop-CssProp5_span.module.css!=!astroturf/inline-loader?style=1!/fixtures/css-prop.js?CssProp5_span"; function Button() { return