├── .changeset ├── README.md ├── config.json └── three-yaks-hug.md ├── .eslintignore ├── .eslintrc.js ├── .gitattributes ├── .github ├── ISSUE_TEMPLATE.md ├── ISSUE_TEMPLATE │ ├── bug_report.yml │ ├── config.yml │ └── feature_request.yml ├── PULL_REQUEST_TEMPLATE.md ├── dependabot.yml └── workflows │ ├── changesets.yml │ └── ci.yml ├── .gitignore ├── .lintstagedrc.js ├── .simple-git-hooks.js ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── jest.config.js ├── jsconfig.json ├── lerna.json ├── package-lock.json ├── package.json ├── packages ├── aliases │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── aliases.js │ ├── package.json │ └── test │ │ ├── __snapshots__ │ │ └── aliases.test.js.snap │ │ ├── aliases.test.js │ │ └── specimens │ │ ├── one │ │ ├── one.css │ │ └── sub │ │ │ └── sub.css │ │ └── two │ │ └── two.css ├── browserify │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── browserify.js │ ├── package.json │ └── test │ │ ├── __snapshots__ │ │ ├── browserify.test.js.snap │ │ ├── factor-bundle.test.js.snap │ │ ├── issue-313.test.js.snap │ │ ├── issue-58.test.js.snap │ │ └── watchify.test.js.snap │ │ ├── browserify.test.js │ │ ├── factor-bundle.test.js │ │ ├── issue-105.test.js │ │ ├── issue-313.test.js │ │ ├── issue-58.test.js │ │ ├── lib │ │ └── bundle.js │ │ ├── output │ │ └── .gitignore │ │ ├── specimens │ │ ├── blue.css │ │ ├── factor-bundle │ │ │ ├── basic │ │ │ │ └── common.js │ │ │ ├── deps │ │ │ │ ├── a.js │ │ │ │ ├── b.js │ │ │ │ └── common.js │ │ │ ├── empty │ │ │ │ ├── a.js │ │ │ │ ├── b.js │ │ │ │ └── common.js │ │ │ ├── noempty │ │ │ │ ├── a.js │ │ │ │ ├── b.js │ │ │ │ └── common.js │ │ │ └── relative │ │ │ │ ├── a.js │ │ │ │ ├── b.js │ │ │ │ └── common.js │ │ ├── folder │ │ │ ├── folder.css │ │ │ ├── folder2.css │ │ │ └── subfolder │ │ │ │ └── subfolder.css │ │ ├── invalid.css │ │ ├── issues │ │ │ ├── 58 │ │ │ │ └── issue.css │ │ │ └── 313 │ │ │ │ ├── 1.css │ │ │ │ └── 2.css │ │ ├── keyframes.css │ │ ├── local.css │ │ ├── multiple.css │ │ ├── relative.css │ │ ├── simple.css │ │ ├── start.css │ │ └── watchify │ │ │ └── relative.css │ │ └── watchify.test.js ├── cli │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── cli.js │ ├── package.json │ └── test │ │ ├── __snapshots__ │ │ └── cli.test.js.snap │ │ ├── cli.test.js │ │ └── specimens │ │ ├── invalid.css │ │ ├── no-rewrite.css │ │ └── simple.css ├── css-to-js │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── css-to-js.js │ ├── package.json │ └── test │ │ ├── __snapshots__ │ │ └── api.test.js.snap │ │ ├── api.test.js │ │ └── specimens │ │ ├── composes │ │ ├── custom-between-rules.css │ │ └── custom-first-rule.css │ │ ├── dependencies.css │ │ └── simple.css ├── glob │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── glob.js │ ├── package.json │ └── test │ │ ├── __snapshots__ │ │ └── glob.test.js.snap │ │ ├── glob.test.js │ │ ├── mocha.opts │ │ └── specimens │ │ ├── 1.css │ │ ├── dir │ │ ├── 2.css │ │ └── 3.css │ │ └── exclude │ │ └── 4.css ├── namer │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── namer.js │ ├── package.json │ └── test │ │ ├── __snapshots__ │ │ └── namer.test.js.snap │ │ └── namer.test.js ├── paths │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── paths.js │ └── test │ │ ├── __snapshots__ │ │ └── paths.test.js.snap │ │ ├── paths.test.js │ │ └── specimens │ │ ├── one │ │ ├── one.css │ │ └── sub │ │ │ └── sub.css │ │ └── two │ │ └── two.css ├── postcss │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── postcss.js │ └── test │ │ ├── __snapshots__ │ │ └── postcss.test.js.snap │ │ ├── mocha.opts │ │ ├── output │ │ └── .gitignore │ │ ├── postcss.test.js │ │ ├── results │ │ └── simple.json │ │ └── specimens │ │ ├── folder │ │ ├── folder.css │ │ ├── folder2.css │ │ └── subfolder │ │ │ └── subfolder.css │ │ ├── local.css │ │ ├── simple.css │ │ └── start.css ├── processor │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── lib │ │ ├── graph-tiers.js │ │ ├── identifiers.js │ │ ├── keys.js │ │ ├── normalize.js │ │ ├── output.js │ │ ├── relative.js │ │ ├── resolve.js │ │ ├── stamp.js │ │ └── value-replacer.js │ ├── package.json │ ├── parsers │ │ ├── at-composes.js │ │ ├── composes.js │ │ ├── external.js │ │ └── values.js │ ├── plugins │ │ ├── at-composes.js │ │ ├── before │ │ │ ├── graph-nodes.js │ │ │ └── values-local.js │ │ ├── composition.js │ │ ├── externals.js │ │ ├── scoping.js │ │ ├── values-import.js │ │ └── values-replace.js │ ├── processor.js │ └── test │ │ ├── __snapshots__ │ │ ├── api.test.js.snap │ │ ├── at-composes.test.js.snap │ │ ├── composition.test.js.snap │ │ ├── exports.test.js.snap │ │ ├── externals.test.js.snap │ │ ├── getters.test.js.snap │ │ ├── options.test.js.snap │ │ ├── scoping.test.js.snap │ │ ├── unicode.test.js.snap │ │ └── values.test.js.snap │ │ ├── api.test.js │ │ ├── at-composes.test.js │ │ ├── composition.test.js │ │ ├── exports.test.js │ │ ├── externals.test.js │ │ ├── getters.test.js │ │ ├── issues │ │ ├── __snapshots__ │ │ │ ├── issue-261.test.js.snap │ │ │ ├── issue-56.test.js.snap │ │ │ └── issue-98.test.js.snap │ │ ├── issue-261.test.js │ │ ├── issue-56.test.js │ │ ├── issue-66.test.js │ │ ├── issue-98.test.js │ │ └── specimens │ │ │ └── 261 │ │ │ ├── 1.css │ │ │ └── 2.css │ │ ├── options.test.js │ │ ├── output │ │ └── .gitignore │ │ ├── scoping.test.js │ │ ├── specimens │ │ ├── at-composes.css │ │ ├── blue.css │ │ ├── composes │ │ │ ├── external-compose-via-local-compose.css │ │ │ ├── external-compose-via-local-compose2.css │ │ │ ├── external-compose-via-local-compose3.css │ │ │ ├── external-compose-via-local-compose4.css │ │ │ ├── external-composes-multiple-declarations.css │ │ │ ├── external-composes-single-declaration.css │ │ │ ├── external-first-and-local-second-composes.css │ │ │ └── external-second-and-local-first-composes.css │ │ ├── deep-namespace │ │ │ ├── a.css │ │ │ ├── b.css │ │ │ └── c.css │ │ ├── deep.css │ │ ├── deps │ │ │ └── classes.css │ │ ├── externals-invalid.css │ │ ├── externals.css │ │ ├── folder │ │ │ ├── folder.css │ │ │ └── subfolder │ │ │ │ └── subfolder.css │ │ ├── img.png │ │ ├── invalid-import.css │ │ ├── invalid.css │ │ ├── local.css │ │ ├── namespace-expansion │ │ │ ├── a.css │ │ │ ├── b.css │ │ │ └── c.css │ │ ├── overlapping │ │ │ ├── entry1.css │ │ │ ├── entry2.css │ │ │ ├── tier1.css │ │ │ ├── tier2.css │ │ │ └── tier3.css │ │ ├── relative.css │ │ ├── simple.css │ │ ├── start.css │ │ ├── unicode.css │ │ ├── value-alias.css │ │ ├── value-composition.css │ │ ├── value-export.css │ │ ├── value-import.css │ │ ├── value-namespace.css │ │ ├── value-references.css │ │ ├── values.css │ │ └── warnings.css │ │ ├── unicode.test.js │ │ └── values.test.js ├── rollup-rewriter │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── formats │ │ ├── amd.js │ │ ├── es.js │ │ └── system.js │ ├── package.json │ ├── rewriter.js │ └── test │ │ ├── __snapshots__ │ │ └── rewriter.test.js.snap │ │ ├── rewriter.test.js │ │ └── specimens │ │ ├── dynamic-imports │ │ ├── a.css │ │ ├── a.js │ │ ├── b.css │ │ ├── b.js │ │ ├── c.css │ │ ├── c.js │ │ ├── d.css │ │ └── d.js │ │ ├── dynamic-shared-imports │ │ ├── dynamic1.css │ │ ├── dynamic1.js │ │ ├── entry1.css │ │ ├── entry1.js │ │ ├── entry2.css │ │ ├── entry2.js │ │ ├── static1.css │ │ └── static1.js │ │ ├── external-import │ │ ├── a.css │ │ ├── a.js │ │ ├── c.css │ │ └── c.js │ │ └── no-asset-imports │ │ ├── a.css │ │ ├── a.js │ │ ├── b.css │ │ ├── b.js │ │ ├── c.css │ │ ├── c.js │ │ └── d.js ├── rollup │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ ├── rollup.js │ └── test │ │ ├── __snapshots__ │ │ ├── rollup.test.js.snap │ │ ├── splitting.test.js.snap │ │ └── watch.test.js.snap │ │ ├── output │ │ └── .gitignore │ │ ├── rollup.test.js │ │ ├── specimens │ │ ├── all-value-types │ │ │ ├── all-value-types.css │ │ │ ├── all-value-types.js │ │ │ ├── values1.css │ │ │ └── values2.css │ │ ├── casing │ │ │ ├── bar.css │ │ │ ├── foo.css │ │ │ └── main.js │ │ ├── circular-dependencies │ │ │ ├── a.css │ │ │ ├── a.js │ │ │ ├── b.css │ │ │ └── b.js │ │ ├── class-value-overlap │ │ │ ├── class-value-overlap.css │ │ │ └── class-value-overlap.js │ │ ├── common-splitting │ │ │ ├── a.css │ │ │ ├── a.js │ │ │ ├── b.css │ │ │ ├── b.js │ │ │ ├── c.css │ │ │ ├── c.js │ │ │ ├── shared.css │ │ │ ├── shared2.css │ │ │ └── shared3.css │ │ ├── composes-from-global │ │ │ ├── entry.js │ │ │ └── one.css │ │ ├── composes-from-invalid-js │ │ │ ├── entry.js │ │ │ ├── one.css │ │ │ └── two.css │ │ ├── composition-layers │ │ │ ├── composition-layers.css │ │ │ └── composition-layers.js │ │ ├── css-chunks │ │ │ ├── a.css │ │ │ ├── a.js │ │ │ ├── b.css │ │ │ ├── b.js │ │ │ ├── c.css │ │ │ ├── c.js │ │ │ └── shared.css │ │ ├── css-dependencies │ │ │ ├── a.css │ │ │ ├── a.js │ │ │ ├── b.css │ │ │ ├── b.js │ │ │ └── c.css │ │ ├── dependencies.css │ │ ├── dependencies.js │ │ ├── dynamic-imports │ │ │ ├── a.css │ │ │ ├── a.js │ │ │ ├── b.css │ │ │ ├── b.js │ │ │ ├── c.css │ │ │ ├── c.js │ │ │ ├── d.css │ │ │ ├── e.css │ │ │ └── f.css │ │ ├── empty.css │ │ ├── empty.js │ │ ├── external-value-aliasing │ │ │ ├── external-value-aliasing.css │ │ │ ├── external-value-aliasing.js │ │ │ ├── intermediate.css │ │ │ └── source.css │ │ ├── external.js │ │ ├── file-extension │ │ │ ├── entry.js │ │ │ └── style.cssx │ │ ├── internal-external-composition │ │ │ ├── internal-external-composition.css │ │ │ ├── internal-external-composition.js │ │ │ └── other.css │ │ ├── invalid-name.css │ │ ├── invalid-name.js │ │ ├── local-composition.css │ │ ├── local-composition.js │ │ ├── manual-chunks │ │ │ ├── a.css │ │ │ ├── a.js │ │ │ ├── b.css │ │ │ ├── b.js │ │ │ ├── c.css │ │ │ ├── c.js │ │ │ └── d.css │ │ ├── metadata │ │ │ ├── a.css │ │ │ ├── a.js │ │ │ ├── b.css │ │ │ ├── b.js │ │ │ ├── c.js │ │ │ ├── d.css │ │ │ └── d.js │ │ ├── multi-selector │ │ │ ├── multi-selector.css │ │ │ ├── multi-selector.js │ │ │ └── other.css │ │ ├── multiple-chunks │ │ │ ├── a.css │ │ │ ├── a.js │ │ │ ├── b.css │ │ │ ├── b.js │ │ │ └── subfolder │ │ │ │ └── a.css │ │ ├── named.css │ │ ├── named.js │ │ ├── namespaced │ │ │ ├── namespaced.css │ │ │ ├── namespaced.js │ │ │ └── values.css │ │ ├── no-css.js │ │ ├── relative-paths.css │ │ ├── relative-paths.js │ │ ├── repeated-references │ │ │ ├── a.css │ │ │ ├── a.js │ │ │ ├── b.css │ │ │ ├── b.js │ │ │ ├── c.css │ │ │ └── d.css │ │ ├── simple.css │ │ ├── simple.js │ │ ├── stripped-dynamic-imports │ │ │ ├── a.js │ │ │ └── b.js │ │ ├── style-export.css │ │ ├── style-export.js │ │ ├── topological-order │ │ │ ├── topological-order.css │ │ │ └── topological-order.js │ │ ├── tree-shaking.css │ │ ├── tree-shaking.js │ │ ├── value-camel-overlap.css │ │ ├── value-camel-overlap.js │ │ └── watch.js │ │ ├── splitting.test.js │ │ └── watch.test.js ├── stylelint-config │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── package.json │ └── stylelint.js ├── svelte │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── link.js │ ├── package.json │ ├── replacer.js │ ├── script.js │ ├── style.js │ ├── svelte.js │ └── test │ │ ├── __snapshots__ │ │ ├── svelte-rollup.test.js.snap │ │ └── svelte.test.js.snap │ │ ├── output │ │ └── .gitignore │ │ ├── specimens │ │ ├── both.svelte │ │ ├── dependencies.css │ │ ├── empty.css │ │ ├── error-link-non-css.svelte │ │ ├── error-link.svelte │ │ ├── error-script.svelte │ │ ├── error-style.svelte │ │ ├── error.css │ │ ├── external.css │ │ ├── inline-chunking │ │ │ ├── a-dep.css │ │ │ ├── a.svelte │ │ │ ├── b-dep.css │ │ │ ├── b.svelte │ │ │ └── shared.css │ │ ├── invalid-link-empty.svelte │ │ ├── invalid-link-script.svelte │ │ ├── invalid-link-template.svelte │ │ ├── invalid-script-empty.svelte │ │ ├── invalid-script-script.svelte │ │ ├── invalid-script-template.svelte │ │ ├── invalid-style-empty.svelte │ │ ├── invalid-style-script.svelte │ │ ├── invalid-style-template.svelte │ │ ├── invalid.css │ │ ├── link-component.svelte │ │ ├── link-resolving.svelte │ │ ├── link-script.svelte │ │ ├── link-single.svelte │ │ ├── link-unquoted.svelte │ │ ├── link-values.svelte │ │ ├── link.svelte │ │ ├── multiple-link.svelte │ │ ├── multiple-url.svelte │ │ ├── overlapping │ │ │ ├── entry1.svelte │ │ │ ├── entry2.svelte │ │ │ ├── tier1.css │ │ │ ├── tier2.css │ │ │ └── tier3.css │ │ ├── script-multiple.svelte │ │ ├── script-unmatched.svelte │ │ ├── script.svelte │ │ ├── simple.css │ │ ├── simple2.css │ │ ├── style-no-attribute.svelte │ │ ├── style.svelte │ │ ├── unquoted.svelte │ │ └── url.svelte │ │ ├── svelte-rollup.test.js │ │ └── svelte.test.js ├── test-utils │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── case-sensitive-fs.js │ ├── exists.js │ ├── expect │ │ ├── toMatchDiffSnapshot.js │ │ ├── toMatchLogspySnapshot.js │ │ ├── toMatchRollupAssetSnapshot.js │ │ ├── toMatchRollupCodeSnapshot.js │ │ └── toMatchRollupSnapshot.js │ ├── logs.js │ ├── namer.js │ ├── package.json │ ├── prefix.js │ ├── read-dir.js │ ├── read.js │ ├── relative.js │ ├── rollup-watching.js │ ├── warn.js │ └── write.js ├── vite │ ├── .npmignore │ ├── CHANGELOG.md │ ├── README.md │ ├── package.json │ ├── tests │ │ ├── specimens │ │ │ ├── dynamic │ │ │ │ ├── a.mcss │ │ │ │ ├── b.mcss │ │ │ │ ├── index.html │ │ │ │ └── script.js │ │ │ ├── index.html │ │ │ ├── shared │ │ │ │ ├── dynamic-c.mcss │ │ │ │ └── static-c.mcss │ │ │ └── static │ │ │ │ ├── a.mcss │ │ │ │ ├── b.mcss │ │ │ │ ├── index.html │ │ │ │ └── script.js │ │ └── vite.spec.mjs │ └── vite.js ├── webpack │ ├── .npmignore │ ├── CHANGELOG.md │ ├── LICENSE │ ├── README.md │ ├── loader.js │ ├── package.json │ ├── plugin.js │ └── test │ │ ├── __snapshots__ │ │ └── webpack.test.js.snap │ │ ├── output │ │ └── .gitignore │ │ ├── records │ │ ├── change.js.json │ │ ├── es2015-default.js.json │ │ ├── es2015-named.js.json │ │ ├── invalid-name.js.json │ │ ├── invalid.js.json │ │ ├── parse-error.js.json │ │ ├── simple.js.json │ │ ├── start.js.json │ │ └── watch.js.json │ │ ├── specimens │ │ ├── change.js │ │ ├── es2015-default.js │ │ ├── es2015-missing.js │ │ ├── es2015-named.js │ │ ├── es2015.css │ │ ├── folder │ │ │ ├── folder.css │ │ │ ├── folder2.css │ │ │ └── subfolder │ │ │ │ └── subfolder.css │ │ ├── invalid-name.css │ │ ├── invalid-name.js │ │ ├── invalid.css │ │ ├── invalid.js │ │ ├── local.css │ │ ├── parse-error.css │ │ ├── parse-error.js │ │ ├── simple.css │ │ ├── simple.js │ │ ├── start.css │ │ ├── start.js │ │ └── watch.js │ │ └── webpack.test.js └── www │ ├── .gitignore │ ├── .npmrc │ ├── CHANGELOG.md │ ├── README.md │ ├── build │ ├── mcss-setup.js │ ├── md │ │ ├── rehype-code.js │ │ ├── rehype-hierarchical-slugs.js │ │ └── remark-import.js │ ├── vite-build-mcss.js │ └── vite-md.js │ ├── jsconfig.json │ ├── netlify.toml │ ├── package.json │ ├── src │ ├── app.html │ ├── global.d.ts │ ├── lib │ │ ├── codemirror-mcss-mime.js │ │ ├── site.mcss │ │ └── title.svelte │ └── routes │ │ ├── +layout.js │ │ ├── +layout.svelte │ │ ├── +page.js │ │ ├── +page.svelte │ │ ├── _home │ │ ├── example.md │ │ ├── home.mcss │ │ └── intro.md │ │ ├── _layout │ │ ├── header.mcss │ │ ├── header.svelte │ │ └── layout.mcss │ │ ├── api │ │ ├── +page.js │ │ ├── +page.svelte │ │ └── _content │ │ │ ├── api.md │ │ │ ├── extending-after.md │ │ │ ├── extending-before.md │ │ │ ├── extending-done.md │ │ │ ├── extending-processing.md │ │ │ ├── extending.md │ │ │ ├── usage-browserify.md │ │ │ ├── usage-cli.md │ │ │ ├── usage-glob-api.md │ │ │ ├── usage-js.md │ │ │ ├── usage-postcss.md │ │ │ ├── usage-rollup.md │ │ │ ├── usage-svelte.md │ │ │ ├── usage-sveltekit.md │ │ │ ├── usage-vite.md │ │ │ ├── usage-webpack.md │ │ │ ├── usage.md │ │ │ ├── utilities-aliases.md │ │ │ ├── utilities-namer.md │ │ │ ├── utilities-paths.md │ │ │ └── utilities.md │ │ ├── changelog │ │ ├── +page.svelte │ │ └── _changelog.mcss │ │ ├── guide │ │ ├── +page.js │ │ └── +page.svelte │ │ ├── overview │ │ ├── +page.js │ │ ├── +page.svelte │ │ └── _content │ │ │ ├── feature-composing-files.md │ │ │ ├── feature-composing-styles.md │ │ │ ├── feature-overriding-styles.md │ │ │ ├── feature-scoped-selectors.md │ │ │ ├── feature-values-importing.md │ │ │ ├── feature-values-namespaced.md │ │ │ ├── feature-values-wildcard.md │ │ │ ├── feature-values.md │ │ │ ├── features.md │ │ │ ├── intro.md │ │ │ └── test.md │ │ └── repl │ │ ├── +page.js │ │ ├── +page.svelte │ │ ├── _editor │ │ ├── codemirror.js │ │ ├── codemirror.mcss │ │ ├── codemirror.svelte │ │ └── editor.svelte │ │ ├── _lib │ │ ├── hash.js │ │ └── stores.js │ │ ├── _output.mcss │ │ ├── _output.svelte │ │ ├── _repl.mcss │ │ ├── _tabs.mcss │ │ └── _tabs.svelte │ ├── static │ └── pills-lol.jpg │ ├── svelte.config.js │ └── vite.config.js ├── parsers ├── at-composes.pegjs ├── build.js ├── composes.pegjs ├── external.pegjs ├── shared.pegjs └── values.pegjs ├── playwright.config.js └── vite.config.js /.changeset/README.md: -------------------------------------------------------------------------------- 1 | # Changesets 2 | 3 | Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works 4 | with multi-package repos, or single-package repos to help you version and publish your code. You can 5 | find the full documentation for it [in our repository](https://github.com/changesets/changesets) 6 | 7 | We have a quick list of common questions to get you started engaging with this project in 8 | [our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md) 9 | -------------------------------------------------------------------------------- /.changeset/config.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://unpkg.com/@changesets/config@2.0.0/schema.json", 3 | "changelog": [ 4 | "@changesets/changelog-github", 5 | { "repo": "tivac/modular-css" } 6 | ], 7 | "commit": false, 8 | "access": "public", 9 | "baseBranch": "main", 10 | "updateInternalDependencies": "patch", 11 | "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": { 12 | "updateInternalDependents": "always" 13 | } 14 | } -------------------------------------------------------------------------------- /.changeset/three-yaks-hug.md: -------------------------------------------------------------------------------- 1 | --- 2 | "@modular-css/processor": feat 3 | "@modular-css/rollup": patch 4 | --- 5 | 6 | feat: Enable v8 compiler caching on node v22.8.0+ 7 | 8 | ESLint saw a big uplift in startup perf: https://bsky.app/profile/humanwhocodes.com/post/3lnvcvv5p6a25 9 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | dangerfile.js 3 | dist/ 4 | gen/ 5 | node_modules/ 6 | parsers/ 7 | results/ 8 | specimens/ 9 | output/ 10 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Always \n to make tests easier to deal w/ 2 | * text eol=lf 3 | 4 | # Ignore www package for language stats 5 | packages/www/** linguist-documentation 6 | 7 | # Ignore specimens 8 | **/specimens/** linguist-vendored 9 | -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE/config.yml: -------------------------------------------------------------------------------- 1 | blank_issues_enabled: false 2 | contact_links: 3 | - name: 👥 Discord Chat 4 | url: https://discord.gg/jQCZqMuMdt 5 | about: Ask questions and discuss in real time. 6 | -------------------------------------------------------------------------------- /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | updates: 3 | 4 | # Keep npm dependencies up to date 5 | - package-ecosystem: "npm" 6 | directory: "/" 7 | schedule: 8 | interval: "monthly" 9 | assignees: 10 | - "tivac" 11 | 12 | # Keep github actions up to date 13 | - package-ecosystem: "github-actions" 14 | directory: "/" 15 | schedule: 16 | interval: "monthly" 17 | assignees: 18 | - "tivac" 19 | -------------------------------------------------------------------------------- /.github/workflows/changesets.yml: -------------------------------------------------------------------------------- 1 | name: Changesets 2 | 3 | on: 4 | push: 5 | branches: 6 | - main 7 | 8 | concurrency: ${{ github.workflow }}-${{ github.ref }} 9 | 10 | jobs: 11 | release: 12 | name: Release 13 | runs-on: ubuntu-latest 14 | steps: 15 | - name: Checkout Repo 16 | uses: actions/checkout@v4 17 | with: 18 | # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits 19 | fetch-depth: 0 20 | 21 | - name: Setup Node 22 | uses: actions/setup-node@v4 23 | with: 24 | node-version: 22 25 | cache: 'npm' 26 | 27 | - name: npm install 28 | run: npm ci 29 | 30 | - name: Create Release Pull Request or Publish to npm 31 | id: changesets 32 | uses: changesets/action@v1 33 | with: 34 | # This expects you to have a script called release which does a build for your packages and calls changeset publish 35 | publish: npm run release 36 | env: 37 | GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 38 | NPM_TOKEN: ${{ secrets.NPM_TOKEN }} 39 | -------------------------------------------------------------------------------- /.lintstagedrc.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | // Rebuild parsing code any time the sources change 5 | "*.pegjs" : "node parsers/build.js", 6 | }; 7 | -------------------------------------------------------------------------------- /.simple-git-hooks.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | "pre-commit" : "npx lint-staged", 5 | }; 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /jest.config.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | clearMocks : true, 5 | resetMocks : true, 6 | restoreMocks : true, 7 | notify : true, 8 | 9 | coveragePathIgnorePatterns : [ 10 | "/node_modules/", 11 | "/parsers/", 12 | "/packages/test-utils/", 13 | "/packages/vite/", 14 | ], 15 | 16 | testPathIgnorePatterns : [ 17 | "/node_modules/", 18 | "/packages/vite/", 19 | ], 20 | 21 | watchPathIgnorePatterns : [ 22 | "/output/", 23 | "/specimens/", 24 | ], 25 | 26 | setupFilesAfterEnv : [ 27 | "/packages/test-utils/expect/toMatchDiffSnapshot.js", 28 | "/packages/test-utils/expect/toMatchLogspySnapshot.js", 29 | "/packages/test-utils/expect/toMatchRollupAssetSnapshot.js", 30 | "/packages/test-utils/expect/toMatchRollupCodeSnapshot.js", 31 | "/packages/test-utils/expect/toMatchRollupSnapshot.js", 32 | ], 33 | 34 | snapshotSerializers : [ 35 | require.resolve("snapshot-diff/serializer.js"), 36 | ], 37 | }; 38 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "exclude": [ 3 | "node_modules", 4 | "coverage" 5 | ] 6 | } 7 | -------------------------------------------------------------------------------- /lerna.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "28.2.0", 3 | "command": { 4 | "publish": { 5 | "conventionalCommits": true, 6 | "message": "release: %s :tada: :rocket:", 7 | "createRelease": "github" 8 | }, 9 | "version": { 10 | "conventionalCommits": true 11 | } 12 | }, 13 | "packages": [ 14 | "packages/*" 15 | ] 16 | } 17 | -------------------------------------------------------------------------------- /packages/aliases/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/aliases/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/aliases/aliases.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const from = require("resolve-from"); 4 | const escape = require("escape-string-regexp"); 5 | 6 | module.exports = (opts) => { 7 | const options = { 8 | __proto__ : null, 9 | aliases : {}, 10 | ...opts, 11 | }; 12 | 13 | const aliases = Object.keys(options.aliases).map((alias) => ({ 14 | name : alias, 15 | search : new RegExp(`^${escape(alias)}\\b`), 16 | })); 17 | 18 | return (src, file) => { 19 | const match = aliases.find(({ search }) => file.search(search) > -1); 20 | 21 | if(!match) { 22 | return false; 23 | } 24 | 25 | return from.silent( 26 | options.aliases[match.name], 27 | file.replace(match.search, ".") 28 | ); 29 | }; 30 | }; 31 | -------------------------------------------------------------------------------- /packages/aliases/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/path-aliases", 3 | "version": "28.0.0", 4 | "description": "Custom file resolver supporting directory aliases for modular-css", 5 | "main": "./aliases.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/aliases" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "css", 22 | "css-modules", 23 | "modular-css", 24 | "paths", 25 | "aliases" 26 | ], 27 | "dependencies": { 28 | "escape-string-regexp": "^4.0.0", 29 | "resolve-from": "^5.0.0" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /packages/aliases/test/__snapshots__/aliases.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`@modular-css/path-aliases should be usable as a modular-css resolver 1`] = ` 4 | { 5 | "packages/aliases/test/specimens/one/sub/sub.css": { 6 | "sub": [ 7 | "mc_sub", 8 | ], 9 | }, 10 | "packages/aliases/test/specimens/two/two.css": { 11 | "two": [ 12 | "mc_two", 13 | ], 14 | }, 15 | "packages/paths/test/specimens/one/start.css": { 16 | "rule": [ 17 | "mc_two", 18 | "mc_rule", 19 | ], 20 | }, 21 | } 22 | `; 23 | 24 | exports[`@modular-css/path-aliases should fall through to the default resolver 1`] = ` 25 | { 26 | "packages/aliases/test/specimens/two/two.css": { 27 | "two": [ 28 | "mc_two", 29 | ], 30 | }, 31 | "packages/paths/test/specimens/one/start.css": { 32 | "rule": [ 33 | "mc_two", 34 | "mc_rule", 35 | ], 36 | }, 37 | "packages/paths/test/specimens/one/sub/sub.css": { 38 | "sub": [ 39 | "mc_sub", 40 | ], 41 | }, 42 | } 43 | `; 44 | -------------------------------------------------------------------------------- /packages/aliases/test/specimens/one/one.css: -------------------------------------------------------------------------------- 1 | @value one: "one"; 2 | 3 | .one { color: red; } 4 | -------------------------------------------------------------------------------- /packages/aliases/test/specimens/one/sub/sub.css: -------------------------------------------------------------------------------- 1 | @value sub: "sub"; 2 | 3 | .sub { color: blue; } 4 | -------------------------------------------------------------------------------- /packages/aliases/test/specimens/two/two.css: -------------------------------------------------------------------------------- 1 | @value two: "two"; 2 | 3 | .two { color: blue; } 4 | -------------------------------------------------------------------------------- /packages/browserify/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/browserify/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/browserify/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/browserify", 3 | "version": "29.0.4", 4 | "description": "Browserify transform for modular-css", 5 | "main": "./browserify.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/browserify" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "browserify", 22 | "browserify-plugin", 23 | "browserify-transform", 24 | "css", 25 | "css-modules", 26 | "modular-css", 27 | "postcss" 28 | ], 29 | "dependencies": { 30 | "@modular-css/processor": "^29.0.4", 31 | "mkdirp": "^2.1.3", 32 | "p-each-series": "^2.0.0", 33 | "sink-transform": "^2.0.0", 34 | "through2": "^4.0.2" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/browserify/test/__snapshots__/issue-313.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/browserify.js /issues /313 should include all dependencies after watchify update 1`] = ` 4 | "/* packages/browserify/test/specimens/issues/313/1.css */ 5 | .mcd2dffd93_wooga { color: red; } 6 | /* packages/browserify/test/specimens/issues/313/2.css */ 7 | .mc4882c370_fooga { color: blue; } 8 | " 9 | `; 10 | -------------------------------------------------------------------------------- /packages/browserify/test/__snapshots__/watchify.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/browserify.js watchify shouldn't cache file contents between watchify runs 1`] = ` 4 | "/* packages/browserify/test/output/watchify/watched.css */ 5 | .mc6204d2f5_wooga { color: red; } 6 | " 7 | `; 8 | 9 | exports[`/browserify.js watchify shouldn't cache file contents between watchify runs 2`] = ` 10 | "/* packages/browserify/test/output/watchify/watched.css */ 11 | .mc6204d2f5_wooga { color: blue; } 12 | " 13 | `; 14 | 15 | exports[`/browserify.js watchify shouldn't explode on invalid CSS 1`] = ` 16 | "/* packages/browserify/test/output/watchify/watched.css */ 17 | .mc6204d2f5_wooga { color: blue; } 18 | " 19 | `; 20 | -------------------------------------------------------------------------------- /packages/browserify/test/lib/bundle.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = (build) => 4 | new Promise((resolve) => { 5 | build.bundle((err, out) => { 6 | expect(err).toBeFalsy(); 7 | 8 | // CSS processing in the plugin takes non-zero amount of time, 9 | // this is ridiculous but seemingly unavoidable 10 | setTimeout(() => 11 | resolve(out.toString()), 12 | 25 13 | ); 14 | }); 15 | }); 16 | -------------------------------------------------------------------------------- /packages/browserify/test/output/.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore everything in this directory 2 | * 3 | # Except this file 4 | !.gitignore 5 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/blue.css: -------------------------------------------------------------------------------- 1 | .wooga { color: blue; } 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/basic/common.js: -------------------------------------------------------------------------------- 1 | require("../../folder/folder.css"); 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/deps/a.js: -------------------------------------------------------------------------------- 1 | require("./common"); 2 | require("../../simple.css"); 3 | require("../../local.css"); 4 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/deps/b.js: -------------------------------------------------------------------------------- 1 | require("./common"); 2 | require("../../local.css"); 3 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/deps/common.js: -------------------------------------------------------------------------------- 1 | require("../../folder/folder.css"); 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/empty/a.js: -------------------------------------------------------------------------------- 1 | require("./common"); 2 | require("../../start.css"); 3 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/empty/b.js: -------------------------------------------------------------------------------- 1 | require("./common"); 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/empty/common.js: -------------------------------------------------------------------------------- 1 | require("../../folder/folder.css"); 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/noempty/a.js: -------------------------------------------------------------------------------- 1 | require("./common"); 2 | require("../../start.css"); 3 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/noempty/b.js: -------------------------------------------------------------------------------- 1 | require("./common"); 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/noempty/common.js: -------------------------------------------------------------------------------- 1 | require("../../folder/folder.css"); 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/relative/a.js: -------------------------------------------------------------------------------- 1 | require("./common"); 2 | require("../../relative.css"); 3 | require("../../start.css"); 4 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/relative/b.js: -------------------------------------------------------------------------------- 1 | require("./common"); 2 | require("../../local.css"); 3 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/factor-bundle/relative/common.js: -------------------------------------------------------------------------------- 1 | require("../../folder/folder.css"); 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/folder/folder.css: -------------------------------------------------------------------------------- 1 | @value folder: white; 2 | .folder { margin: 2px; } 3 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/folder/folder2.css: -------------------------------------------------------------------------------- 1 | .folder2 { color: green; } 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/folder/subfolder/subfolder.css: -------------------------------------------------------------------------------- 1 | .subfolder { color: yellow; } 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/invalid.css: -------------------------------------------------------------------------------- 1 | .fooga { color: red; } 2 | .booga { composes: foo; } 3 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/issues/313/1.css: -------------------------------------------------------------------------------- 1 | .wooga { color: red; } 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/issues/313/2.css: -------------------------------------------------------------------------------- 1 | .fooga { color: blue; } 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/issues/58/issue.css: -------------------------------------------------------------------------------- 1 | .issue1 { 2 | composes: other1 from "./other.css"; 3 | color: teal; 4 | } 5 | 6 | .issue2 { 7 | composes: issue1; 8 | composes: other3 from "./other.css"; 9 | color: aqua; 10 | } 11 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/keyframes.css: -------------------------------------------------------------------------------- 1 | @keyframes nooga { 2 | 0% { opacity: 0; } 3 | 100% { opacity: 1; } 4 | } 5 | 6 | .tooga { 7 | animation: nooga 2s; 8 | } 9 | 10 | @-webkit-keyframes loadingSpinner { 11 | from { background-position: 0px; } 12 | to { background-position: -3968px;} 13 | } 14 | 15 | .looga { 16 | -webkit-animation: loadingSpinner 2.5s steps(62) infinite; 17 | } 18 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/local.css: -------------------------------------------------------------------------------- 1 | @value one: red; 2 | @value two: blue; 3 | @value folder from "./folder/folder.css"; 4 | 5 | .booga { background: green; } 6 | .looga { composes: booga; } 7 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/multiple.css: -------------------------------------------------------------------------------- 1 | .fooga { color: red; } 2 | .wooga { composes: fooga; background: blue; } 3 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/relative.css: -------------------------------------------------------------------------------- 1 | .wooga { 2 | color: red; 3 | background: url("./folder/to.png"); 4 | } 5 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/simple.css: -------------------------------------------------------------------------------- 1 | .wooga { color: red; } 2 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/start.css: -------------------------------------------------------------------------------- 1 | @value one, two, folder from "./local.css"; 2 | .wooga { composes: booga from "./local.css"; } 3 | .booga { color: one; background: two; } 4 | .tooga { border: 1px solid folder; } 5 | -------------------------------------------------------------------------------- /packages/browserify/test/specimens/watchify/relative.css: -------------------------------------------------------------------------------- 1 | .booga { 2 | background: url("./to.png"); 3 | } 4 | 5 | .wooga { 6 | composes: wooga from "../relative.css"; 7 | } 8 | -------------------------------------------------------------------------------- /packages/cli/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/cli/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/cli/README.md: -------------------------------------------------------------------------------- 1 | @modular-css/cli [![NPM Version](https://img.shields.io/npm/v/@modular-css/cli.svg)](https://www.npmjs.com/package/@modular-css/cli) [![NPM License](https://img.shields.io/npm/l/@modular-css/cli.svg)](https://www.npmjs.com/package/@modular-css/cli) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/cli.svg)](https://www.npmjs.com/package/@modular-css/cli) 2 | =========== 3 | 4 | CLI interface to [`modular-css`](https://github.com/tivac/modular-css). 5 | 6 | - [Install](#install) 7 | - [Usage](#usage) 8 | 9 | ## Install 10 | 11 | ```bash 12 | $ npm i @modular-css/cli 13 | ``` 14 | 15 | ## Usage 16 | 17 | ``` 18 | $ modular-css [options] ... 19 | 20 | Options 21 | --dir, -d Directory to search from [process cwd] 22 | --out, -o File to write output CSS to [stdout] 23 | --json, -j File to write output compositions JSON to 24 | --map, -m Include inline source map in output 25 | --rewrite, -r Control rewriting of url() references in CSS 26 | --help Show this help 27 | ``` 28 | -------------------------------------------------------------------------------- /packages/cli/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/cli", 3 | "version": "29.0.4", 4 | "description": "CLI for modular-css", 5 | "main": "./cli.js", 6 | "bin": { 7 | "modular-css": "./cli.js" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/tivac/modular-css.git", 12 | "directory": "packages/cli" 13 | }, 14 | "bugs": { 15 | "url": "https://github.com/tivac/modular-css/issues" 16 | }, 17 | "author": "Pat Cavit ", 18 | "homepage": "https://m-css.com", 19 | "license": "MIT", 20 | "publishConfig": { 21 | "access": "public" 22 | }, 23 | "keywords": [ 24 | "css", 25 | "css-modules", 26 | "modular-css", 27 | "postcss", 28 | "cli" 29 | ], 30 | "dependencies": { 31 | "@modular-css/glob": "^29.0.4", 32 | "@modular-css/processor": "^29.0.4", 33 | "meow": "^9.0.0", 34 | "mkdirp": "^2.1.3" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/cli/test/specimens/invalid.css: -------------------------------------------------------------------------------- 1 | .fooga { color: red; } 2 | .booga { composes: foo; } 3 | -------------------------------------------------------------------------------- /packages/cli/test/specimens/no-rewrite.css: -------------------------------------------------------------------------------- 1 | .a { 2 | background: url("image.png"); 3 | } 4 | -------------------------------------------------------------------------------- /packages/cli/test/specimens/simple.css: -------------------------------------------------------------------------------- 1 | .wooga { color: red; } 2 | -------------------------------------------------------------------------------- /packages/css-to-js/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/css-to-js/README.md: -------------------------------------------------------------------------------- 1 | # @modular-css/css-to-js 2 | 3 | Internal package, used to take a `modular-css` processed file and turn it into a variety of JS-appropriate information. 4 | 5 | Used by `@modular-css/rollup`, `@modular-css/vite`, and `@modular-css/wepback`. 6 | 7 | ## Usage 8 | 9 | Probably don't? 10 | -------------------------------------------------------------------------------- /packages/css-to-js/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/css-to-js", 3 | "version": "29.1.1", 4 | "description": "modular-css powered conversion of CSS to JavaScript", 5 | "main": "./css-to-js.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/css-to-js" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "css", 22 | "css-modules", 23 | "modular-css", 24 | "postcss" 25 | ], 26 | "dependencies": { 27 | "@modular-css/processor": "^29.0.4", 28 | "dedent": "^0.7.0", 29 | "identifierfy": "^2.0.0", 30 | "just-extend": "^6.0.1" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /packages/css-to-js/test/specimens/composes/custom-between-rules.css: -------------------------------------------------------------------------------- 1 | .rule { 2 | display: flex; 3 | } 4 | .custom { 5 | color: pink; 6 | } 7 | .rule { 8 | composes: custom; 9 | } -------------------------------------------------------------------------------- /packages/css-to-js/test/specimens/composes/custom-first-rule.css: -------------------------------------------------------------------------------- 1 | .custom { 2 | color: pink; 3 | } 4 | .rule { 5 | display: flex; 6 | } 7 | .rule { 8 | composes: custom; 9 | } -------------------------------------------------------------------------------- /packages/css-to-js/test/specimens/dependencies.css: -------------------------------------------------------------------------------- 1 | .wooga { 2 | composes: fooga from "./simple.css"; 3 | 4 | background: blue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/css-to-js/test/specimens/simple.css: -------------------------------------------------------------------------------- 1 | @value str: "string"; 2 | 3 | .fooga { 4 | color: red; 5 | } 6 | -------------------------------------------------------------------------------- /packages/glob/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/glob/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/glob/README.md: -------------------------------------------------------------------------------- 1 | @modular-css/glob [![NPM Version](https://img.shields.io/npm/v/@modular-css/glob.svg)](https://www.npmjs.com/package/@modular-css/glob) [![NPM License](https://img.shields.io/npm/l/@modular-css/glob.svg)](https://www.npmjs.com/package/@modular-css/glob) [![NPM Downloads](https://img.shields.io/npm/dm/@modular-css/glob.svg)](https://www.npmjs.com/package/@modular-css/glob) 2 | =========== 3 | 4 | A JS API for using glob patterns with [`modular-css`](https://github.com/tivac/modular-css). 5 | 6 | - [Install](#install) 7 | - [Usage](#usage) 8 | - [Options](#options) 9 | 10 | ## Install 11 | 12 | `$ npm i @modular-css/glob` 13 | 14 | ## Usage 15 | 16 | ```js 17 | var glob = require("@modular-css/glob"); 18 | 19 | glob({ 20 | search : [ 21 | "**/*.css" 22 | ] 23 | }) 24 | .then((processor) => { 25 | // returns a filled-out Processor instance you can use 26 | }) 27 | ``` 28 | 29 | ## Options 30 | 31 | `glob()` accepts all of the same options as a [`Processor` instance](../processor/README.md#options). 32 | 33 | #### `search` 34 | 35 | Array of glob patterns to pass to [`globule`](https://www.npmjs.com/package/globule) for searching. 36 | -------------------------------------------------------------------------------- /packages/glob/glob.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const globule = require("globule"); 4 | const Processor = require("@modular-css/processor"); 5 | 6 | module.exports = async ( 7 | /* istanbul ignore next: can't test this */ 8 | opts = {} 9 | ) => { 10 | const options = { 11 | __proto__ : null, 12 | 13 | search : [ "**/*.css" ], 14 | ...opts, 15 | }; 16 | 17 | const processor = new Processor(options); 18 | 19 | await Promise.all( 20 | globule.find({ 21 | src : options.search, 22 | cwd : processor.options.cwd, 23 | prefixBase : true, 24 | }) 25 | .map((file) => processor.file(file)) 26 | ); 27 | 28 | return processor; 29 | }; 30 | -------------------------------------------------------------------------------- /packages/glob/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/glob", 3 | "version": "29.0.4", 4 | "description": "Glob support for modular-css", 5 | "main": "./glob.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/glob" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "glob", 22 | "css", 23 | "css-modules", 24 | "modular-css" 25 | ], 26 | "dependencies": { 27 | "@modular-css/processor": "^29.0.4", 28 | "globule": "^1.1.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /packages/glob/test/__snapshots__/glob.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/glob.js should find files on disk & output css 1`] = ` 4 | "/* 1.css */ 5 | .mc_one { 6 | color: red; 7 | } 8 | /* exclude/4.css */ 9 | .mc_four { 10 | color: red; 11 | } 12 | /* dir/3.css */ 13 | .mc_three { 14 | color: white; 15 | } 16 | /* dir/2.css */ 17 | .mc_two { 18 | background: blue; 19 | } 20 | " 21 | `; 22 | 23 | exports[`/glob.js should support exclusion patterns 1`] = ` 24 | "/* 1.css */ 25 | .mc_one { 26 | color: red; 27 | } 28 | /* dir/3.css */ 29 | .mc_three { 30 | color: white; 31 | } 32 | /* dir/2.css */ 33 | .mc_two { 34 | background: blue; 35 | } 36 | " 37 | `; 38 | 39 | exports[`/glob.js should use a default search 1`] = ` 40 | "/* 1.css */ 41 | .mc_one { 42 | color: red; 43 | } 44 | /* exclude/4.css */ 45 | .mc_four { 46 | color: red; 47 | } 48 | /* dir/3.css */ 49 | .mc_three { 50 | color: white; 51 | } 52 | /* dir/2.css */ 53 | .mc_two { 54 | background: blue; 55 | } 56 | " 57 | `; 58 | -------------------------------------------------------------------------------- /packages/glob/test/mocha.opts: -------------------------------------------------------------------------------- 1 | --ui bdd 2 | --reporter spec 3 | --timeout 5000 4 | -------------------------------------------------------------------------------- /packages/glob/test/specimens/1.css: -------------------------------------------------------------------------------- 1 | .one { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /packages/glob/test/specimens/dir/2.css: -------------------------------------------------------------------------------- 1 | .two { 2 | composes: three from "./3.css"; 3 | 4 | background: blue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/glob/test/specimens/dir/3.css: -------------------------------------------------------------------------------- 1 | .three { 2 | color: white; 3 | } 4 | -------------------------------------------------------------------------------- /packages/glob/test/specimens/exclude/4.css: -------------------------------------------------------------------------------- 1 | .four { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /packages/namer/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/namer/LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/namer/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/shortnames", 3 | "version": "28.0.0", 4 | "description": "Helper function to make tiny classnames for modular-css", 5 | "main": "namer.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/namer" 10 | }, 11 | "author": "Pat Cavit ", 12 | "homepage": "https://m-css.com", 13 | "license": "MIT", 14 | "publishConfig": { 15 | "access": "public" 16 | }, 17 | "bugs": { 18 | "url": "https://github.com/tivac/modular-css/issues" 19 | }, 20 | "keywords": [ 21 | "modular-css", 22 | "optimizing", 23 | "css", 24 | "build" 25 | ], 26 | "dependencies": { 27 | "alphabet": "^1.0.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/namer/test/__snapshots__/namer.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`@modular-css/shortnames should differ between files 1`] = `"AA"`; 4 | 5 | exports[`@modular-css/shortnames should differ between files 2`] = `"BA"`; 6 | 7 | exports[`@modular-css/shortnames should differ within files 1`] = `"AA"`; 8 | 9 | exports[`@modular-css/shortnames should differ within files 2`] = `"AB"`; 10 | 11 | exports[`@modular-css/shortnames should hash its arguments 1`] = `"AA"`; 12 | 13 | exports[`@modular-css/shortnames should re-use selectors for identical inputs 1`] = `"AA"`; 14 | 15 | exports[`@modular-css/shortnames should re-use selectors for identical inputs 2`] = `"AA"`; 16 | 17 | exports[`@modular-css/shortnames should wrap as necessary 1`] = `"PF"`; 18 | 19 | exports[`@modular-css/shortnames should wrap as necessary 2`] = `"BF"`; 20 | 21 | exports[`@modular-css/shortnames should wrap as necessary 3`] = `"xh"`; 22 | 23 | exports[`@modular-css/shortnames should wrap as necessary 4`] = `"zD9B"`; 24 | 25 | exports[`@modular-css/shortnames should wrap as necessary 5`] = `"aA"`; 26 | -------------------------------------------------------------------------------- /packages/paths/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/paths/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/paths/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/path-resolver", 3 | "version": "28.0.0", 4 | "description": "Custom file resolver supporting multiple paths for modular-css", 5 | "main": "./paths.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/paths" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "css", 22 | "css-modules", 23 | "modular-css", 24 | "paths" 25 | ], 26 | "dependencies": { 27 | "resolve-from": "^5.0.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /packages/paths/paths.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const from = require("resolve-from"); 4 | 5 | module.exports = (args) => { 6 | const options = { 7 | __proto__ : null, 8 | 9 | paths : [], 10 | ...args, 11 | }; 12 | 13 | return (src, file) => { 14 | let result; 15 | 16 | options.paths.some((dir) => 17 | (result = from.silent(dir, file)) 18 | ); 19 | 20 | return result; 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /packages/paths/test/__snapshots__/paths.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`@modular-css/path-resolver should be usable as a modular-css resolver 1`] = ` 4 | { 5 | "packages/paths/test/specimens/one/start.css": { 6 | "rule": [ 7 | "mc_two", 8 | "mc_rule", 9 | ], 10 | }, 11 | "packages/paths/test/specimens/one/sub/sub.css": { 12 | "sub": [ 13 | "mc_sub", 14 | ], 15 | }, 16 | "packages/paths/test/specimens/two/two.css": { 17 | "two": [ 18 | "mc_two", 19 | ], 20 | }, 21 | } 22 | `; 23 | -------------------------------------------------------------------------------- /packages/paths/test/specimens/one/one.css: -------------------------------------------------------------------------------- 1 | @value one: "one"; 2 | 3 | .one { color: red; } 4 | -------------------------------------------------------------------------------- /packages/paths/test/specimens/one/sub/sub.css: -------------------------------------------------------------------------------- 1 | @value sub: "sub"; 2 | 3 | .sub { color: blue; } 4 | -------------------------------------------------------------------------------- /packages/paths/test/specimens/two/two.css: -------------------------------------------------------------------------------- 1 | @value two: "two"; 2 | 3 | .two { color: blue; } 4 | -------------------------------------------------------------------------------- /packages/postcss/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/postcss/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/postcss/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/postcss", 3 | "version": "29.0.4", 4 | "description": "Use modular-css via postcss", 5 | "main": "./postcss.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/postcss" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "css", 22 | "css-modules", 23 | "modular-css", 24 | "postcss" 25 | ], 26 | "dependencies": { 27 | "@modular-css/processor": "^29.0.4", 28 | "mkdirp": "^2.1.3" 29 | }, 30 | "peerDependencies": { 31 | "postcss": "^8.0.0" 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /packages/postcss/test/mocha.opts: -------------------------------------------------------------------------------- 1 | --ui bdd 2 | --reporter spec 3 | --timeout 5000 4 | -------------------------------------------------------------------------------- /packages/postcss/test/output/.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore everything in this directory 2 | * 3 | # Except this file 4 | !.gitignore 5 | -------------------------------------------------------------------------------- /packages/postcss/test/results/simple.json: -------------------------------------------------------------------------------- 1 | { 2 | "packages/postcss/test/specimens/simple.css": { 3 | "wooga": "wooga" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /packages/postcss/test/specimens/folder/folder.css: -------------------------------------------------------------------------------- 1 | @value folder: white; 2 | .folder { margin: 2px; } 3 | -------------------------------------------------------------------------------- /packages/postcss/test/specimens/folder/folder2.css: -------------------------------------------------------------------------------- 1 | .folder2 { color: green; } 2 | -------------------------------------------------------------------------------- /packages/postcss/test/specimens/folder/subfolder/subfolder.css: -------------------------------------------------------------------------------- 1 | .subfolder { color: yellow; } 2 | -------------------------------------------------------------------------------- /packages/postcss/test/specimens/local.css: -------------------------------------------------------------------------------- 1 | @value one: red; 2 | @value two: blue; 3 | @value folder from "./folder/folder.css"; 4 | 5 | .booga { background: green; } 6 | .looga { composes: booga; } 7 | -------------------------------------------------------------------------------- /packages/postcss/test/specimens/simple.css: -------------------------------------------------------------------------------- 1 | .wooga { color: red; } 2 | -------------------------------------------------------------------------------- /packages/postcss/test/specimens/start.css: -------------------------------------------------------------------------------- 1 | @value one, two, folder from "./local.css"; 2 | .wooga { composes: booga from "./local.css"; } 3 | .booga { color: one; background: two; } 4 | .tooga { border: 1px solid folder; } 5 | -------------------------------------------------------------------------------- /packages/processor/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/processor/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/processor/lib/graph-tiers.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const leaves = (graph) => graph.overallOrder(true); 4 | 5 | // Clone the graph and break the graph into tiers for further processing 6 | module.exports = (graph) => { 7 | const clone = graph.clone(); 8 | const tiers = []; 9 | 10 | let tier = leaves(clone); 11 | 12 | while(tier.length) { 13 | tier.forEach((node) => { 14 | clone.dependantsOf(node).forEach( 15 | (dep) => clone.removeDependency(dep, node) 16 | ); 17 | 18 | clone.removeNode(node); 19 | }); 20 | 21 | tiers.push(tier.sort()); 22 | 23 | tier = leaves(clone); 24 | } 25 | 26 | return [].concat(...tiers); 27 | }; 28 | -------------------------------------------------------------------------------- /packages/processor/lib/identifiers.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const createParser = require("postcss-selector-parser"); 4 | 5 | const classExtractionParser = createParser((selectors) => { 6 | const values = []; 7 | 8 | selectors.walkClasses(({ value }) => values.push(value)); 9 | 10 | return values; 11 | }); 12 | 13 | exports.keyframes = /keyframes$/i; 14 | exports.animations = /animation$|animation-name$/i; 15 | exports.externals = /:external\(/i; 16 | 17 | // Find all classes that comprise a selector and return 'em 18 | exports.parse = (selector) => classExtractionParser.transformSync(selector); 19 | -------------------------------------------------------------------------------- /packages/processor/lib/keys.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const GRAPH_SEP = "::"; 4 | const FILE_PREFIX = `file${GRAPH_SEP}`; 5 | const SELECTOR_PREFIX = `selector${GRAPH_SEP}`; 6 | const VALUE_PREFIX = `value${GRAPH_SEP}`; 7 | 8 | exports.selectorKey = (file, selector) => `${SELECTOR_PREFIX}${file}${GRAPH_SEP}${selector}`; 9 | exports.fileKey = (file) => `${FILE_PREFIX}${file}`; 10 | exports.valueKey = (file, value) => `${VALUE_PREFIX}${file}${GRAPH_SEP}${value}`; 11 | 12 | exports.cleanPrefix = (prefix, key) => key.replace(prefix, ""); 13 | 14 | exports.filterByPrefix = (prefix, things, { clean = true } = false) => things.reduce((acc, thing) => { 15 | if(!thing.startsWith(prefix)) { 16 | return acc; 17 | } 18 | 19 | acc.push(clean ? exports.cleanPrefix(prefix, thing) : thing); 20 | 21 | return acc; 22 | }, []); 23 | 24 | exports.isFile = (key) => key.startsWith(FILE_PREFIX); 25 | exports.isSelector = (key) => key.startsWith(SELECTOR_PREFIX); 26 | exports.isValue = (key) => key.startsWith(VALUE_PREFIX); 27 | 28 | exports.FILE_PREFIX = FILE_PREFIX; 29 | exports.SELECTOR_PREFIX = SELECTOR_PREFIX; 30 | exports.VALUE_PREFIX = VALUE_PREFIX; 31 | -------------------------------------------------------------------------------- /packages/processor/lib/normalize.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require("path"); 4 | 5 | module.exports = (cwd, file) => { 6 | if(!path.isAbsolute(file)) { 7 | file = path.join(cwd, file); 8 | } 9 | 10 | return path.normalize(file); 11 | }; 12 | -------------------------------------------------------------------------------- /packages/processor/lib/relative.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require("path"); 4 | const sepRegex = /\\/g; 5 | 6 | // Get a relative version of an absolute path w/ cross-platform/URL-friendly 7 | // directory separators 8 | module.exports = (cwd, file) => path.relative(cwd, file).replace(sepRegex, "/"); 9 | -------------------------------------------------------------------------------- /packages/processor/lib/resolve.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require("path"); 4 | 5 | let resolve; 6 | 7 | exports.resolve = (src, file) => { 8 | if(!resolve) { 9 | const name = "resolve-from"; 10 | 11 | resolve = require(name).silent; 12 | } 13 | 14 | return resolve(path.dirname(src), file); 15 | }; 16 | 17 | exports.resolvers = (resolvers) => { 18 | resolvers.push(exports.resolve); 19 | 20 | return (src, file) => { 21 | let result; 22 | 23 | resolvers.some((fn) => 24 | (result = fn(src, file, exports.resolve)) 25 | ); 26 | 27 | return result; 28 | }; 29 | }; 30 | -------------------------------------------------------------------------------- /packages/processor/lib/stamp.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const STAMP = Symbol("STAMPED SO LEAVE IT BE"); 4 | 5 | exports.isStamped = (o) => (STAMP in o); 6 | 7 | exports.stamp = (o) => Object.defineProperty(o, STAMP, {}); 8 | -------------------------------------------------------------------------------- /packages/processor/lib/value-replacer.js: -------------------------------------------------------------------------------- 1 | const valueParser = require("postcss-value-parser"); 2 | 3 | const replacer = (thing, prop, values) => { 4 | const parseResult = valueParser(thing[prop]); 5 | 6 | let modified = false; 7 | 8 | parseResult.walk((node) => { 9 | if(node.type !== "word" || !values[node.value]) { 10 | return; 11 | } 12 | 13 | const current = values[node.value]; 14 | 15 | // Source map support 16 | thing.source = current.source; 17 | 18 | // Replace any value instances 19 | node.value = current.value; 20 | 21 | modified = true; 22 | }); 23 | 24 | if(modified) { 25 | thing[prop] = parseResult.toString(); 26 | } 27 | }; 28 | 29 | module.exports = replacer; 30 | -------------------------------------------------------------------------------- /packages/processor/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/processor", 3 | "version": "29.0.4", 4 | "description": "A streamlined reinterpretation of CSS Modules", 5 | "main": "./processor.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/processor" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "css", 22 | "css-modules", 23 | "modular-css", 24 | "postcss" 25 | ], 26 | "dependencies": { 27 | "dependency-graph": "^0.11.0", 28 | "escape-string-regexp": "^4.0.0", 29 | "postcss-selector-parser": "^7.1.0", 30 | "postcss-url": "^10.0.0", 31 | "postcss-value-parser": "^4.0.0", 32 | "resolve-from": "^5.0.0", 33 | "unique-slug": "^4.0.0" 34 | }, 35 | "peerDependencies": { 36 | "postcss": "^8.0.0" 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /packages/processor/test/__snapshots__/exports.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/processor.js exports should export an object of arrays containing strings 1`] = ` 4 | { 5 | "black": [ 6 | "mc_black", 7 | ], 8 | "one": [ 9 | "mc_red", 10 | "mc_black", 11 | "mc_one", 12 | ], 13 | "red": [ 14 | "mc_red", 15 | ], 16 | "two": [ 17 | "mc_red", 18 | "mc_black", 19 | "mc_two", 20 | ], 21 | } 22 | `; 23 | 24 | exports[`/processor.js exports should export identifiers and their classes 1`] = ` 25 | { 26 | "packages/processor/test/specimens/folder/folder.css": { 27 | "folder": [ 28 | "mc_folder", 29 | ], 30 | }, 31 | "packages/processor/test/specimens/local.css": { 32 | "booga": [ 33 | "mc_booga", 34 | ], 35 | "looga": [ 36 | "mc_booga", 37 | "mc_looga", 38 | ], 39 | }, 40 | "packages/processor/test/specimens/start.css": { 41 | "booga": [ 42 | "mc_booga", 43 | ], 44 | "tooga": [ 45 | "mc_tooga", 46 | ], 47 | "wooga": [ 48 | "mc_booga", 49 | "mc_wooga", 50 | ], 51 | }, 52 | } 53 | `; 54 | -------------------------------------------------------------------------------- /packages/processor/test/__snapshots__/externals.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/processor.js externals should support overriding external values 1`] = ` 4 | "/* packages/processor/test/specimens/simple.css */ 5 | .mc_wooga { color: red; } 6 | /* packages/processor/test/specimens/folder/folder.css */ 7 | .mc_folder { margin: 2px; } 8 | /* packages/processor/test/specimens/local.css */ 9 | .mc_booga { background: green; } 10 | /* packages/processor/test/specimens/externals.css */ 11 | .mc_a .mc_wooga { 12 | color: green; 13 | } 14 | .mc_b:hover .mc_booga { 15 | background: blue; 16 | } 17 | .mc_wooga .mc_booga { 18 | color: red; 19 | } 20 | " 21 | `; 22 | -------------------------------------------------------------------------------- /packages/processor/test/__snapshots__/getters.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/processor.js getters .file should return all the files that have been added 1`] = ` 4 | [ 5 | "packages/processor/test/specimens/start.css", 6 | "packages/processor/test/specimens/local.css", 7 | "packages/processor/test/specimens/folder/folder.css", 8 | ] 9 | `; 10 | -------------------------------------------------------------------------------- /packages/processor/test/issues/__snapshots__/issue-261.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/issues /261 should allow colons in rules that also use :external() 1`] = ` 4 | "/* packages/processor/test/issues/specimens/261/1.css */ 5 | .mc55e10978_a { 6 | color: red; 7 | } 8 | /* packages/processor/test/issues/specimens/261/2.css */ 9 | .mc29999e60_b:hover .mc55e10978_a { 10 | color: blue; 11 | } 12 | " 13 | `; 14 | -------------------------------------------------------------------------------- /packages/processor/test/issues/__snapshots__/issue-56.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/issues /56 should prune rules that only compose, but leave them in the exports 1`] = ` 4 | { 5 | "booga": [ 6 | "mc_booga", 7 | ], 8 | "fooga": [ 9 | "mc_booga", 10 | "mc_fooga", 11 | ], 12 | "wooga": [ 13 | "mc_booga", 14 | "mc_wooga", 15 | ], 16 | } 17 | `; 18 | 19 | exports[`/issues /56 should prune rules that only compose, but leave them in the exports 2`] = ` 20 | "/* packages/processor/test/specimens/issues/56.css */ 21 | .mc_booga { color: red } 22 | .mc_fooga:hover { color: blue }" 23 | `; 24 | -------------------------------------------------------------------------------- /packages/processor/test/issues/__snapshots__/issue-98.test.js.snap: -------------------------------------------------------------------------------- 1 | // Jest Snapshot v1, https://goo.gl/fbAQLP 2 | 3 | exports[`/issues /98 should prune rules that only compose, but leave them in the exports 1`] = ` 4 | { 5 | "booga": [ 6 | "mc_booga", 7 | ], 8 | "fooga": [ 9 | "mc_booga", 10 | "mc_fooga", 11 | ], 12 | } 13 | `; 14 | 15 | exports[`/issues /98 should prune rules that only compose, but leave them in the exports 2`] = ` 16 | "/* packages/processor/test/specimens/issues/98.css */ 17 | .mc_booga { color: red } 18 | .mc_fooga + .mc_fooga { color: blue }" 19 | `; 20 | -------------------------------------------------------------------------------- /packages/processor/test/issues/issue-261.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const Processor = require("../../processor.js"); 4 | 5 | describe("/issues", () => { 6 | describe("/261", () => { 7 | it("should allow colons in rules that also use :external()", async () => { 8 | const processor = new Processor(); 9 | 10 | await processor.file(require.resolve("./specimens/261/2.css")); 11 | 12 | const { css } = await processor.output(); 13 | 14 | expect(css).toMatchSnapshot(); 15 | }); 16 | }); 17 | }); 18 | -------------------------------------------------------------------------------- /packages/processor/test/issues/issue-56.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const dedent = require("dedent"); 4 | const namer = require("@modular-css/test-utils/namer.js"); 5 | const Processor = require("../../processor.js"); 6 | 7 | describe("/issues", () => { 8 | describe("/56", () => { 9 | it("should prune rules that only compose, but leave them in the exports", async () => { 10 | const processor = new Processor({ 11 | namer, 12 | }); 13 | 14 | const { exports } = await processor.string( 15 | "./packages/processor/test/specimens/issues/56.css", 16 | dedent(` 17 | .booga { color: red } 18 | .fooga { composes: booga } 19 | .fooga:hover { color: blue } 20 | .wooga { composes: booga } 21 | `) 22 | ); 23 | 24 | expect(exports).toMatchSnapshot(); 25 | 26 | const { css } = await processor.output(); 27 | 28 | expect(css).toMatchSnapshot(); 29 | }); 30 | }); 31 | }); 32 | -------------------------------------------------------------------------------- /packages/processor/test/issues/issue-66.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const Processor = require("../../processor.js"); 4 | 5 | describe("/issues", () => { 6 | describe("/66", () => { 7 | it("should ignore remove calls for unknown files", async () => { 8 | const processor = new Processor(); 9 | 10 | await processor.string( 11 | "./packages/processor/test/specimens/a.css", 12 | ".aooga { }" 13 | ); 14 | 15 | expect(() => processor.remove("./fooga.js")).not.toThrow(); 16 | }); 17 | }); 18 | }); 19 | -------------------------------------------------------------------------------- /packages/processor/test/issues/issue-98.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const dedent = require("dedent"); 4 | const namer = require("@modular-css/test-utils/namer.js"); 5 | const Processor = require("../../processor.js"); 6 | 7 | describe("/issues", () => { 8 | describe("/98", () => { 9 | it("should prune rules that only compose, but leave them in the exports", async () => { 10 | const processor = new Processor({ 11 | namer, 12 | }); 13 | 14 | const { exports } = await processor.string( 15 | "./packages/processor/test/specimens/issues/98.css", 16 | dedent(` 17 | .booga { color: red } 18 | .fooga { composes: booga } 19 | .fooga + .fooga { color: blue } 20 | `) 21 | ); 22 | 23 | expect(exports).toMatchSnapshot(); 24 | 25 | const { css } = await processor.output(); 26 | 27 | expect(css).toMatchSnapshot(); 28 | }); 29 | }); 30 | }); 31 | -------------------------------------------------------------------------------- /packages/processor/test/issues/specimens/261/1.css: -------------------------------------------------------------------------------- 1 | .a { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /packages/processor/test/issues/specimens/261/2.css: -------------------------------------------------------------------------------- 1 | .b:hover :external(a from "./1.css") { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /packages/processor/test/output/.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore everything in this directory 2 | * 3 | # Except this file 4 | !.gitignore 5 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/at-composes.css: -------------------------------------------------------------------------------- 1 | @composes "./blue.css"; 2 | 3 | .notblue { 4 | composes: wooga; 5 | 6 | color: green; 7 | } 8 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/blue.css: -------------------------------------------------------------------------------- 1 | .wooga { color: blue; } 2 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/composes/external-compose-via-local-compose.css: -------------------------------------------------------------------------------- 1 | .ruleWithSingleCompose { 2 | composes: red from "../deps/classes.css"; 3 | } 4 | 5 | .ruleWithLocalComposes { 6 | composes: ruleWithSingleCompose; 7 | composes: blue from "../deps/classes.css"; 8 | } 9 | 10 | .nextRuleWithLocalComposes { 11 | composes: ruleWithSingleCompose; 12 | } 13 | 14 | .nextRuleWithLocalComposes { 15 | composes: blue from "../deps/classes.css"; 16 | } -------------------------------------------------------------------------------- /packages/processor/test/specimens/composes/external-compose-via-local-compose2.css: -------------------------------------------------------------------------------- 1 | .ruleWithSingleCompose { 2 | composes: red from "../deps/classes.css"; 3 | } 4 | 5 | .ruleWithLocalComposes { 6 | composes: blue from "../deps/classes.css"; 7 | composes: ruleWithSingleCompose; 8 | } 9 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/composes/external-compose-via-local-compose3.css: -------------------------------------------------------------------------------- 1 | .ruleWithSingleCompose { 2 | composes: red from "../deps/classes.css"; 3 | } 4 | 5 | .ruleWithLocalComposes { 6 | composes: ruleWithSingleCompose; 7 | } 8 | 9 | .ruleWithLocalComposes { 10 | composes: blue from "../deps/classes.css"; 11 | } 12 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/composes/external-compose-via-local-compose4.css: -------------------------------------------------------------------------------- 1 | .ruleWithSingleCompose { 2 | composes: red from "../deps/classes.css"; 3 | } 4 | 5 | .ruleWithLocalComposes { 6 | composes: blue from "../deps/classes.css"; 7 | } 8 | 9 | .ruleWithLocalComposes { 10 | composes: ruleWithSingleCompose; 11 | } 12 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/composes/external-composes-multiple-declarations.css: -------------------------------------------------------------------------------- 1 | .ruleWithComposes { 2 | composes: red from "../deps/classes.css"; 3 | composes: blue from "../deps/classes.css"; 4 | } 5 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/composes/external-composes-single-declaration.css: -------------------------------------------------------------------------------- 1 | .ruleWithComposes { 2 | composes: red, blue from "../deps/classes.css"; 3 | } 4 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/composes/external-first-and-local-second-composes.css: -------------------------------------------------------------------------------- 1 | .custom { 2 | color: red; 3 | } 4 | 5 | .externalComposeRule { 6 | composes: red from "../deps/classes.css"; 7 | } 8 | 9 | .externalComposeRule { 10 | composes: custom; 11 | } -------------------------------------------------------------------------------- /packages/processor/test/specimens/composes/external-second-and-local-first-composes.css: -------------------------------------------------------------------------------- 1 | .custom { 2 | color: red; 3 | } 4 | 5 | .externalComposeRule { 6 | composes: custom; 7 | } 8 | 9 | .externalComposeRule { 10 | composes: red from "../deps/classes.css"; 11 | } 12 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/deep-namespace/a.css: -------------------------------------------------------------------------------- 1 | @value b from "./b.css"; 2 | 3 | .a { 4 | color: b; 5 | } -------------------------------------------------------------------------------- /packages/processor/test/specimens/deep-namespace/b.css: -------------------------------------------------------------------------------- 1 | @value * as values from "./c.css"; 2 | 3 | @value b: values.c; -------------------------------------------------------------------------------- /packages/processor/test/specimens/deep-namespace/c.css: -------------------------------------------------------------------------------- 1 | @value c: cyan; -------------------------------------------------------------------------------- /packages/processor/test/specimens/deep.css: -------------------------------------------------------------------------------- 1 | .deep { 2 | composes: subfolder from "./folder/subfolder/subfolder.css"; 3 | 4 | color: black; 5 | } 6 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/deps/classes.css: -------------------------------------------------------------------------------- 1 | .red { 2 | color: red; 3 | } 4 | 5 | .blue { 6 | color: blue; 7 | } 8 | 9 | .green { 10 | color: green; 11 | } 12 | 13 | .yellow { 14 | color: yellow; 15 | } 16 | 17 | .block { 18 | display: block; 19 | } 20 | 21 | .flex { 22 | display: flex; 23 | } 24 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/externals-invalid.css: -------------------------------------------------------------------------------- 1 | :external(nopenopenope from "./simple.css") { 2 | color: green; 3 | } 4 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/externals.css: -------------------------------------------------------------------------------- 1 | @value localCss: "./local.css"; 2 | 3 | .a :external(wooga from "./simple.css") { 4 | color: green; 5 | } 6 | 7 | .b:hover :external(booga from localCss) { 8 | background: blue; 9 | } 10 | 11 | :external(wooga from "./simple.css") :external(booga from localCss) { 12 | color: red; 13 | } 14 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/folder/folder.css: -------------------------------------------------------------------------------- 1 | @value folder: white; 2 | .folder { margin: 2px; } 3 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/folder/subfolder/subfolder.css: -------------------------------------------------------------------------------- 1 | .subfolder { color: yellow; } 2 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/img.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tivac/modular-css/9b032a3d7008a9775273e3942cdd28caeca8ff40/packages/processor/test/specimens/img.png -------------------------------------------------------------------------------- /packages/processor/test/specimens/invalid-import.css: -------------------------------------------------------------------------------- 1 | .fooga { color: red; } 2 | 3 | @import "./blue.css"; 4 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/invalid.css: -------------------------------------------------------------------------------- 1 | .fooga { color: red; } 2 | .booga { composes: foo; } 3 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/local.css: -------------------------------------------------------------------------------- 1 | @value one: red; 2 | @value two: blue; 3 | @value folder from "./folder/folder.css"; 4 | 5 | .booga { background: green; } 6 | .looga { composes: booga; } 7 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/namespace-expansion/a.css: -------------------------------------------------------------------------------- 1 | @value b1, b2 from "./b.css"; 2 | 3 | .someClass { 4 | color: b1; 5 | background-color: b2; 6 | } -------------------------------------------------------------------------------- /packages/processor/test/specimens/namespace-expansion/b.css: -------------------------------------------------------------------------------- 1 | @value * as c from "./c.css"; 2 | 3 | @value b1: c.1; 4 | @value b2: c.1 + var(--other); 5 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/namespace-expansion/c.css: -------------------------------------------------------------------------------- 1 | @value 1: cyan; -------------------------------------------------------------------------------- /packages/processor/test/specimens/overlapping/entry1.css: -------------------------------------------------------------------------------- 1 | .one { 2 | composes: one from "./tier1.css"; 3 | } 4 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/overlapping/entry2.css: -------------------------------------------------------------------------------- 1 | .two { 2 | composes: one from "./tier1.css"; 3 | } 4 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/overlapping/tier1.css: -------------------------------------------------------------------------------- 1 | .one { 2 | composes: two from "./tier2.css"; 3 | } 4 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/overlapping/tier2.css: -------------------------------------------------------------------------------- 1 | .two { 2 | composes: three from "./tier3.css"; 3 | } 4 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/overlapping/tier3.css: -------------------------------------------------------------------------------- 1 | .three { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/relative.css: -------------------------------------------------------------------------------- 1 | .wooga { 2 | color: red; 3 | background: url("./folder/to.png"); 4 | } 5 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/simple.css: -------------------------------------------------------------------------------- 1 | .wooga { color: red; } 2 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/start.css: -------------------------------------------------------------------------------- 1 | @value one, two, folder from "./local.css"; 2 | .wooga { composes: booga from "./local.css"; } 3 | .booga { color: one; background: two; } 4 | .tooga { border: 1px solid folder; } 5 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/value-alias.css: -------------------------------------------------------------------------------- 1 | @value a as colorRed from "./values.css"; 2 | @value b as colorBlue from "./values.css"; 3 | 4 | .aliased { 5 | color: colorRed; 6 | background: colorBlue; 7 | } -------------------------------------------------------------------------------- /packages/processor/test/specimens/value-composition.css: -------------------------------------------------------------------------------- 1 | @value a, b from "./values.css"; 2 | 3 | .red { 4 | color: a; 5 | background: b; 6 | } 7 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/value-export.css: -------------------------------------------------------------------------------- 1 | @value * as colors from "./value-import.css"; 2 | 3 | .red { 4 | color: colors.a; 5 | } 6 | 7 | .green { 8 | color: colors.b; 9 | } 10 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/value-import.css: -------------------------------------------------------------------------------- 1 | @value * from "./values.css"; 2 | @value b: green; 3 | 4 | .red { 5 | color: a; 6 | } 7 | 8 | .green { 9 | color: b; 10 | } 11 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/value-namespace.css: -------------------------------------------------------------------------------- 1 | @value * as colors from "./values.css"; 2 | 3 | .red { 4 | color: colors.a; 5 | } 6 | 7 | .blue { 8 | color: colors.b; 9 | } 10 | 11 | .other { 12 | color: colors.base-other; 13 | } 14 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/value-references.css: -------------------------------------------------------------------------------- 1 | @value * as vals from "./values.css"; 2 | 3 | .aliased { 4 | color: vals.alias; 5 | background: vals.alias2; 6 | } 7 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/values.css: -------------------------------------------------------------------------------- 1 | @value a: red; 2 | @value b: blue; 3 | @value base: #FFF; 4 | @value base-other: #000; 5 | 6 | @value alias: b; 7 | @value alias2: alias; 8 | 9 | @value width: 1rem; 10 | @value height: 1rem; 11 | 12 | @value calcAlias: calc(width + height); 13 | -------------------------------------------------------------------------------- /packages/processor/test/specimens/warnings.css: -------------------------------------------------------------------------------- 1 | @value one: green; 2 | @value * from "./local.css"; -------------------------------------------------------------------------------- /packages/processor/test/unicode.test.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const namer = require("@modular-css/test-utils/namer.js"); 4 | const Processor = require("../processor.js"); 5 | 6 | describe("/processor.js", () => { 7 | describe("unicode", () => { 8 | let processor; 9 | 10 | beforeEach(() => { 11 | processor = new Processor({ 12 | namer, 13 | }); 14 | }); 15 | 16 | it("should support unicode classes & ids", async () => { 17 | await processor.file(require.resolve("./specimens/unicode.css")); 18 | 19 | const { css } = await processor.output({ 20 | to : "./packages/processor/test/output/unicode.css", 21 | }); 22 | 23 | expect(css).toMatchSnapshot(); 24 | }); 25 | }); 26 | }); 27 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/formats/amd.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require("path"); 4 | 5 | const escape = require("escape-string-regexp"); 6 | 7 | const search = `'use strict';`; 8 | 9 | exports.regex = (deps) => { 10 | const parts = deps.map((dep) => 11 | escape(dep.replace(path.extname(dep), "")) 12 | ); 13 | 14 | return new RegExp( 15 | `require\\(\\[['"]\\.\\/(${parts.join("|")})['"]\\], resolve, reject\\)`, 16 | "g" 17 | ); 18 | }; 19 | 20 | exports.loader = ({ content, str }) => { 21 | const s = str.toString(); 22 | const i = s.indexOf(search); 23 | 24 | // + 1 is for the newline... 25 | str.appendRight( 26 | i + search.length + 1, 27 | `${content}\n` 28 | ); 29 | }; 30 | 31 | exports.load = (options, imports, statement) => ` 32 | Promise.all([ 33 | ${imports}, 34 | new Promise(function (resolve, reject) { ${statement} }) 35 | ]) 36 | .then((results) => resolve(results[results.length - 1])) 37 | .catch(reject) 38 | `; 39 | 40 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/formats/es.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const escape = require("escape-string-regexp"); 4 | 5 | exports.regex = (deps) => { 6 | const parts = deps.map(escape); 7 | 8 | return new RegExp( 9 | `\\bimport\\(['"]\\.\\/(${parts.join("|")})['"]\\)`, 10 | "g" 11 | ); 12 | }; 13 | 14 | exports.loader = ({ content, str }) => str.prepend(`${content}\n`); 15 | 16 | exports.load = (options, imports, statement) => ` 17 | Promise.all([ 18 | ${imports}, 19 | ${statement} 20 | ]) 21 | .then((results) => results[results.length - 1]) 22 | `; 23 | 24 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/formats/system.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const escape = require("escape-string-regexp"); 4 | 5 | const search = `'use strict';`; 6 | 7 | exports.regex = (deps) => { 8 | const parts = deps.map(escape); 9 | 10 | return new RegExp( 11 | `\\bmodule\\.import\\(['"]\\.\\/(${parts.join("|")})['"]\\)`, 12 | "g" 13 | ); 14 | }; 15 | 16 | exports.loader = ({ content, str }) => { 17 | const s = str.toString(); 18 | const i = s.indexOf(search); 19 | 20 | // + 1 is for the newline... 21 | str.appendRight( 22 | i + search.length + 1, 23 | `${content}\n` 24 | ); 25 | }; 26 | 27 | exports.load = (options, imports, statement) => ` 28 | Promise.all([ 29 | ${imports}, 30 | ${statement} 31 | ]) 32 | .then((results) => results[results.length - 1]) 33 | `; 34 | 35 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/rollup-rewriter", 3 | "version": "28.0.1", 4 | "description": "Rewrite dynamic imports to include all their CSS dependencies", 5 | "main": "./rewriter.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/rollup-rewriter" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "rollup", 22 | "rollup-plugin", 23 | "css", 24 | "css-modules", 25 | "modular-css", 26 | "postcss" 27 | ], 28 | "dependencies": { 29 | "dedent": "^0.7.0", 30 | "dependency-graph": "^0.11.0", 31 | "escape-string-regexp": "^4.0.0", 32 | "magic-string": "^0.30.0" 33 | }, 34 | "peerDependencies": { 35 | "rollup": "^2 || ^3 || ^4" 36 | } 37 | } -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-imports/a.css: -------------------------------------------------------------------------------- 1 | .a { 2 | color: aqua; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-imports/a.js: -------------------------------------------------------------------------------- 1 | import css from "./a.css"; 2 | 3 | export default function() { 4 | console.log(css); 5 | 6 | import("./c.js").then(console.log); 7 | } 8 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-imports/b.css: -------------------------------------------------------------------------------- 1 | .b { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-imports/b.js: -------------------------------------------------------------------------------- 1 | import css from "./b.css"; 2 | 3 | export default function() { 4 | console.log(css); 5 | 6 | import("./d.js").then(console.log); 7 | } 8 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-imports/c.css: -------------------------------------------------------------------------------- 1 | .c { 2 | color: cyan; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-imports/c.js: -------------------------------------------------------------------------------- 1 | import css from "./c.css"; 2 | 3 | console.log(css); 4 | 5 | export default css; 6 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-imports/d.css: -------------------------------------------------------------------------------- 1 | .d { 2 | color: darkred; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-imports/d.js: -------------------------------------------------------------------------------- 1 | import css from "./d.css"; 2 | 3 | console.log(css); 4 | 5 | export default css; 6 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-shared-imports/dynamic1.css: -------------------------------------------------------------------------------- 1 | .dynamic1 { 2 | color: dynamic1; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-shared-imports/dynamic1.js: -------------------------------------------------------------------------------- 1 | import static1 from "./static1.js"; 2 | 3 | import css from "./dynamic1.css"; 4 | 5 | console.log(static1, css); 6 | 7 | export default "dynamic1.js"; 8 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-shared-imports/entry1.css: -------------------------------------------------------------------------------- 1 | .entry1 { 2 | color: entry1; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-shared-imports/entry1.js: -------------------------------------------------------------------------------- 1 | import static1 from "./static1.js"; 2 | 3 | import css from "./entry1.css"; 4 | 5 | console.log(static1, css); 6 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-shared-imports/entry2.css: -------------------------------------------------------------------------------- 1 | .entry2 { 2 | color: entry2; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-shared-imports/entry2.js: -------------------------------------------------------------------------------- 1 | import css from "./entry2.css"; 2 | 3 | console.log(css); 4 | 5 | (function() { 6 | import("./dynamic1.js").then(console.log); 7 | }()); 8 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-shared-imports/static1.css: -------------------------------------------------------------------------------- 1 | .static1 { 2 | color: static1; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/dynamic-shared-imports/static1.js: -------------------------------------------------------------------------------- 1 | import css from "./static1.css"; 2 | 3 | console.log(css); 4 | 5 | export default "static1.js"; 6 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/external-import/a.css: -------------------------------------------------------------------------------- 1 | .a { color: aqua; } 2 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/external-import/a.js: -------------------------------------------------------------------------------- 1 | import external from "external"; 2 | import css from "./a.css"; 3 | 4 | export default function() { 5 | console.log(css, external); 6 | 7 | import("./c.js").then(console.log); 8 | } 9 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/external-import/c.css: -------------------------------------------------------------------------------- 1 | .c { 2 | color: cyan; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/external-import/c.js: -------------------------------------------------------------------------------- 1 | import css from "./c.css"; 2 | 3 | console.log(css); 4 | 5 | export default css; 6 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/no-asset-imports/a.css: -------------------------------------------------------------------------------- 1 | .a { color: aqua; } 2 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/no-asset-imports/a.js: -------------------------------------------------------------------------------- 1 | import css from "./a.css"; 2 | 3 | console.log(css); 4 | 5 | import("./c.js").then(console.log); 6 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/no-asset-imports/b.css: -------------------------------------------------------------------------------- 1 | .b { color: blue; } 2 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/no-asset-imports/b.js: -------------------------------------------------------------------------------- 1 | import css from "./b.css"; 2 | 3 | console.log(css); 4 | 5 | import("./d.js").then(console.log); 6 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/no-asset-imports/c.css: -------------------------------------------------------------------------------- 1 | .c { color: crimson; } 2 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/no-asset-imports/c.js: -------------------------------------------------------------------------------- 1 | import css from "./c.css"; 2 | 3 | console.log(css); 4 | 5 | export default "c"; 6 | -------------------------------------------------------------------------------- /packages/rollup-rewriter/test/specimens/no-asset-imports/d.js: -------------------------------------------------------------------------------- 1 | export default "d"; 2 | -------------------------------------------------------------------------------- /packages/rollup/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/rollup/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/rollup/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/rollup", 3 | "version": "29.1.1", 4 | "description": "Add modular-css support to rollup", 5 | "main": "./rollup.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/rollup" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "rollup", 22 | "rollup-plugin", 23 | "css", 24 | "css-modules", 25 | "modular-css", 26 | "postcss" 27 | ], 28 | "dependencies": { 29 | "@modular-css/css-to-js": "^29.1.1", 30 | "@modular-css/processor": "^29.0.4", 31 | "@rollup/pluginutils": "^5.1.0", 32 | "slash": "^3.0.0" 33 | }, 34 | "peerDependencies": { 35 | "rollup": "^2.21.0 || ^3 || ^4" 36 | } 37 | } -------------------------------------------------------------------------------- /packages/rollup/test/output/.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore everything in this directory 2 | * 3 | # Except this file 4 | !.gitignore 5 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/all-value-types/all-value-types.css: -------------------------------------------------------------------------------- 1 | @value * as ns from "./values1.css"; 2 | @value background from "./values2.css"; 3 | 4 | @value border: 1px solid black; 5 | 6 | .namespaced { 7 | color: ns.color; 8 | background: background; 9 | border: border; 10 | } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/all-value-types/all-value-types.js: -------------------------------------------------------------------------------- 1 | import css from "./all-value-types.css"; 2 | 3 | console.log(css); -------------------------------------------------------------------------------- /packages/rollup/test/specimens/all-value-types/values1.css: -------------------------------------------------------------------------------- 1 | @value color: red; 2 | @value other: blue; -------------------------------------------------------------------------------- /packages/rollup/test/specimens/all-value-types/values2.css: -------------------------------------------------------------------------------- 1 | @value background: green; -------------------------------------------------------------------------------- /packages/rollup/test/specimens/casing/bar.css: -------------------------------------------------------------------------------- 1 | .bar { 2 | display: none; 3 | } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/casing/foo.css: -------------------------------------------------------------------------------- 1 | .foo { 2 | composes: bar from "./bar.css"; 3 | composes: bar from "../Casing/bar.css"; 4 | 5 | color: #F00; 6 | } 7 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/casing/main.js: -------------------------------------------------------------------------------- 1 | import { foo } from "./foo.css"; 2 | import { bar } from "../Casing/bar.css"; 3 | 4 | import { bar as bar2 } from "../casing/bar.css"; 5 | 6 | console.log({ foo, bar, bar2 }); 7 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/circular-dependencies/a.css: -------------------------------------------------------------------------------- 1 | .a { color: aqua; } 2 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/circular-dependencies/a.js: -------------------------------------------------------------------------------- 1 | import b from "./b.js"; 2 | import css from "./a.css"; 3 | 4 | console.log(css, b); 5 | 6 | export default "a"; 7 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/circular-dependencies/b.css: -------------------------------------------------------------------------------- 1 | .b { color: blue; } 2 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/circular-dependencies/b.js: -------------------------------------------------------------------------------- 1 | import a from "./a.js"; 2 | import css from "./b.css"; 3 | 4 | console.log(css, a); 5 | 6 | export default "b"; 7 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/class-value-overlap/class-value-overlap.css: -------------------------------------------------------------------------------- 1 | @value foo: blue; 2 | 3 | .foo { color: foo; } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/class-value-overlap/class-value-overlap.js: -------------------------------------------------------------------------------- 1 | import css from "./class-value-overlap.css"; 2 | 3 | console.log(css); -------------------------------------------------------------------------------- /packages/rollup/test/specimens/common-splitting/a.css: -------------------------------------------------------------------------------- 1 | .a { 2 | composes: shared from "./shared.css"; 3 | 4 | color: aqua; 5 | } 6 | 7 | .a2 { 8 | composes: shared2 from "./shared2.css"; 9 | 10 | color: azure; 11 | } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/common-splitting/a.js: -------------------------------------------------------------------------------- 1 | import css from "./a.css"; 2 | import js from "./b.js"; 3 | 4 | console.log(css, js); 5 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/common-splitting/b.css: -------------------------------------------------------------------------------- 1 | .b { 2 | composes: shared from "./shared.css"; 3 | 4 | color: blue; 5 | } 6 | 7 | .b2 { 8 | composes: shared3 from "./shared3.css"; 9 | 10 | color: blanchedalmond; 11 | } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/common-splitting/b.js: -------------------------------------------------------------------------------- 1 | import css from "./b.css"; 2 | 3 | console.log(css); 4 | 5 | export default "b.js"; 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/common-splitting/c.css: -------------------------------------------------------------------------------- 1 | .c { 2 | color: cyan; 3 | } 4 | 5 | .c2 { 6 | composes: shared2 from "./shared2.css"; 7 | 8 | color: crimson; 9 | } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/common-splitting/c.js: -------------------------------------------------------------------------------- 1 | import css from "./c.css"; 2 | 3 | export default css; 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/common-splitting/shared.css: -------------------------------------------------------------------------------- 1 | .shared { 2 | color: snow; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/common-splitting/shared2.css: -------------------------------------------------------------------------------- 1 | .shared2 { 2 | color: sandybrown; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/common-splitting/shared3.css: -------------------------------------------------------------------------------- 1 | .shared3 { 2 | color: saddlebrown; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/composes-from-global/entry.js: -------------------------------------------------------------------------------- 1 | import style from "./one.css"; 2 | 3 | console.log(style); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/composes-from-global/one.css: -------------------------------------------------------------------------------- 1 | .out { 2 | composes: global(foo); 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/composes-from-invalid-js/entry.js: -------------------------------------------------------------------------------- 1 | import style from "./one.css"; 2 | 3 | console.log(style); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/composes-from-invalid-js/one.css: -------------------------------------------------------------------------------- 1 | .out { 2 | composes: foo-bar from "./two.css"; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/composes-from-invalid-js/two.css: -------------------------------------------------------------------------------- 1 | .foo-bar { 2 | color: salmon; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/composition-layers/composition-layers.css: -------------------------------------------------------------------------------- 1 | .a { 2 | color: red; 3 | } 4 | 5 | .b { 6 | composes: a; 7 | 8 | color: blue; 9 | } 10 | 11 | .c { 12 | composes: b; 13 | 14 | color: green; 15 | } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/composition-layers/composition-layers.js: -------------------------------------------------------------------------------- 1 | import css from "./composition-layers.css"; 2 | 3 | console.log(css); -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-chunks/a.css: -------------------------------------------------------------------------------- 1 | .a { 2 | composes: shared from "./shared.css"; 3 | 4 | color: aqua; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-chunks/a.js: -------------------------------------------------------------------------------- 1 | import css from "./a.css"; 2 | import js from "./c.js"; 3 | 4 | console.log(css, js); 5 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-chunks/b.css: -------------------------------------------------------------------------------- 1 | .b { 2 | composes: shared from "./shared.css"; 3 | 4 | color: blue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-chunks/b.js: -------------------------------------------------------------------------------- 1 | import css from "./b.css"; 2 | import js from "./c.js"; 3 | 4 | console.log(css, js); 5 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-chunks/c.css: -------------------------------------------------------------------------------- 1 | .c { 2 | composes: shared from "./shared.css"; 3 | 4 | color: cyan; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-chunks/c.js: -------------------------------------------------------------------------------- 1 | import css from "./c.css"; 2 | 3 | export default css; 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-chunks/shared.css: -------------------------------------------------------------------------------- 1 | .shared { 2 | color: snow; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-dependencies/a.css: -------------------------------------------------------------------------------- 1 | .a { 2 | composes: c from "./c.css"; 3 | 4 | color: aqua; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-dependencies/a.js: -------------------------------------------------------------------------------- 1 | import css from "./a.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-dependencies/b.css: -------------------------------------------------------------------------------- 1 | .b { 2 | composes: c from "./c.css"; 3 | 4 | color: blue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-dependencies/b.js: -------------------------------------------------------------------------------- 1 | import css from "./b.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/css-dependencies/c.css: -------------------------------------------------------------------------------- 1 | .c { 2 | color: cyan; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/dependencies.css: -------------------------------------------------------------------------------- 1 | .wooga { 2 | composes: fooga from "./simple.css"; 3 | 4 | background: blue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/dependencies.js: -------------------------------------------------------------------------------- 1 | import css from "./dependencies.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/dynamic-imports/a.css: -------------------------------------------------------------------------------- 1 | .a { 2 | composes: d from "./d.css"; 3 | 4 | color: aqua; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/dynamic-imports/a.js: -------------------------------------------------------------------------------- 1 | import css from "./a.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/dynamic-imports/b.css: -------------------------------------------------------------------------------- 1 | .b { 2 | composes: e from "./e.css"; 3 | 4 | color: blue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/dynamic-imports/b.js: -------------------------------------------------------------------------------- 1 | import css from "./b.css"; 2 | 3 | export default function() { 4 | console.log(css); 5 | 6 | import("./c.js").then(console.log); 7 | } 8 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/dynamic-imports/c.css: -------------------------------------------------------------------------------- 1 | .c { 2 | composes: d from "./d.css"; 3 | 4 | color: cyan; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/dynamic-imports/c.js: -------------------------------------------------------------------------------- 1 | import css from "./c.css"; 2 | 3 | console.log(css); 4 | 5 | export default css; 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/dynamic-imports/d.css: -------------------------------------------------------------------------------- 1 | .d { 2 | composes: f from "./f.css"; 3 | 4 | color: darkred; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/dynamic-imports/e.css: -------------------------------------------------------------------------------- 1 | .e { 2 | color: #EEE; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/dynamic-imports/f.css: -------------------------------------------------------------------------------- 1 | .f { 2 | color: floralwhite; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/empty.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tivac/modular-css/9b032a3d7008a9775273e3942cdd28caeca8ff40/packages/rollup/test/specimens/empty.css -------------------------------------------------------------------------------- /packages/rollup/test/specimens/empty.js: -------------------------------------------------------------------------------- 1 | import css from "./empty.css"; 2 | 3 | console.log(css); -------------------------------------------------------------------------------- /packages/rollup/test/specimens/external-value-aliasing/external-value-aliasing.css: -------------------------------------------------------------------------------- 1 | @value a as colorRed from "./intermediate.css"; 2 | @value b as colorBlue from "./intermediate.css"; 3 | 4 | .aliased { 5 | color: colorRed; 6 | background: colorBlue; 7 | } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/external-value-aliasing/external-value-aliasing.js: -------------------------------------------------------------------------------- 1 | import css from "./external-value-aliasing.css"; 2 | 3 | console.log(css); -------------------------------------------------------------------------------- /packages/rollup/test/specimens/external-value-aliasing/intermediate.css: -------------------------------------------------------------------------------- 1 | @value a from "./source.css"; 2 | @value b from "./source.css"; 3 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/external-value-aliasing/source.css: -------------------------------------------------------------------------------- 1 | @value a: red; 2 | @value b: blue; 3 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/external.js: -------------------------------------------------------------------------------- 1 | import simple from "./simple.js"; 2 | 3 | console.log(simple); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/file-extension/entry.js: -------------------------------------------------------------------------------- 1 | import style from "./style.cssx"; 2 | 3 | console.log(style); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/file-extension/style.cssx: -------------------------------------------------------------------------------- 1 | .style { 2 | color: salmon; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/internal-external-composition/internal-external-composition.css: -------------------------------------------------------------------------------- 1 | .one { 2 | color: red; 3 | } 4 | 5 | .two { 6 | composes: other from "./other.css"; 7 | composes: one; 8 | 9 | background: blue; 10 | } 11 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/internal-external-composition/internal-external-composition.js: -------------------------------------------------------------------------------- 1 | import css from "./internal-external-composition.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/internal-external-composition/other.css: -------------------------------------------------------------------------------- 1 | .other { 2 | color: green; 3 | } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/invalid-name.css: -------------------------------------------------------------------------------- 1 | .fooga { color: red; } 2 | .fooga-wooga { color: red; } 3 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/invalid-name.js: -------------------------------------------------------------------------------- 1 | import css, {fooga} from "./invalid-name.css"; 2 | 3 | console.log(css, fooga); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/local-composition.css: -------------------------------------------------------------------------------- 1 | .one { 2 | color: red; 3 | } 4 | 5 | .two { 6 | composes: one; 7 | 8 | background: blue; 9 | } 10 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/local-composition.js: -------------------------------------------------------------------------------- 1 | import css from "./local-composition.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/manual-chunks/a.css: -------------------------------------------------------------------------------- 1 | .a { 2 | composes: c from "./c.css"; 3 | 4 | color: red; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/manual-chunks/a.js: -------------------------------------------------------------------------------- 1 | import css from "./a.css"; 2 | import c from "./c.js"; 3 | 4 | console.log(c); 5 | 6 | export default css; 7 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/manual-chunks/b.css: -------------------------------------------------------------------------------- 1 | .b { 2 | composes: c from "./c.css"; 3 | 4 | color: blue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/manual-chunks/b.js: -------------------------------------------------------------------------------- 1 | import css from "./b.css"; 2 | import c from "./c.js"; 3 | 4 | console.log(c); 5 | 6 | export default css; 7 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/manual-chunks/c.css: -------------------------------------------------------------------------------- 1 | @value d from "./d.css"; 2 | 3 | .c { 4 | color: green; 5 | background: d; 6 | } 7 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/manual-chunks/c.js: -------------------------------------------------------------------------------- 1 | import css from "./c.css"; 2 | 3 | export default css; 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/manual-chunks/d.css: -------------------------------------------------------------------------------- 1 | @value d: darkred; 2 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/metadata/a.css: -------------------------------------------------------------------------------- 1 | .a { color: aqua; } 2 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/metadata/a.js: -------------------------------------------------------------------------------- 1 | import c from "./c.js"; 2 | import css from "./a.css"; 3 | 4 | console.log(css, c); 5 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/metadata/b.css: -------------------------------------------------------------------------------- 1 | .b { color: blue; } 2 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/metadata/b.js: -------------------------------------------------------------------------------- 1 | import c from "./c.js"; 2 | import css from "./b.css"; 3 | 4 | console.log(css, c); 5 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/metadata/c.js: -------------------------------------------------------------------------------- 1 | import("./d.js").then(console.log); 2 | 3 | export default "c"; 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/metadata/d.css: -------------------------------------------------------------------------------- 1 | .d { color: darkkhaki; } 2 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/metadata/d.js: -------------------------------------------------------------------------------- 1 | import css from "./d.css"; 2 | 3 | console.log(css); 4 | 5 | export default "d"; 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/multi-selector/multi-selector.css: -------------------------------------------------------------------------------- 1 | .ms { 2 | composes: other from "./other.css"; 3 | } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/multi-selector/multi-selector.js: -------------------------------------------------------------------------------- 1 | import css from "./multi-selector.css"; 2 | 3 | console.log(css); -------------------------------------------------------------------------------- /packages/rollup/test/specimens/multi-selector/other.css: -------------------------------------------------------------------------------- 1 | .other, 2 | .other:visited { 3 | color: red; 4 | } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/multiple-chunks/a.css: -------------------------------------------------------------------------------- 1 | .a { 2 | composes: a from "./subfolder/a.css"; 3 | 4 | color: aqua; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/multiple-chunks/a.js: -------------------------------------------------------------------------------- 1 | import css from "./a.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/multiple-chunks/b.css: -------------------------------------------------------------------------------- 1 | .b { 2 | composes: a from "./subfolder/a.css"; 3 | 4 | color: blue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/multiple-chunks/b.js: -------------------------------------------------------------------------------- 1 | import css from "./b.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/multiple-chunks/subfolder/a.css: -------------------------------------------------------------------------------- 1 | .a { color: azure; } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/named.css: -------------------------------------------------------------------------------- 1 | @value str: "string"; 2 | @value num: 10; 3 | @value dim: 10px; 4 | @value mix: 1px solid red; 5 | 6 | .a { 7 | color: red; 8 | } 9 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/named.js: -------------------------------------------------------------------------------- 1 | import { a } from "./named.css"; 2 | 3 | console.log(a); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/namespaced/namespaced.css: -------------------------------------------------------------------------------- 1 | @value * as ns from "./values.css"; 2 | 3 | .namespaced { 4 | color: ns.color; 5 | } -------------------------------------------------------------------------------- /packages/rollup/test/specimens/namespaced/namespaced.js: -------------------------------------------------------------------------------- 1 | import css from "./namespaced.css"; 2 | 3 | console.log(css); -------------------------------------------------------------------------------- /packages/rollup/test/specimens/namespaced/values.css: -------------------------------------------------------------------------------- 1 | @value color: red; 2 | @value other: blue; -------------------------------------------------------------------------------- /packages/rollup/test/specimens/no-css.js: -------------------------------------------------------------------------------- 1 | console.log("hello"); 2 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/relative-paths.css: -------------------------------------------------------------------------------- 1 | .wooga { 2 | color: red; 3 | background: url("./folder/to.png"); 4 | } 5 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/relative-paths.js: -------------------------------------------------------------------------------- 1 | import css from "./relative-paths.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/repeated-references/a.css: -------------------------------------------------------------------------------- 1 | .a { 2 | composes: c from "./c.css"; 3 | 4 | color: red; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/repeated-references/a.js: -------------------------------------------------------------------------------- 1 | import css from "./a.css"; 2 | import b from "./b.js"; 3 | 4 | console.log(css, b); 5 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/repeated-references/b.css: -------------------------------------------------------------------------------- 1 | .b { 2 | composes: c from "./c.css"; 3 | 4 | color: blue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/repeated-references/b.js: -------------------------------------------------------------------------------- 1 | import css from "./b.css"; 2 | 3 | export default css; 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/repeated-references/c.css: -------------------------------------------------------------------------------- 1 | .c { 2 | color: cadetblue; 3 | } 4 | 5 | .other { 6 | composes: d from "./d.css"; 7 | } 8 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/repeated-references/d.css: -------------------------------------------------------------------------------- 1 | .d { 2 | color: darkblue; 3 | } 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/simple.css: -------------------------------------------------------------------------------- 1 | @value str: "string"; 2 | 3 | .fooga { 4 | color: red; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/simple.js: -------------------------------------------------------------------------------- 1 | import css from "./simple.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/stripped-dynamic-imports/a.js: -------------------------------------------------------------------------------- 1 | export default false ? import('./b.js') : null; 2 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/stripped-dynamic-imports/b.js: -------------------------------------------------------------------------------- 1 | export default "hi"; 2 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/style-export.css: -------------------------------------------------------------------------------- 1 | @value str: "string"; 2 | 3 | .ooh { 4 | content: str; 5 | } 6 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/style-export.js: -------------------------------------------------------------------------------- 1 | import { styles } from "./style-export.css"; 2 | 3 | console.log(styles); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/topological-order/topological-order.css: -------------------------------------------------------------------------------- 1 | .b { 2 | border: 1px solid red; 3 | } 4 | 5 | .a { 6 | composes: b; 7 | background: blue; 8 | } 9 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/topological-order/topological-order.js: -------------------------------------------------------------------------------- 1 | import css from "./topological-order.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/tree-shaking.css: -------------------------------------------------------------------------------- 1 | .fooga { color: red; } 2 | .wooga { color: blue; } 3 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/tree-shaking.js: -------------------------------------------------------------------------------- 1 | import { fooga } from "./tree-shaking.css"; 2 | 3 | console.log(fooga); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/value-camel-overlap.css: -------------------------------------------------------------------------------- 1 | @value colorBlack: #000; 2 | @value color-black: #000; 3 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/value-camel-overlap.js: -------------------------------------------------------------------------------- 1 | import css from "./value-camel-overlap.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/rollup/test/specimens/watch.js: -------------------------------------------------------------------------------- 1 | import css from "../output/watched.css"; 2 | import css2 from "./simple.css"; 3 | 4 | console.log(css, css2); 5 | -------------------------------------------------------------------------------- /packages/stylelint-config/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/stylelint-config/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/stylelint-config/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/stylelint-config", 3 | "version": "28.0.0", 4 | "description": "Stylelint config to suport modular-css syntax", 5 | "main": "./stylelint.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/stylelint" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "stylelint", 22 | "stylelint-config", 23 | "css", 24 | "css-modules", 25 | "modular-css", 26 | "postcss" 27 | ] 28 | } 29 | -------------------------------------------------------------------------------- /packages/stylelint-config/stylelint.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = { 4 | rules : { 5 | "at-rule-no-unknown" : [ true, { 6 | ignoreAtRules : [ 7 | "value", 8 | "composes", 9 | ], 10 | }], 11 | 12 | "declaration-block-no-duplicate-properties" : [ true, { 13 | ignoreProperties : [ 14 | "composes", 15 | ], 16 | }], 17 | 18 | "property-no-unknown" : [ true, { 19 | ignoreProperties : [ 20 | "composes", 21 | ], 22 | }], 23 | 24 | "selector-pseudo-class-no-unknown" : [ true, { 25 | ignorePseudoClasses : [ 26 | "global", 27 | "external", 28 | ], 29 | }], 30 | }, 31 | }; 32 | -------------------------------------------------------------------------------- /packages/svelte/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/svelte/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2017 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/svelte/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/svelte", 3 | "version": "29.0.4", 4 | "description": "Add modular-css support to svelte", 5 | "main": "./svelte.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/svelte" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "svelte", 22 | "svelte-preprocess", 23 | "rollup", 24 | "rollup-plugin", 25 | "rollup-plugin-svelte", 26 | "css", 27 | "css-modules", 28 | "modular-css", 29 | "postcss" 30 | ], 31 | "dependencies": { 32 | "@modular-css/processor": "^29.0.4", 33 | "@rollup/pluginutils": "^5.0.2", 34 | "es-module-lexer": "^1.0.1", 35 | "escape-string-regexp": "^4.0.0", 36 | "is-url": "^1.2.4", 37 | "parse-es6-imports": "^1.0.1", 38 | "slash": "^3.0.0" 39 | }, 40 | "peerDependencies": { 41 | "svelte": ">1" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /packages/svelte/style.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { replaceTrailingNewlines } = require("./replacer.js"); 4 | 5 | const styleRegex = /]*?type=['"]text\/m-css['"][^>]*?>([\S\s]+?)<\/style>/im; 6 | 7 | exports.extractStyle = async ({ source, file, filename, processor, log }) => { 8 | styleRegex.lastIndex = 0; 9 | 10 | const style = source.match(styleRegex); 11 | 12 | if(!style) { 13 | return false; 14 | } 15 | 16 | log("extract 36 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/dependencies.css: -------------------------------------------------------------------------------- 1 | .wooga { 2 | composes: fooga from "./simple.css"; 3 | 4 | background: blue; 5 | } 6 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/empty.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tivac/modular-css/9b032a3d7008a9775273e3942cdd28caeca8ff40/packages/svelte/test/specimens/empty.css -------------------------------------------------------------------------------- /packages/svelte/test/specimens/error-link-non-css.svelte: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/error-link.svelte: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/error-script.svelte: -------------------------------------------------------------------------------- 1 | 4 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/error-style.svelte: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/error.css: -------------------------------------------------------------------------------- 1 | .fooga { color: #F00; } 2 | .wooga { composes: foog; } 3 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/external.css: -------------------------------------------------------------------------------- 1 | @value color: #BEEFED; 2 | 3 | .flex { 4 | display: flex; 5 | } 6 | 7 | .wrapper { 8 | composes: flex; 9 | } 10 | 11 | .hd { 12 | composes: flex; 13 | composes: fooga from "./simple.css"; 14 | } 15 | 16 | .bd { 17 | composes: wooga from "./dependencies.css"; 18 | } 19 | 20 | .text { 21 | color: #000; 22 | } 23 | 24 | .active { 25 | color: #F00; 26 | } 27 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/inline-chunking/a-dep.css: -------------------------------------------------------------------------------- 1 | .adep { 2 | margin: 5px; 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/inline-chunking/a.svelte: -------------------------------------------------------------------------------- 1 |
A.SVELTE
2 | 3 | 11 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/inline-chunking/b-dep.css: -------------------------------------------------------------------------------- 1 | .bdep { 2 | padding: 5px; 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/inline-chunking/b.svelte: -------------------------------------------------------------------------------- 1 |
B.SVELTE
2 | 3 | 11 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/inline-chunking/shared.css: -------------------------------------------------------------------------------- 1 | .shared { 2 | background: black; 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/invalid-link-empty.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
NOPE
4 |
NOPEDY NOPE
5 |
STILL NOPE
6 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/invalid-link-script.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Yup

4 | 5 | 9 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/invalid-link-template.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |

Nope

4 |

Yup

5 |

Still Nope

6 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/invalid-script-empty.svelte: -------------------------------------------------------------------------------- 1 |
NOPE
2 |
NOPEDY NOPE
3 |
STILL NOPE
4 | 5 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/invalid-script-script.svelte: -------------------------------------------------------------------------------- 1 |

Yup

2 | 3 | 9 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/invalid-script-template.svelte: -------------------------------------------------------------------------------- 1 |

Nope

2 |

Yup

3 |

Still Nope

4 | 5 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/invalid-style-empty.svelte: -------------------------------------------------------------------------------- 1 |
NOPE
2 |
STILL NOPE
3 | 4 | 6 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/invalid-style-script.svelte: -------------------------------------------------------------------------------- 1 |

Yup

2 | 3 | 6 | 7 | 11 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/invalid-style-template.svelte: -------------------------------------------------------------------------------- 1 |

Nope

2 |

Yup

3 |

Also Nope

4 | 5 | 8 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/invalid.css: -------------------------------------------------------------------------------- 1 | .yup { 2 | color: yellow; 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/link-component.svelte: -------------------------------------------------------------------------------- 1 |
2 | 3 |
4 | 5 | 6 | 15 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/link-resolving.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
fooga
4 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/link-script.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

Head

5 |
6 |

Text

7 |
8 |
9 | 10 | 25 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/link-single.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

Head

5 |
6 |

Text

7 |
8 |
9 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/link-unquoted.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

Head

5 |
6 |

Text

7 |
8 |
9 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/link-values.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
8 |
9 | 10 | 18 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/link.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 |

Head

5 |
6 |

Text

7 |
8 |
9 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/multiple-link.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
fooga
5 |
booga
6 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/multiple-url.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
fooga
5 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/overlapping/entry1.svelte: -------------------------------------------------------------------------------- 1 | 6 | entry1 7 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/overlapping/entry2.svelte: -------------------------------------------------------------------------------- 1 | 6 | entry2 7 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/overlapping/tier1.css: -------------------------------------------------------------------------------- 1 | .one { 2 | composes: two from "./tier2.css"; 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/overlapping/tier2.css: -------------------------------------------------------------------------------- 1 | .two { 2 | composes: three from "./tier3.css"; 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/overlapping/tier3.css: -------------------------------------------------------------------------------- 1 | .three { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/script-multiple.svelte: -------------------------------------------------------------------------------- 1 |
2 |

Head

3 |
4 |

Text

5 |
6 |
7 | 8 | 11 | 12 | 17 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/script-unmatched.svelte: -------------------------------------------------------------------------------- 1 |
2 |

Head

3 |
4 |

Text

5 |
6 |
7 | 8 | 14 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/script.svelte: -------------------------------------------------------------------------------- 1 |
2 |

Head

3 |
4 |

Text

5 |
6 |
7 | 8 | 13 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/simple.css: -------------------------------------------------------------------------------- 1 | .fooga { 2 | color: red; 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/simple2.css: -------------------------------------------------------------------------------- 1 | .booga { 2 | color: blue; 3 | } 4 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/style-no-attribute.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 8 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/style.svelte: -------------------------------------------------------------------------------- 1 |
2 |

Head

3 |
4 |

Text

5 |
6 |
7 | 8 | 34 | 35 | 42 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/unquoted.svelte: -------------------------------------------------------------------------------- 1 |
2 | I'm not quoted lol 3 |
Me either!
4 |
5 | 6 |
7 | But I am! 8 |
9 | 10 | 19 | -------------------------------------------------------------------------------- /packages/svelte/test/specimens/url.svelte: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
fooga
5 | -------------------------------------------------------------------------------- /packages/test-utils/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/test-utils/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/test-utils/case-sensitive-fs.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | let sensitive = false; 4 | 5 | try { 6 | require.resolve(__filename.toUpperCase()); 7 | } catch(e) { 8 | sensitive = true; 9 | } 10 | 11 | module.exports = sensitive; 12 | -------------------------------------------------------------------------------- /packages/test-utils/exists.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require("path"); 4 | 5 | const shell = require("shelljs"); 6 | 7 | module.exports = (cwd) => 8 | (name) => shell.test("-f", path.join(cwd, "./output", name)); 9 | -------------------------------------------------------------------------------- /packages/test-utils/expect/toMatchDiffSnapshot.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const snapshot = require("jest-snapshot"); 4 | const snapshotDiff = require("snapshot-diff"); 5 | 6 | const defaults = { 7 | stablePatchmarks : true, 8 | }; 9 | 10 | expect.extend({ 11 | toMatchDiffSnapshot( 12 | valueA, 13 | valueB, 14 | options = {}, 15 | testName = "", 16 | ) { 17 | const difference = snapshotDiff(valueA, valueB, { ...defaults, ...options }); 18 | 19 | return snapshot.toMatchSnapshot.call(this, difference, testName); 20 | }, 21 | }); 22 | -------------------------------------------------------------------------------- /packages/test-utils/expect/toMatchLogspySnapshot.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require("path"); 4 | 5 | const snapshot = require("jest-snapshot"); 6 | 7 | const relative = require("../relative.js"); 8 | 9 | expect.extend({ 10 | toMatchLogspySnapshot(spy) { 11 | if(!spy || !spy.mock) { 12 | // eslint-disable-next-line no-console -- booooooom 13 | console.log({ spy, "spy.mock" : spy.mock }); 14 | 15 | return { 16 | message : () => `Invalid spy passed to .toMatchLogspySnapshot()`, 17 | pass : false, 18 | }; 19 | } 20 | 21 | const calls = spy.mock.calls.map((call) => 22 | call.map((arg) => { 23 | if(typeof arg !== "string") { 24 | return arg; 25 | } 26 | 27 | return arg 28 | .split(/\r?\n/) 29 | .map((line) => (path.isAbsolute(line.trim()) ? 30 | relative([ line.trim() ])[0] : 31 | line) 32 | ) 33 | .join("\n"); 34 | }) 35 | ); 36 | 37 | return snapshot.toMatchSnapshot.call(this, calls); 38 | }, 39 | }); 40 | -------------------------------------------------------------------------------- /packages/test-utils/expect/toMatchRollupAssetSnapshot.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { toMatchSnapshot } = require("jest-snapshot"); 4 | 5 | expect.extend({ 6 | toMatchRollupAssetSnapshot({ output }) { 7 | const assets = new Map(); 8 | 9 | output.forEach(({ type, fileName, source }) => { 10 | if(type !== "asset") { 11 | return; 12 | } 13 | 14 | assets.set(fileName, `\n${source}`); 15 | }); 16 | 17 | const out = Object.create(null); 18 | 19 | // Ensure out object is in a consistent order 20 | [ ...assets.keys() ].sort().forEach((key) => { 21 | out[key] = assets.get(key); 22 | }); 23 | 24 | return toMatchSnapshot.call( 25 | this, 26 | out, 27 | ); 28 | }, 29 | }); 30 | -------------------------------------------------------------------------------- /packages/test-utils/expect/toMatchRollupCodeSnapshot.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { toMatchSnapshot } = require("jest-snapshot"); 4 | 5 | expect.extend({ 6 | toMatchRollupCodeSnapshot({ output }) { 7 | const chunks = new Map(); 8 | 9 | output.forEach(({ type, name, code }) => { 10 | if(type === "asset") { 11 | return; 12 | } 13 | 14 | chunks.set(name, `\n${code}`); 15 | }); 16 | 17 | const out = Object.create(null); 18 | 19 | // Ensure out object is in a consistent order 20 | [ ...chunks.keys() ].sort().forEach((key) => { 21 | out[key] = chunks.get(key); 22 | }); 23 | 24 | return toMatchSnapshot.call( 25 | this, 26 | out, 27 | ); 28 | }, 29 | }); 30 | -------------------------------------------------------------------------------- /packages/test-utils/expect/toMatchRollupSnapshot.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { toMatchSnapshot } = require("jest-snapshot"); 4 | 5 | expect.extend({ 6 | toMatchRollupSnapshot({ output }, name = "") { 7 | const things = new Map(); 8 | 9 | output.forEach(({ code, type, fileName, source }) => { 10 | // Leading newline to make diffs easier to read 11 | things.set(fileName, `\n${type === "asset" ? source : code}`); 12 | }); 13 | 14 | const out = Object.create(null); 15 | 16 | // Ensure out object is in a consistent order 17 | [ ...things.keys() ].sort().forEach((key) => { 18 | out[key] = things.get(key); 19 | }); 20 | 21 | return toMatchSnapshot.call( 22 | this, 23 | out, 24 | name, 25 | ); 26 | }, 27 | }); 28 | -------------------------------------------------------------------------------- /packages/test-utils/logs.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = (method = "log") => { 4 | const spy = jest.spyOn(global.console, method); 5 | 6 | spy.mockImplementation(() => { /* NO-OP */ }); 7 | 8 | return spy; 9 | }; 10 | -------------------------------------------------------------------------------- /packages/test-utils/namer.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | // Super simple namer fn for testing 4 | module.exports = (file, selector) => `mc_${selector}`; 5 | -------------------------------------------------------------------------------- /packages/test-utils/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/test-utils", 3 | "version": "28.1.3", 4 | "private": true, 5 | "description": "Test utilities for modular-css", 6 | "main": "compare.js", 7 | "author": "Pat Cavit ", 8 | "homepage": "https://m-css.com", 9 | "repository": { 10 | "type": "git", 11 | "url": "https://github.com/tivac/modular-css.git", 12 | "directory": "packages/test-utils" 13 | }, 14 | "license": "MIT" 15 | } 16 | -------------------------------------------------------------------------------- /packages/test-utils/prefix.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var path = require("path"); 4 | 5 | module.exports = (prefix) => 6 | (str) => path.join(prefix, str); 7 | -------------------------------------------------------------------------------- /packages/test-utils/read-dir.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const fs = require("fs"); 4 | const path = require("path"); 5 | 6 | const { readDirDeepSync : read } = require("read-dir-deep"); 7 | 8 | module.exports = (cwd) => 9 | (name) => { 10 | const dir = path.join(cwd, "./output", name); 11 | const files = read(dir); 12 | 13 | return files.sort().reduce((out, file) => { 14 | out[path.relative(dir, file).replace(/\\/g, "/")] = fs.readFileSync(file, "utf8"); 15 | 16 | return out; 17 | }, Object.create(null)); 18 | }; 19 | -------------------------------------------------------------------------------- /packages/test-utils/read.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | var fs = require("fs"), 4 | path = require("path"); 5 | 6 | module.exports = (cwd) => 7 | (name) => 8 | fs.readFileSync(path.join(cwd, "./output", name), "utf8"); 9 | -------------------------------------------------------------------------------- /packages/test-utils/relative.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const path = require("path"); 4 | 5 | const sepRegex = /\\/g; 6 | 7 | // Get a relative version of an absolute path w/ cross-platform/URL-friendly 8 | // directory separators 9 | module.exports = function(files) { 10 | var cwd = process.cwd(); 11 | 12 | return files.map((file) => 13 | path.relative(cwd, file).replace(sepRegex, "/") 14 | ); 15 | }; 16 | -------------------------------------------------------------------------------- /packages/test-utils/rollup-watching.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const defer = require("p-defer"); 4 | 5 | module.exports = (cb) => { 6 | let count = 0; 7 | 8 | return (details) => { 9 | if(details.code === "ERROR" || details.code === "FATAL") { 10 | throw details.error; 11 | } 12 | 13 | if(details.code !== "END") { 14 | return; 15 | } 16 | 17 | count++; 18 | 19 | cb(count, details); 20 | }; 21 | }; 22 | 23 | module.exports.promise = (watcher) => { 24 | let deferred; 25 | 26 | watcher.on("event", (e) => { 27 | if(e.code === "ERROR" || e.code === "FATAL") { 28 | return deferred && deferred.reject(e.error); 29 | } 30 | 31 | if(e.code !== "END") { 32 | // eslint-disable-next-line consistent-return -- shit happens 33 | return; 34 | } 35 | 36 | return deferred && deferred.resolve(e); 37 | }); 38 | 39 | const out = () => { 40 | deferred = defer(); 41 | 42 | return deferred.promise; 43 | }; 44 | 45 | out.close = () => watcher.close(); 46 | 47 | return out; 48 | }; 49 | -------------------------------------------------------------------------------- /packages/test-utils/warn.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | module.exports = function(css, result) { 4 | result.warn("warning"); 5 | }; 6 | 7 | module.exports.postcssPlugin = "Warning Plugin"; 8 | -------------------------------------------------------------------------------- /packages/test-utils/write.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const fs = require("fs"); 4 | const path = require("path"); 5 | 6 | const shell = require("shelljs"); 7 | const dedent = require("dedent"); 8 | 9 | module.exports = (cwd) => 10 | (name, contents) => { 11 | const dest = path.join(cwd, "./output", name); 12 | 13 | shell.mkdir("-p", path.dirname(dest)); 14 | 15 | fs.writeFileSync(dest, dedent(contents), "utf8"); 16 | }; 17 | -------------------------------------------------------------------------------- /packages/vite/.npmignore: -------------------------------------------------------------------------------- 1 | tests/ 2 | .* 3 | CHANGELOG.md 4 | -------------------------------------------------------------------------------- /packages/vite/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/vite", 3 | "version": "30.2.1", 4 | "description": "vite support for modular-css", 5 | "main": "./vite.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/tivac/modular-css.git", 9 | "directory": "packages/vite" 10 | }, 11 | "bugs": { 12 | "url": "https://github.com/tivac/modular-css/issues" 13 | }, 14 | "author": "Pat Cavit ", 15 | "homepage": "https://m-css.com", 16 | "license": "MIT", 17 | "publishConfig": { 18 | "access": "public" 19 | }, 20 | "keywords": [ 21 | "vite", 22 | "vite-plugin", 23 | "css", 24 | "css-modules", 25 | "modular-css", 26 | "postcss" 27 | ], 28 | "dependencies": { 29 | "@modular-css/css-to-js": "^29.1.1", 30 | "@modular-css/processor": "^29.0.4", 31 | "@rollup/pluginutils": "^5.0.2" 32 | }, 33 | "peerDependencies": { 34 | "vite": "^3 || ^4 || ^5 || ^6" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /packages/vite/tests/specimens/dynamic/a.mcss: -------------------------------------------------------------------------------- 1 | .a { 2 | composes: c from "../shared/dynamic-c.mcss"; 3 | 4 | color: red; 5 | } 6 | -------------------------------------------------------------------------------- /packages/vite/tests/specimens/dynamic/b.mcss: -------------------------------------------------------------------------------- 1 | .b { 2 | composes: c from "../shared/dynamic-c.mcss"; 3 | 4 | color: white; 5 | } 6 | -------------------------------------------------------------------------------- /packages/vite/tests/specimens/dynamic/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
A
5 | 6 |
B
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/vite/tests/specimens/dynamic/script.js: -------------------------------------------------------------------------------- 1 | const aEl = document.querySelector("#a"); 2 | const bEl = document.querySelector("#b"); 3 | 4 | (async function() { 5 | const a = await import("./a.mcss"); 6 | const b = await import("./b.mcss"); 7 | 8 | console.log({ a, b }); 9 | 10 | aEl.className = a.a; 11 | bEl.className = b.b; 12 | }()); 13 | 14 | -------------------------------------------------------------------------------- /packages/vite/tests/specimens/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tivac/modular-css/9b032a3d7008a9775273e3942cdd28caeca8ff40/packages/vite/tests/specimens/index.html -------------------------------------------------------------------------------- /packages/vite/tests/specimens/shared/dynamic-c.mcss: -------------------------------------------------------------------------------- 1 | .c { 2 | background-color: blue; 3 | 4 | width: 100px; 5 | height: 100px; 6 | } 7 | -------------------------------------------------------------------------------- /packages/vite/tests/specimens/shared/static-c.mcss: -------------------------------------------------------------------------------- 1 | .c { 2 | background-color: blue; 3 | 4 | width: 100px; 5 | height: 100px; 6 | } 7 | -------------------------------------------------------------------------------- /packages/vite/tests/specimens/static/a.mcss: -------------------------------------------------------------------------------- 1 | .a { 2 | composes: c from "../shared/static-c.mcss"; 3 | 4 | color: red; 5 | } 6 | -------------------------------------------------------------------------------- /packages/vite/tests/specimens/static/b.mcss: -------------------------------------------------------------------------------- 1 | .b { 2 | composes: c from "../shared/static-c.mcss"; 3 | 4 | color: white; 5 | } 6 | -------------------------------------------------------------------------------- /packages/vite/tests/specimens/static/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 |
A
5 | 6 |
B
7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /packages/vite/tests/specimens/static/script.js: -------------------------------------------------------------------------------- 1 | import a from "./a.mcss"; 2 | import b from "./b.mcss"; 3 | 4 | console.log({ a, b }); 5 | 6 | const aEl = document.querySelector("#a"); 7 | const bEl = document.querySelector("#b"); 8 | 9 | aEl.className = a.a; 10 | bEl.className = b.b; 11 | -------------------------------------------------------------------------------- /packages/webpack/.npmignore: -------------------------------------------------------------------------------- 1 | coverage/ 2 | profiling/ 3 | test/ 4 | .* 5 | CHANGELOG.md 6 | -------------------------------------------------------------------------------- /packages/webpack/LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Pat Cavit 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /packages/webpack/loader.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | 3 | const { transform } = require("@modular-css/css-to-js"); 4 | 5 | const DEFAULTS = { 6 | styleExport : true, 7 | namedExports : true, 8 | defaultExport : true, 9 | }; 10 | 11 | // Can't be an arrow function due to `this` usage :( 12 | module.exports = async function(source) { 13 | const options = { 14 | __proto__ : null, 15 | ...DEFAULTS, 16 | ...this.getOptions(), 17 | 18 | // Need this so webpack doesn't create terrible import 19 | // names that break snapshots 20 | relativeImports : true, 21 | }; 22 | 23 | const done = this.async(); 24 | const { processor } = this._compiler.options; 25 | const { resourcePath : file } = this; 26 | 27 | try { 28 | await processor.string(file, source); 29 | 30 | const { code, warnings } = transform(file, processor, options); 31 | 32 | warnings.forEach((warning) => { 33 | this.emitWarning(warning); 34 | }); 35 | 36 | return done(null, code); 37 | } catch(e) { 38 | return done(e); 39 | } 40 | }; 41 | -------------------------------------------------------------------------------- /packages/webpack/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "@modular-css/webpack", 3 | "version": "29.1.1", 4 | "description": "Webpack support for modular-css", 5 | "main": "./plugin.js", 6 | "loader": "./loader.js", 7 | "repository": { 8 | "type": "git", 9 | "url": "https://github.com/tivac/modular-css.git", 10 | "directory": "packages/webpack" 11 | }, 12 | "bugs": { 13 | "url": "https://github.com/tivac/modular-css/issues" 14 | }, 15 | "author": "Pat Cavit ", 16 | "homepage": "https://m-css.com", 17 | "license": "MIT", 18 | "publishConfig": { 19 | "access": "public" 20 | }, 21 | "keywords": [ 22 | "webpack", 23 | "webpack-plugin", 24 | "webpack-loader", 25 | "css", 26 | "css-modules", 27 | "modular-css", 28 | "postcss" 29 | ], 30 | "peerDependencies": { 31 | "webpack": "^5.0.0" 32 | }, 33 | "dependencies": { 34 | "@modular-css/css-to-js": "^29.1.1", 35 | "@modular-css/processor": "^29.0.4" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /packages/webpack/test/output/.gitignore: -------------------------------------------------------------------------------- 1 | # Ignore everything in this directory 2 | * 3 | # Except this file 4 | !.gitignore 5 | -------------------------------------------------------------------------------- /packages/webpack/test/records/change.js.json: -------------------------------------------------------------------------------- 1 | { 2 | "chunks": { 3 | "byName": { 4 | "main": "main" 5 | }, 6 | "bySource": {}, 7 | "usedIds": [] 8 | }, 9 | "modules": { 10 | "byIdentifier": { 11 | "packages/webpack/loader.js!packages/webpack/test/output/changed.css": "./packages/webpack/test/output/changed.css", 12 | "packages/webpack/test/specimens/change.js": "./packages/webpack/test/specimens/change.js" 13 | }, 14 | "usedIds": [] 15 | } 16 | } -------------------------------------------------------------------------------- /packages/webpack/test/records/es2015-default.js.json: -------------------------------------------------------------------------------- 1 | { 2 | "chunks": { 3 | "byName": { 4 | "main": "main" 5 | }, 6 | "bySource": {}, 7 | "usedIds": [] 8 | }, 9 | "modules": { 10 | "byIdentifier": { 11 | "packages/webpack/loader.js!packages/webpack/test/specimens/es2015.css": "./packages/webpack/test/specimens/es2015.css", 12 | "packages/webpack/test/specimens/es2015-default.js": "./packages/webpack/test/specimens/es2015-default.js" 13 | }, 14 | "usedIds": [] 15 | } 16 | } -------------------------------------------------------------------------------- /packages/webpack/test/records/es2015-named.js.json: -------------------------------------------------------------------------------- 1 | { 2 | "chunks": { 3 | "byName": { 4 | "main": "main" 5 | }, 6 | "bySource": {}, 7 | "usedIds": [] 8 | }, 9 | "modules": { 10 | "byIdentifier": { 11 | "packages/webpack/loader.js!packages/webpack/test/specimens/es2015.css": "./packages/webpack/test/specimens/es2015.css", 12 | "packages/webpack/test/specimens/es2015-named.js": "./packages/webpack/test/specimens/es2015-named.js" 13 | }, 14 | "usedIds": [] 15 | } 16 | } -------------------------------------------------------------------------------- /packages/webpack/test/records/invalid-name.js.json: -------------------------------------------------------------------------------- 1 | { 2 | "chunks": { 3 | "byName": { 4 | "main": "main" 5 | }, 6 | "bySource": {}, 7 | "usedIds": [] 8 | }, 9 | "modules": { 10 | "byIdentifier": { 11 | "packages/webpack/loader.js!packages/webpack/test/specimens/invalid-name.css": "./packages/webpack/test/specimens/invalid-name.css", 12 | "packages/webpack/test/specimens/invalid-name.js": "./packages/webpack/test/specimens/invalid-name.js" 13 | }, 14 | "usedIds": [] 15 | } 16 | } -------------------------------------------------------------------------------- /packages/webpack/test/records/invalid.js.json: -------------------------------------------------------------------------------- 1 | { 2 | "chunks": { 3 | "byName": { 4 | "main": "main" 5 | }, 6 | "bySource": {}, 7 | "usedIds": [] 8 | }, 9 | "modules": { 10 | "byIdentifier": { 11 | "packages/webpack/loader.js!packages/webpack/test/specimens/invalid.css": "./packages/webpack/test/specimens/invalid.css", 12 | "packages/webpack/test/specimens/invalid.js": "./packages/webpack/test/specimens/invalid.js" 13 | }, 14 | "usedIds": [] 15 | } 16 | } -------------------------------------------------------------------------------- /packages/webpack/test/records/parse-error.js.json: -------------------------------------------------------------------------------- 1 | { 2 | "chunks": { 3 | "byName": {}, 4 | "bySource": {}, 5 | "usedIds": [] 6 | }, 7 | "modules": { 8 | "byIdentifier": {}, 9 | "usedIds": [] 10 | } 11 | } -------------------------------------------------------------------------------- /packages/webpack/test/records/simple.js.json: -------------------------------------------------------------------------------- 1 | { 2 | "chunks": { 3 | "byName": { 4 | "main": "main" 5 | }, 6 | "bySource": {}, 7 | "usedIds": [] 8 | }, 9 | "modules": { 10 | "byIdentifier": { 11 | "packages/webpack/loader.js!packages/webpack/test/specimens/simple.css": "./packages/webpack/test/specimens/simple.css", 12 | "packages/webpack/loader.js??ref--4!packages/webpack/test/specimens/simple.css": "./packages/webpack/test/specimens/simple.css", 13 | "packages/webpack/test/specimens/simple.js": "./packages/webpack/test/specimens/simple.js" 14 | }, 15 | "usedIds": [] 16 | } 17 | } -------------------------------------------------------------------------------- /packages/webpack/test/records/start.js.json: -------------------------------------------------------------------------------- 1 | { 2 | "chunks": { 3 | "byName": {}, 4 | "bySource": {}, 5 | "usedIds": [] 6 | }, 7 | "modules": { 8 | "byIdentifier": {}, 9 | "usedIds": [] 10 | } 11 | } -------------------------------------------------------------------------------- /packages/webpack/test/records/watch.js.json: -------------------------------------------------------------------------------- 1 | { 2 | "chunks": { 3 | "byName": { 4 | "main": "main" 5 | }, 6 | "bySource": {}, 7 | "usedIds": [] 8 | }, 9 | "modules": { 10 | "byIdentifier": { 11 | "packages/webpack/loader.js!packages/webpack/test/output/watched.css": "./packages/webpack/test/output/watched.css", 12 | "packages/webpack/test/specimens/watch.js": "./packages/webpack/test/specimens/watch.js" 13 | }, 14 | "usedIds": [] 15 | } 16 | } -------------------------------------------------------------------------------- /packages/webpack/test/specimens/change.js: -------------------------------------------------------------------------------- 1 | import css from "../output/changed.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/es2015-default.js: -------------------------------------------------------------------------------- 1 | import css from "./es2015.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/es2015-missing.js: -------------------------------------------------------------------------------- 1 | import { c } from "./es2015.css"; 2 | 3 | console.log(c); 4 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/es2015-named.js: -------------------------------------------------------------------------------- 1 | import { a, val } from "./es2015.css"; 2 | 3 | console.log(a, val); 4 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/es2015.css: -------------------------------------------------------------------------------- 1 | @value val: "value"; 2 | 3 | .a { color: red; } 4 | .b { color: blue; } 5 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/folder/folder.css: -------------------------------------------------------------------------------- 1 | @value folder: white; 2 | .folder { margin: 2px; } 3 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/folder/folder2.css: -------------------------------------------------------------------------------- 1 | .folder2 { color: green; } 2 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/folder/subfolder/subfolder.css: -------------------------------------------------------------------------------- 1 | .subfolder { color: yellow; } 2 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/invalid-name.css: -------------------------------------------------------------------------------- 1 | .fooga { color: red; } 2 | .fooga-wooga { color: red; } 3 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/invalid-name.js: -------------------------------------------------------------------------------- 1 | import css, {fooga} from "./invalid-name.css"; 2 | 3 | console.log(css, fooga); 4 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/invalid.css: -------------------------------------------------------------------------------- 1 | .fooga { color: red; } 2 | .booga { composes: foo; } 3 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/invalid.js: -------------------------------------------------------------------------------- 1 | require("./invalid.css"); 2 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/local.css: -------------------------------------------------------------------------------- 1 | @value one: red; 2 | @value two: blue; 3 | @value folder from "./folder/folder.css"; 4 | 5 | .booga { background: green; } 6 | .looga { composes: booga; } 7 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/parse-error.css: -------------------------------------------------------------------------------- 1 | // This comment should be a parsing error 2 | .foo { 3 | color: red; 4 | } 5 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/parse-error.js: -------------------------------------------------------------------------------- 1 | require("./parse-error.css"); 2 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/simple.css: -------------------------------------------------------------------------------- 1 | .wooga { color: red; } 2 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/simple.js: -------------------------------------------------------------------------------- 1 | require("./simple.css"); 2 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/start.css: -------------------------------------------------------------------------------- 1 | @value one, two, folder from "./local.css"; 2 | .wooga { composes: booga from "./local.css"; } 3 | .booga { color: one; background: two; } 4 | .tooga { border: 1px solid folder; } 5 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/start.js: -------------------------------------------------------------------------------- 1 | require("./start.css"); 2 | -------------------------------------------------------------------------------- /packages/webpack/test/specimens/watch.js: -------------------------------------------------------------------------------- 1 | import css from "../output/watched.css"; 2 | 3 | console.log(css); 4 | -------------------------------------------------------------------------------- /packages/www/.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | .svelte-kit/ 4 | package/ 5 | .env 6 | .env.* 7 | !.env.example 8 | __old__/ 9 | .netlify/ -------------------------------------------------------------------------------- /packages/www/.npmrc: -------------------------------------------------------------------------------- 1 | engine-strict=true 2 | -------------------------------------------------------------------------------- /packages/www/README.md: -------------------------------------------------------------------------------- 1 | # @modular-css/www 2 | 3 | Code + content that becomes m-css.com 4 | 5 | ## Building 6 | 7 | From the root, `npm run www:build` will build a static copy of the site to the `packages/www/dist` folder. 8 | 9 | `npm run www:start` will start a rollup watcher as well as a server. 10 | 11 | ## Hosting 12 | 13 | Site is hosted by netlify.com, auto-builds and deploys from the `main` branch. Should keep it up to date with future releases. 14 | 15 | ## TODO 16 | 17 | - [ ] Allow for giving new REPL tabs a name 18 | - [ ] Figure out how to get REPL build to not output CSS 19 | -------------------------------------------------------------------------------- /packages/www/build/md/rehype-hierarchical-slugs.js: -------------------------------------------------------------------------------- 1 | import ghSlugger from "github-slugger"; 2 | import { hasProperty } from "hast-util-has-property"; 3 | import { heading } from "hast-util-heading"; 4 | import { headingRank } from "hast-util-heading-rank"; 5 | import { toString } from "hast-util-to-string"; 6 | import { visit } from "unist-util-visit"; 7 | 8 | const { slug : slugger } = ghSlugger; 9 | 10 | export default function rehypeHierarchicalSlug() { 11 | return (tree) => { 12 | const slugs = []; 13 | 14 | visit(tree, "element", (node) => { 15 | if(!heading(node) || !node.properties || hasProperty(node, "id")) { 16 | return; 17 | } 18 | 19 | const rank = headingRank(node); 20 | const slug = slugger(toString(node)); 21 | 22 | let last = slugs[slugs.length - 1]; 23 | 24 | while(last && last.rank >= rank) { 25 | slugs.pop(); 26 | 27 | last = slugs[slugs.length - 1]; 28 | } 29 | 30 | if(rank > 1) { 31 | slugs.push({ rank, slug }); 32 | } 33 | 34 | node.properties.id = slugs.map(({ slug : s }) => s).join("-"); 35 | }); 36 | }; 37 | } 38 | -------------------------------------------------------------------------------- /packages/www/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "./.svelte-kit/tsconfig.json" 3 | } 4 | -------------------------------------------------------------------------------- /packages/www/netlify.toml: -------------------------------------------------------------------------------- 1 | [build] 2 | command = "npm run www:deploy" 3 | publish = "packages/www/build/" 4 | -------------------------------------------------------------------------------- /packages/www/src/app.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | %sveltekit.head% 10 | 11 | 12 | %sveltekit.body% 13 | 14 | 15 | -------------------------------------------------------------------------------- /packages/www/src/global.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /packages/www/src/lib/title.svelte: -------------------------------------------------------------------------------- 1 | 4 | 5 | 6 | modular-css{title ? ` | ${title}` : ""} 7 | 8 | -------------------------------------------------------------------------------- /packages/www/src/routes/+layout.js: -------------------------------------------------------------------------------- 1 | // Force pre-rendering for all pages 2 | // Why doesn't adapter-static do this automatically any more? 3 | export const prerender = true; 4 | 5 | // Force trailing slashes 6 | export const trailingSlash = "always"; 7 | 8 | // Default SSR to on 9 | export const ssr = true; 10 | -------------------------------------------------------------------------------- /packages/www/src/routes/+layout.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 |
11 |
12 | 13 | {#if toc} 14 | 17 | {/if} 18 | 19 |
20 | 21 |
22 |
23 | -------------------------------------------------------------------------------- /packages/www/src/routes/+page.js: -------------------------------------------------------------------------------- 1 | export function load() { 2 | return { 3 | fullscreen : true, 4 | }; 5 | } 6 | -------------------------------------------------------------------------------- /packages/www/src/routes/+page.svelte: -------------------------------------------------------------------------------- 1 | 9 | 10 | 11 | 12 | <div class={css.home}> 13 | <div class={css.title}> 14 | <h1 class={css.head}>modular-css</h1> 15 | <h2 class={css.headline}>CSS Modules, improved and extended.</h2> 16 | </div> 17 | 18 | <div class={css.intro}> 19 | <div class={css.introtext}> 20 | {@html intro} 21 | </div> 22 | 23 | <div class={css.learn}> 24 | <a href="/overview/" class={css.cta}> 25 | Learn More Now! 26 | </a> 27 | </div> 28 | </div> 29 | 30 | <div class={css.example}> 31 | {@html example} 32 | </div> 33 | </div> 34 | -------------------------------------------------------------------------------- /packages/www/src/routes/_home/example.md: -------------------------------------------------------------------------------- 1 | ```css 2 | /* === input.css === */ 3 | .input { 4 | width: 100%; 5 | } 6 | 7 | /* === example.css === */ 8 | /* Values */ 9 | @value warning: rgb(250, 128, 114); 10 | 11 | .alert { background: warning; } 12 | 13 | /* Scoping */ 14 | :global(.alertBanner) { 15 | /* Composition */ 16 | composes: alert; 17 | 18 | color: rgb(255, 255, 255); 19 | } 20 | 21 | /* Styling Overrides */ 22 | .fieldset :external(input from "./input.css") { 23 | width: 50%; 24 | } 25 | ``` 26 | -------------------------------------------------------------------------------- /packages/www/src/routes/_home/intro.md: -------------------------------------------------------------------------------- 1 | Use the features you know and love like [selector scoping](/guide/#selector-scoping), [selector compositions](/guide/#style-composition), or [shared values](/guide/#values) alongside brand new ones like [styling overrides](/guide/#overriding-styles) and extensible [lifecycle hooks](/api/#lifecycle-hooks). All from the comfort of tools you're already using like [vite](/api/#bundlers-vite), [rollup](/api/#bundlers-rollup), [webpack](/api/#bundlers-webpack), [postcss](/api/#other-tools-postcss), the [cli](/api/#direct-usage-cli), and more! -------------------------------------------------------------------------------- /packages/www/src/routes/_layout/header.svelte: -------------------------------------------------------------------------------- 1 | <script> 2 | import { version } from "../../../package.json"; 3 | import css from "./header.mcss"; 4 | 5 | const links = [ 6 | { 7 | text : "Overview", 8 | url : "/overview/", 9 | }, 10 | { 11 | text : "API", 12 | url : "/api/", 13 | }, 14 | { 15 | text : "REPL", 16 | url : "/repl/", 17 | }, 18 | { 19 | text : "GitHub", 20 | url : "https://github.com/tivac/modular-css", 21 | }, 22 | ]; 23 | </script> 24 | 25 | <div class={css.header}> 26 | <a href="/" class={css.name}>modular-css</a> 27 | <a href="/changelog/" class={css.version}>v{version}</a> 28 | 29 | <div class={css.links}> 30 | {#each links as { text, url }} 31 | <a href={url} class={css.link}>{text}</a> 32 | {/each} 33 | </div> 34 | </div> 35 | 36 | -------------------------------------------------------------------------------- /packages/www/src/routes/api/+page.js: -------------------------------------------------------------------------------- 1 | import { toc } from "./_content/api.md"; 2 | 3 | export function load() { 4 | return { 5 | toc, 6 | }; 7 | } 8 | -------------------------------------------------------------------------------- /packages/www/src/routes/api/+page.svelte: -------------------------------------------------------------------------------- 1 | <script> 2 | import Title from "$lib/title.svelte"; 3 | 4 | import { content } from "./_content/api.md"; 5 | import css from "../_layout/layout.mcss"; 6 | </script> 7 | 8 | <Title title="API" /> 9 | 10 | <div class={css.prose}> 11 | {@html content} 12 | </div> 13 | -------------------------------------------------------------------------------- /packages/www/src/routes/api/_content/api.md: -------------------------------------------------------------------------------- 1 | # modular-css API 2 | 3 | @import "./usage.md" 4 | 5 | @import "./utilities.md" 6 | 7 | @import "./extending.md" 8 | -------------------------------------------------------------------------------- /packages/www/src/routes/api/_content/extending-before.md: -------------------------------------------------------------------------------- 1 | ### `before` 2 | 3 | The `before` hook is run before a CSS file is ever processed by `modular-css`, so it provides access to rewrite files if they aren't actually CSS or contain non-standard syntax. Plugins like [`postcss-nested`](https://github.com/postcss/postcss-nested) go well here. 4 | 5 | 6 | #### Usage 7 | 8 | Specify an array of PostCSS plugins to be run against each file before it is processed. Plugin will be passed a `from` option. 9 | 10 | ```javascript 11 | new Processor({ 12 | before : [ require("postcss-import") ] 13 | }); 14 | ``` 15 | -------------------------------------------------------------------------------- /packages/www/src/routes/api/_content/extending-done.md: -------------------------------------------------------------------------------- 1 | ### `done` 2 | 3 | The `done` hook is run after all of the constituent files are combined into a single stylesheet. This makes it a good place to add tools like [`cssnano`](http://cssnano.co/) that need access to the entire stylesheet to be able to accurately optimize the CSS. 4 | 5 | #### Usage 6 | 7 | Specify an array of PostCSS plugins to be run against the complete combined CSS. Plugin will be passed a `to` option. 8 | 9 | ```javascript 10 | new Processor({ 11 | done : [ require("cssnano")()] 12 | }); 13 | ``` 14 | -------------------------------------------------------------------------------- /packages/www/src/routes/api/_content/extending.md: -------------------------------------------------------------------------------- 1 | ## Lifecycle Hooks 2 | 3 | There are 4 built-in ways to extend the functionality of `modular-css`, the **lifecycle hooks**. They all can be used to add any number of [PostCSS Plugins](https://github.com/postcss/postcss/blob/main/docs/plugins.md) to `modular-css` at specific points in the processing cycle. 4 | 5 | @import "./extending-before.md" 6 | 7 | @import "./extending-processing.md" 8 | 9 | @import "./extending-after.md" 10 | 11 | @import "./extending-done.md" 12 | -------------------------------------------------------------------------------- /packages/www/src/routes/api/_content/usage-cli.md: -------------------------------------------------------------------------------- 1 | ### CLI 2 | 3 | CLI interface to [`modular-css`](https://github.com/tivac/modular-css). 4 | 5 | #### Install 6 | 7 | ```shell 8 | $ npm i @modular-css/cli 9 | ``` 10 | 11 | #### Usage 12 | 13 | ``` 14 | $ modular-css [options] <glob>... 15 | 16 | Options 17 | --dir, -d <dir> Directory to search from [process cwd] 18 | --out, -o <file> File to write output CSS to [stdout] 19 | --json, -j <file> File to write output compositions JSON to 20 | --map, -m Include inline source map in output 21 | --rewrite, -r Control rewriting of url() references in CSS 22 | --help Show this help 23 | ``` 24 | -------------------------------------------------------------------------------- /packages/www/src/routes/api/_content/usage-glob-api.md: -------------------------------------------------------------------------------- 1 | ### globbing API 2 | 3 | A JS API for using glob patterns with [`modular-css`](https://github.com/tivac/modular-css). 4 | 5 | #### Install 6 | 7 | `$ npm i @modular-css/glob` 8 | 9 | #### Usage 10 | 11 | ```javascript 12 | const glob = require("@modular-css/glob"); 13 | 14 | // returns a filled-out Processor instance you can use 15 | const processor = await glob({ 16 | search : [ 17 | "**/*.css" 18 | ] 19 | }) 20 | ``` 21 | 22 | #### Options 23 | 24 | ###### `search` 25 | 26 | Array of glob patterns to pass to [`globule`](https://www.npmjs.com/package/globule) for searching. 27 | 28 | ##### Shared Options 29 | 30 | All other options are passed to the underlying `Processor` instance, see the [Processor Options](#direct-usage-js-api-processor-options). 31 | -------------------------------------------------------------------------------- /packages/www/src/routes/api/_content/usage.md: -------------------------------------------------------------------------------- 1 | You can use `modular-css` a variety of ways. The easiest is with one of the bundler integrations, which exist for most popular bundlers in use today. 2 | 3 | ## Bundlers 4 | 5 | @import "./usage-rollup.md" 6 | 7 | @import "./usage-vite.md" 8 | 9 | @import "./usage-sveltekit.md" 10 | 11 | @import "./usage-webpack.md" 12 | 13 | @import "./usage-browserify.md" 14 | 15 | ## Direct Usage 16 | 17 | @import "./usage-js.md" 18 | 19 | @import "./usage-glob-api.md" 20 | 21 | @import "./usage-cli.md" 22 | 23 | ## Other Tools 24 | 25 | @import "./usage-svelte.md" 26 | 27 | @import "./usage-postcss.md" 28 | -------------------------------------------------------------------------------- /packages/www/src/routes/api/_content/utilities.md: -------------------------------------------------------------------------------- 1 | ## Other Utilities 2 | 3 | @import "./utilities-aliases.md" 4 | 5 | @import "./utilities-namer.md" 6 | 7 | @import "./utilities-paths.md" -------------------------------------------------------------------------------- /packages/www/src/routes/changelog/+page.svelte: -------------------------------------------------------------------------------- 1 | <script> 2 | import Title from "$lib/title.svelte"; 3 | 4 | import content from "../../../../../CHANGELOG.md"; 5 | 6 | import css from "./_changelog.mcss"; 7 | </script> 8 | 9 | <Title title="Changelog" /> 10 | 11 | <div class={css.changelog}> 12 | {@html content} 13 | </div> 14 | -------------------------------------------------------------------------------- /packages/www/src/routes/changelog/_changelog.mcss: -------------------------------------------------------------------------------- 1 | .changelog a, 2 | .changelog a:hover { 3 | text-decoration: underline; 4 | } 5 | 6 | .changelog ul { 7 | margin: 2rem 0; 8 | } 9 | 10 | .changelog li + li { 11 | margin-top: 1rem; 12 | } 13 | 14 | .changelog :global(.toc) { 15 | display: none; 16 | } 17 | 18 | .changelog { 19 | h3, 20 | h4 { 21 | :global(.anchor) { 22 | display: none; 23 | } 24 | } 25 | } -------------------------------------------------------------------------------- /packages/www/src/routes/guide/+page.js: -------------------------------------------------------------------------------- 1 | import { redirect } from "@sveltejs/kit"; 2 | 3 | /* Just a redirect to /overview */ 4 | export async function load() { 5 | throw redirect(301, "/overview/"); 6 | } 7 | -------------------------------------------------------------------------------- /packages/www/src/routes/guide/+page.svelte: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tivac/modular-css/9b032a3d7008a9775273e3942cdd28caeca8ff40/packages/www/src/routes/guide/+page.svelte -------------------------------------------------------------------------------- /packages/www/src/routes/overview/+page.js: -------------------------------------------------------------------------------- 1 | import { toc } from "./_content/intro.md"; 2 | 3 | export function load() { 4 | return { 5 | toc, 6 | }; 7 | } 8 | -------------------------------------------------------------------------------- /packages/www/src/routes/overview/+page.svelte: -------------------------------------------------------------------------------- 1 | <script> 2 | import Title from "$lib/title.svelte"; 3 | 4 | import { content } from "./_content/intro.md"; 5 | import css from "../_layout/layout.mcss"; 6 | </script> 7 | 8 | <Title title="Overview" /> 9 | 10 | <div class={css.prose}> 11 | {@html content} 12 | </div> 13 | 14 | -------------------------------------------------------------------------------- /packages/www/src/routes/overview/_content/feature-overriding-styles.md: -------------------------------------------------------------------------------- 1 | #### Overriding Styles 2 | 3 | Sometimes a component will need some customization for use in a specific location/design, but you don't want to bake that customization into the component.`:external(...)` helps you solve that problem. 4 | 5 | In this case we've got an `input` component that is normally 100% of the width of its container, but when it's within the `fieldset` component it should only be half as wide. 6 | 7 | ```css 8 | /* == input.css == */ 9 | .input { 10 | width: 100%; 11 | } 12 | 13 | /* == fieldset.css == */ 14 | .fieldset :external(input from "./input.css") { 15 | width: 50%; 16 | } 17 | ``` 18 | 19 | will create output like this 20 | 21 | ```css 22 | .mcd8e24dd1_input { 23 | width: 100%; 24 | } 25 | 26 | .mcf250d69f_fieldset .mcd8e24dd1_input { 27 | width: 50%; 28 | } 29 | ``` 30 | -------------------------------------------------------------------------------- /packages/www/src/routes/overview/_content/feature-values-importing.md: -------------------------------------------------------------------------------- 1 | #### Importing @values 2 | 3 | `@value` declarations can be imported from another file by using a slightly different syntax. 4 | 5 | ```css 6 | /* === colors.css === */ 7 | @value main: red; 8 | @value bg: white; 9 | 10 | /* === site.css === */ 11 | @value main from "./colors.css"; 12 | 13 | body { 14 | color: main; 15 | } 16 | ``` 17 | 18 | It's also possible to import multiple values at once. 19 | 20 | ```css 21 | /* === colors.css === */ 22 | @value main: red; 23 | @value bg: white; 24 | 25 | /* === site.css === */ 26 | @value main, bg from "./colors.css"; 27 | 28 | body { 29 | color: main; 30 | background: bg; 31 | } 32 | ``` 33 | -------------------------------------------------------------------------------- /packages/www/src/routes/overview/_content/feature-values-namespaced.md: -------------------------------------------------------------------------------- 1 | #### Namespaced @values 2 | 3 | `@value` declarations can be imported as a namespace which provides a convenient shorthand way to access a bunch of shared values from a file. 4 | 5 | ```css 6 | /* === colors.css === */ 7 | @value main: red; 8 | @value bg: white; 9 | 10 | /* === site.css === */ 11 | @value * as colors from "./colors.css"; 12 | 13 | body { 14 | color: colors.main; 15 | background: colors.bg; 16 | } 17 | ``` 18 | -------------------------------------------------------------------------------- /packages/www/src/routes/overview/_content/feature-values-wildcard.md: -------------------------------------------------------------------------------- 1 | #### Wildcard @values 2 | 3 | It's possible to import all the `@value` definitions from another file into the current one. Any local `@value` declarations will override the imported values. 4 | 5 | ```css 6 | /* === colors.css === */ 7 | @value main: red; 8 | @value bg: white; 9 | 10 | /* === site.css === */ 11 | @value * from "./colors.css"; 12 | @value bg: black; 13 | 14 | body { 15 | /* black */ 16 | background: bg; 17 | /* red */ 18 | color: main; 19 | } 20 | ``` 21 | 22 | Since all files in `modular-css` with `@value` declaration make that value available to other files it's possible to use the wildcard imports feature to build complex theming systems. When using wildcard imports all the `@value` declarations from the source file are re-exported by the file doing the importing. 23 | 24 | ```css 25 | /* === colors.css === */ 26 | @value main: red; 27 | @value bg: white; 28 | 29 | /* === mobile-colors.css === */ 30 | @value * from "./colors.css"; 31 | @value bg: gray; 32 | 33 | /* === site.css === */ 34 | @value * as colors from "./mobile-colors.css"; 35 | 36 | body { 37 | /* gray */ 38 | background: colors.bg; 39 | /* red */ 40 | color: colors.main; 41 | } 42 | ``` 43 | -------------------------------------------------------------------------------- /packages/www/src/routes/overview/_content/feature-values.md: -------------------------------------------------------------------------------- 1 | ### Values 2 | 3 | Values are re-usable pieces of content that can be used instead of hardcoding colors, sizes, media queries, or most other forms of CSS values. They're automatically replaced during the build with their defined value, and can also be composed between files for further re-use or overriding. They're effectively static versions of CSS variables, but with a few extra build-time powers we'll get into later. 4 | 5 | ```css 6 | @value alert: #F00; 7 | @value small: (max-width: 600px); 8 | 9 | @media small { 10 | .alert { color: alert; } 11 | } 12 | ``` 13 | 14 | will output 15 | 16 | ```css 17 | @media (max-width: 600px) { 18 | .alert { color: #F00; } 19 | } 20 | ``` 21 | -------------------------------------------------------------------------------- /packages/www/src/routes/overview/_content/features.md: -------------------------------------------------------------------------------- 1 | ## Features 2 | 3 | `modular-css` implements the best features of the CSS Modules spec and then adds on several extra features to make for a smoother developer experience. 4 | 5 | @import "./feature-scoped-selectors.md" 6 | 7 | @import "./feature-composing-styles.md" 8 | 9 | @import "./feature-values.md" 10 | 11 | @import "./feature-values-importing.md" 12 | 13 | @import "./feature-values-namespaced.md" 14 | 15 | @import "./feature-values-wildcard.md" 16 | 17 | ### Other Features 18 | 19 | These features can help when you find yourself bumping up against the edges of a few specific problems in `modular-css` but are best used sparingly. 20 | 21 | @import "./feature-overriding-styles.md" 22 | 23 | @import "./feature-composing-files.md" -------------------------------------------------------------------------------- /packages/www/src/routes/overview/_content/test.md: -------------------------------------------------------------------------------- 1 | # I AM TEST CONTENT THAT GOT LOOOOOADED 2 | 3 | @import "./feature-values.md" -------------------------------------------------------------------------------- /packages/www/src/routes/repl/+page.js: -------------------------------------------------------------------------------- 1 | export function load() { 2 | return { 3 | fullscreen : true, 4 | }; 5 | } 6 | 7 | // REPL doesn't SSR, there isn't any point 8 | export const ssr = false; 9 | -------------------------------------------------------------------------------- /packages/www/src/routes/repl/+page.svelte: -------------------------------------------------------------------------------- 1 | <script> 2 | import { onMount } from "svelte"; 3 | 4 | import Title from "$lib/title.svelte"; 5 | 6 | import Editor from "./_editor/editor.svelte"; 7 | 8 | import hash from "./_lib/hash.js"; 9 | import { error } from "./_lib/stores.js"; 10 | 11 | import Tabs from "./_tabs.svelte"; 12 | import Output from "./_output.svelte"; 13 | 14 | import css from "./_repl.mcss"; 15 | 16 | onMount(hash); 17 | </script> 18 | 19 | <Title title="REPL" /> 20 | 21 | <div class={css.repl}> 22 | <Tabs /> 23 | 24 | <div class={css.input}> 25 | <Editor /> 26 | </div> 27 | 28 | <Output /> 29 | 30 | <div class={css.error} data-visible={Boolean($error)}> 31 | <pre>{$error && $error.toString()}</pre> 32 | </div> 33 | </div> 34 | 35 | -------------------------------------------------------------------------------- /packages/www/src/routes/repl/_editor/codemirror.js: -------------------------------------------------------------------------------- 1 | import codemirror from "codemirror"; 2 | import "codemirror/mode/css/css.js"; 3 | 4 | import mcssMime from "$lib/codemirror-mcss-mime.js"; 5 | 6 | mcssMime(codemirror); 7 | 8 | export { 9 | codemirror, 10 | }; 11 | -------------------------------------------------------------------------------- /packages/www/src/routes/repl/_editor/codemirror.mcss: -------------------------------------------------------------------------------- 1 | .editor { 2 | flex: 1; 3 | 4 | display: flex; 5 | flex-direction: column; 6 | align-items: stretch; 7 | } 8 | 9 | .editor :global(.CodeMirror) { 10 | flex: 1; 11 | 12 | font-size: 0.9rem; 13 | } 14 | 15 | .errorLocation { 16 | position: relative; 17 | border-bottom: 2px solid rgb(200, 0, 0); 18 | } 19 | 20 | .errorLine { 21 | background-color: rgba(200, 0, 0, 0.05); 22 | } 23 | 24 | .loading {} 25 | .loaderror {} 26 | -------------------------------------------------------------------------------- /packages/www/src/routes/repl/_editor/editor.svelte: -------------------------------------------------------------------------------- 1 | <script> 2 | import { file, update, error } from "../_lib/stores.js"; 3 | 4 | import CodeMirror from "./codemirror.svelte"; 5 | 6 | let codemirror; 7 | 8 | // Update codemirror instance if the file value changed 9 | $: if(codemirror) { 10 | codemirror.input($file.src); 11 | } 12 | 13 | $: if(codemirror && $error) { 14 | codemirror.error($error); 15 | } 16 | </script> 17 | 18 | <CodeMirror 19 | bind:this={codemirror} 20 | on:change={({ detail }) => update($file.name, detail.content)} 21 | /> 22 | -------------------------------------------------------------------------------- /packages/www/src/routes/repl/_output.mcss: -------------------------------------------------------------------------------- 1 | .output { 2 | composes: column from "./_repl.mcss"; 3 | 4 | grid-area: output; 5 | 6 | position: relative; 7 | } 8 | -------------------------------------------------------------------------------- /packages/www/src/routes/repl/_output.svelte: -------------------------------------------------------------------------------- 1 | <script> 2 | import { onMount } from "svelte"; 3 | 4 | import { output } from "./_lib/stores.js"; 5 | 6 | import CodeMirror from "./_editor/codemirror.svelte"; 7 | 8 | import css from "./_output.mcss"; 9 | 10 | const header = "/* == MODULAR-CSS OUTPUT == */"; 11 | 12 | const config = { 13 | readOnly : true, 14 | }; 15 | 16 | let codemirror; 17 | 18 | $: if(codemirror && $output) { 19 | codemirror.input([ 20 | header, 21 | $output.css, 22 | "", 23 | "/* == CLASS COMPOSITIONS == */", 24 | "/**", 25 | JSON.stringify($output.compositions, null, 4), 26 | "**/", 27 | ].join("\n")); 28 | } 29 | 30 | onMount(() => { 31 | // Default to just the header 32 | codemirror.input(header); 33 | }); 34 | </script> 35 | 36 | <div class={css.output}> 37 | <CodeMirror {config} bind:this={codemirror} /> 38 | </div> 39 | -------------------------------------------------------------------------------- /packages/www/src/routes/repl/_tabs.svelte: -------------------------------------------------------------------------------- 1 | <script> 2 | import { files, file, remove, add, select } from "./_lib/stores.js"; 3 | import css from "./_tabs.mcss"; 4 | </script> 5 | 6 | <div class={css.tabs}> 7 | <button 8 | class={css.add} 9 | title="Add a new file" 10 | on:click={() => add()} 11 | > 12 | ➕ 13 | </button> 14 | 15 | <div class={css.tabs}> 16 | {#each [ ...$files.keys() ] as f (f)} 17 | <div class={$file.name === f ? css.tabon : css.tab}> 18 | <button 19 | class={css.file} 20 | on:click={() => select(f)} 21 | > 22 | {f} 23 | </button> 24 | 25 | {#if $files.size > 1} 26 | <button 27 | class={css.remove} 28 | title="Remove {f}" 29 | on:click={() => remove(f)} 30 | > 31 | ❌ 32 | </button> 33 | {/if} 34 | </div> 35 | {/each} 36 | </div> 37 | </div> 38 | -------------------------------------------------------------------------------- /packages/www/static/pills-lol.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tivac/modular-css/9b032a3d7008a9775273e3942cdd28caeca8ff40/packages/www/static/pills-lol.jpg -------------------------------------------------------------------------------- /packages/www/svelte.config.js: -------------------------------------------------------------------------------- 1 | import staticAdapter from "@sveltejs/adapter-static"; 2 | 3 | import { preprocess } from "./build/mcss-setup.js"; 4 | 5 | /** @type {import('@sveltejs/kit').Config} */ 6 | const config = { 7 | kit : { 8 | // Default is "build" but I'm particular and prefer "dist" 9 | adapter : staticAdapter({ 10 | pages : "dist", 11 | }), 12 | 13 | prerender : { 14 | handleMissingId({ path, message }) { 15 | if(path === "/repl/") { 16 | return; 17 | } 18 | 19 | throw new Error(message); 20 | }, 21 | }, 22 | }, 23 | 24 | // Pass the svelte preprocessor from @modular-css/svelte into sveltekit 25 | // so that it can make most CSS classes static and shrink the compiled 26 | // component code way down 27 | preprocess, 28 | }; 29 | 30 | export default config; 31 | -------------------------------------------------------------------------------- /parsers/at-composes.pegjs: -------------------------------------------------------------------------------- 1 | start 2 | = atcomposes 3 | 4 | // @composes: "./file.css"; 5 | atcomposes 6 | = source:source { 7 | return { 8 | source, 9 | }; 10 | } 11 | -------------------------------------------------------------------------------- /parsers/composes.pegjs: -------------------------------------------------------------------------------- 1 | start 2 | = composition 3 | / global 4 | / namespaced 5 | / simple 6 | 7 | // fooga from "./wooga" 8 | // fooga, wooga from "./tooga" 9 | composition 10 | = refs:references source:from_source { 11 | return { 12 | type : "composition", 13 | source, 14 | refs 15 | }; 16 | } 17 | 18 | // fooga from global 19 | // fooga, wooga from global 20 | global 21 | = refs:references _ "from" _ global_keyword { 22 | return { 23 | type : "simple", 24 | refs: refs.map(({ name }) => ({ name, global : true })) 25 | }; 26 | } 27 | 28 | // fooga.booga 29 | namespaced 30 | = ns:ident "." ref:ident { 31 | return { 32 | type : "namespaced", 33 | ns, 34 | ref 35 | }; 36 | } 37 | 38 | // fooga 39 | // fooga, wooga 40 | simple 41 | = refs:references { 42 | return { 43 | type : "simple", 44 | refs 45 | }; 46 | } 47 | -------------------------------------------------------------------------------- /parsers/external.pegjs: -------------------------------------------------------------------------------- 1 | start 2 | = composition 3 | 4 | // fooga from "./wooga" 5 | // fooga, wooga from "./tooga" 6 | composition 7 | = ref:reference source:from_source { 8 | return { 9 | type : "composition", 10 | source, 11 | ref 12 | }; 13 | } 14 | -------------------------------------------------------------------------------- /playwright.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import("@playwright/test").PlaywrightTestConfig}<{ dir : string }> */ 2 | const config = { 3 | testDir : "./packages/vite/tests", 4 | 5 | timeout : 30 * 1000, 6 | 7 | expect : { 8 | timeout : 5 * 1000, 9 | }, 10 | 11 | // Run tests in files in parallel 12 | fullyParallel : true, 13 | 14 | // Fail the build on CI if you accidentally left test.only in the source code. 15 | forbidOnly : Boolean(process.env.CI), 16 | 17 | // Retry on CI only 18 | retries : process.env.CI ? 2 : 0, 19 | 20 | // Opt out of parallel tests on CI. 21 | workers : process.env.CI ? 1 : undefined, 22 | 23 | use : { 24 | channel : "chromium", 25 | 26 | screenshot : "only-on-failure", 27 | trace : "on-first-retry", 28 | video : "on-first-retry", 29 | }, 30 | 31 | webServer : [{ 32 | command : "npx vite", 33 | port : 5173, 34 | timeout : 30 * 1000, 35 | reuseExistingServer : !process.env.CI, 36 | }, { 37 | command : "npx vite build && npx vite preview --port=5174", 38 | port : 5174, 39 | timeout : 30 * 1000, 40 | reuseExistingServer : !process.env.CI, 41 | }], 42 | }; 43 | 44 | module.exports = config; 45 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { resolve } from "path"; 2 | 3 | import mcss from "./packages/vite/vite.js"; 4 | 5 | /** @type {import('vite').UserConfig} */ 6 | export default { 7 | root : "./packages/vite/tests/specimens", 8 | 9 | clearScreen : false, 10 | 11 | plugins : [ 12 | mcss({ 13 | namer : (file, selector) => `mc_${selector}`, 14 | dev : { 15 | coverage : true, 16 | }, 17 | }), 18 | ], 19 | 20 | build : { 21 | minify : false, 22 | 23 | rollupOptions : { 24 | input : { 25 | static : resolve(__dirname, "./packages/vite/tests/specimens/static/index.html"), 26 | dynamic : resolve(__dirname, "./packages/vite/tests/specimens/dynamic/index.html"), 27 | }, 28 | }, 29 | }, 30 | }; 31 | --------------------------------------------------------------------------------