From 4d63103667b988c96be7fd37877c7b037230e3b4 Mon Sep 17 00:00:00 2001 From: Mohsen Shafiei Date: Sun, 2 Jun 2019 22:44:34 +0430 Subject: [PATCH] fix(src): add some minor globals to fix simple global composition. add some of globals to fix simple global composition. --- src/plugins/postcss-module-composer.js | 37 +++++-- src/plugins/utils/global.js | 141 +++++++++++++++++++++++++ src/plugins/utils/index.js | 6 ++ 3 files changed, 175 insertions(+), 9 deletions(-) create mode 100644 src/plugins/utils/global.js diff --git a/src/plugins/postcss-module-composer.js b/src/plugins/postcss-module-composer.js index 4026c46..ce3dbed 100644 --- a/src/plugins/postcss-module-composer.js +++ b/src/plugins/postcss-module-composer.js @@ -2,7 +2,13 @@ const fs = require('fs'); const path = require('path'); const postcss = require('postcss'); const HashMap = require('hashmap'); -const { createModuleComposer, createModuleSelector, createModuleDeclaration } = require('./utils'); +const { + createModuleComposer, + createModuleSelector, + createModuleDeclaration, + isGlobal, + removeSpace, +} = require('./utils'); const mainDist = path.resolve(__dirname, '../../dist/quark-loader-output.css'); const main = fs.createWriteStream(mainDist); @@ -11,15 +17,28 @@ module.exports = postcss.plugin('postcss-module-composer', () => (root) => { let composerString = ''; let consumerString = ''; root.walkRules((rule) => { - composerString += `${rule.selector} {\n`; - rule.walkDecls((decl) => { - composerString += createModuleComposer(decl.prop, decl.value); - hashmap.set( - createModuleSelector(decl.prop, decl.value), - createModuleDeclaration(decl.prop, decl.value), - ); + const str = rule.selector; + str.split(',').forEach((selector) => { + composerString += `${removeSpace(selector)} {\n`; + if (!isGlobal(removeSpace(selector))) { + rule.walkDecls((decl) => { + composerString += createModuleComposer(decl.prop, decl.value); + hashmap.set( + createModuleSelector(decl.prop, decl.value), + createModuleDeclaration(decl.prop, decl.value), + ); + }); + } else { + rule.walkDecls((decl) => { + composerString += createModuleDeclaration(decl.prop, decl.value); + hashmap.set( + createModuleSelector(decl.prop, decl.value), + createModuleDeclaration(decl.prop, decl.value), + ); + }); + } + composerString += '}\n'; }); - composerString += '}\n'; }); hashmap.forEach((value, key) => { consumerString += key; diff --git a/src/plugins/utils/global.js b/src/plugins/utils/global.js new file mode 100644 index 0000000..00eb911 --- /dev/null +++ b/src/plugins/utils/global.js @@ -0,0 +1,141 @@ +module.exports = [ + '*', + '*::before', + '*::after', + 'olol', + 'ulul', + 'olul', + 'ulol', + 'precode', + 'a', + 'abbr', + 'acronym', + 'address', + 'applet', + 'area', + 'article', + 'aside', + 'audio', + 'b', + 'base', + 'basefont', + 'bdi', + 'bdo', + 'big', + 'blockquote', + 'body', + 'br', + 'button', + 'canvas', + 'caption', + 'center', + 'cite', + 'code', + 'col', + 'colgroup', + 'data', + 'datalist', + 'dd', + 'del', + 'details', + 'dfn', + 'dialog', + 'dir', + 'div', + 'dl', + 'dt', + 'em', + 'embed', + 'fieldset', + 'figcaption', + 'figure', + 'font', + 'footer', + 'form', + 'frame', + 'frameset', + 'h1', + 'h2', + 'h3', + 'h4', + 'h5', + 'h6', + 'head', + 'header', + 'hgroup', + 'hr', + 'html', + 'i', + 'iframe', + 'img', + 'input', + 'ins', + 'kbd', + 'kbdkbd', + 'label', + 'input', + 'legend', + 'fieldset', + 'li', + 'link', + 'main', + 'map', + 'mark', + 'meta', + 'meter', + 'nav', + 'noframes', + 'noscript', + 'object', + 'ol', + 'optgroup', + 'option', + 'output', + 'p', + 'param', + 'picture', + 'pre', + 'progress', + 'q', + 'rp', + 'rt', + 'ruby', + 's', + 'samp', + 'script', + 'section', + 'select', + 'small', + 'source', + 'span', + 'strike', + 'del', + 's', + 'strong', + 'style', + 'sub', + 'summary', + 'details', + 'sup', + 'svg', + 'table', + 'tbody', + 'td', + 'template', + 'textarea', + 'tfoot', + 'th', + 'thead', + 'time', + 'title', + 'tr', + 'track', + 'video', + 'audio', + 'tt', + 'u', + 'ul', + 'var', + 'video', + 'wbr', +]; diff --git a/src/plugins/utils/index.js b/src/plugins/utils/index.js index b25724d..b25e4e5 100644 --- a/src/plugins/utils/index.js +++ b/src/plugins/utils/index.js @@ -1,11 +1,17 @@ // eslint-disable-next-line const regex = /\(|\)|\%|\.|\#|\,|\+|\:|\"|\/|\/|\`|\'/g; +const globalSelector = require('./global'); + const createModuleComposer = (property, value) => (`\tcomposes: ${property}--${value.replace(/ /g, '-').replace(regex, '')};\n`); const createModuleDeclaration = (property, value) => (`\t${property}: ${value};\n`); const createModuleSelector = (property, value) => (`.${property}--${value.replace(/ /g, '-').replace(regex, '')} {\n`); +const isGlobal = selector => globalSelector.includes(selector); +const removeSpace = str => str.replace(/\s/g, ''); module.exports = { createModuleComposer, createModuleDeclaration, createModuleSelector, + isGlobal, + removeSpace, };